How the Web (tile) Map works

The translator presses: See this How does Web maps work when looking at MapBox Guides documents? , this document explains in an easy-to-understand way Web How the map works, in fact, more about the work of the tile map, in view of many people did not understand the principle of map slicing, so simple translation, because from MapBox document, the article inevitably involves MapBox terminology, but does not affect our understanding of the "

Web Maps opened on MapBox or Web maps embedded on your own site are actually the result of many parts working together, including MapBox map servers, distributed systems all over the world, and client-side code that runs in your browser.

This guide document will show you how a single tile map works together and generates a Web map.

Continuous space and detail

Web maps are so common that people often forget that they are different from ordinary paper city maps and the advantages of the world map. When you browse a Web map, as you roam through a large, contiguous picture, you can freely view New York, Paris, or even Tokyo by panning on the map (which may be far away). By zooming in and out of the Web map, you will see more and more details, such as city streets and buildings, from the country outline.

Instead of jumping directly from the country to that state or city, Web maps can navigate within a contiguous space system. Although the name is called a Web Map, the concept also applies to many mobile maps and there are more and more Web maps online, which makes the paper map gradually isolated. However, from now on, we call this concept a Web map.

Tile map and zoom level

A map of the world to the street level the width of the image is millions of pixels, because the data is too large to be downloaded once and cannot be hold in memory at once . In fact,Web maps are made up of many small squares of pictures called tiles. The tile size is generally 256*256 pixels, and these tiles are placed side by side to form a large, seemingly seamless map.

If we want to see more map details, such as the country outline level map and the street level map, you can use different zoom levels to achieve the goal. The higher the zoom level, the greater the physical size and detail of the display map.

To organize so many map tiles, theWeb Map uses a simple coordinate system. Each tile has a Z- coordinate to represent its zoom level, and an x -coordinate and a y - coordinate to represent the tile's position within the grid at the current zoom level. , such as:z/x/y.

The first tile is 0/0/0in the Web map System , with azoom level of 0anda tile that covers the entire world.

When the zoom level is 1 , the tile with a zoom level of 0 is divided into four equal squares with coordinates of 1/0/0 and 1/1/0 of the two blocks covering the northern hemisphere, with coordinates of 1/0/1 and 1/1/1 covering the southern hemisphere with two blocks.

Each zoom level contains a number of tiles of 4 n - th, where n is the zoom level. such as:

Zoom level 0 contains 1 tiles;

Zoom level 1 contains 4 tiles;

Zoom level 2 contains tile tiles;

And so on

Because the number of tiles increases exponentially with the zoom level, each increase in the zoom level adds a lot of detail to the map, and the need for bandwidth and storage space increases in order to cope with more and more tiles.

For example, a map with a zoom level is accurate to see the city building, which requires an extra-billion tile to cover the entire world, with a zoom level of , it only adds two zoom levels, which also covers the world but requires the million tiles.

Why use tiles?

Simply put, because tile maps can work well, Web maps use tiles.

1. Tile map cache is very efficient. If you've ever seen a map of Central Park and downloaded tiles from Manhattan, your browser can use the same tiles you previously cached, rather than downloading them again, when you need to display Jersey City maps.

2. Tile maps can be loaded incrementally. Central Park tiles are loaded before the Manhattan map edge loads, and you can move or zoom the map to a specific point, even though the edge portion of the current map has not been loaded yet.

3. Tile map is simple and easy to use. The coordinate system describing map tiles is simple, making it easy to integrate technology on servers, networks, desktops, or mobile devices.

Map Client and Tile

Let's show a map of Central Park. Because map tiles are images on the web, you need to embed the following HTML code in your Web page.

You will see tiles with 0/0/0 coordinates in your browser .

You need to do a lot of zooming to navigate to Central Park. With some HTML,CSS , and JavaScript Code, you can display a map of Central Park as follows:

1. First determine the z/x/y coordinates of tiles that can cover Manhattan and display the Central Park in detail .

2. Add a series of tags to the Web page and use CSS to position them in the grid in the appropriate location.

3. Add zoom buttons and drag-and-drop response processing for the map, and then start these processes again.

Fortunately, you don't have to do that anymore, that's what the map client does. The map client is usually a JavaScript Library that can help you find tiles to display and help you download from the map server and display them to the appropriate location on the map. the MapBox JavaScript API is a map client and of course you can use other map clients.

The map client needs to know the center location and zoom level you want to display, you can enter a location's coordinates and mapbox.js to find the tiles you need.

Central Park's latitude and longitude is 40.783 and -73.966, and the best zoom level for viewing the park is. We can use the setview ([40.783, -73.966],) method to tell mapbox.js to Center The location of the Central Park on the map and zoom to the level. Display effects such as:

Original document Address:https://www.mapbox.com/guides/how-web-maps-work/

How the Web (tile) Map works