We connect online maps to the navigator on the smartphone. Part 1 - standard raster maps

What are online cards like? How to find out the server address of the card you are interested in? How to create a settings file that allows the navigator on the smartphone to connect to this map?

Content:

1 - Introduction. Standard raster maps
2 - Continued. Writing a simple rasterizer for vector maps
3 - A special case. We connect the OverpassTurbo card

Introduction

Among the navigation applications for smartphones, there are those that are designed for tourism and all kinds of suburban activities. Among the most famous of them are OsmAnd, Locus and GuruMaps. All of them are distinguished by a large number of specialized functions that can come in handy along the way. And also an even greater number of all kinds of (sometimes very confusing) settings. But now we are most interested in one thing: the ability to add additional cards and quickly switch between them.

I note that this is an extremely useful feature. After all, one and the same area of ​​the terrain can be very differently drawn on maps of different types . And therefore, before overcoming difficult areas, it is useful to be able to check with each of them. However, if for this it was required to run several separate applications on a smartphone, this would be extremely inconvenient. Performance worsens, and the battery is consumed faster. So it’s very nice that there is the opportunity to get by with just one application: a sort of cartographic aggregator with a convenient interface, specially designed for quick switching between cards.

So here. As a rule, adding new cards is relatively simple. The application folder has a subfolder with presets . That is, with save files, in which the settings for downloading a particular card are indicated. Let's see what they are.

I note that for all applications, presets are more or less similar. So, as an example, we will consider GuruMaps, because it is both for Android and iOS. So, let's imagine that we went into the folder with its presets, found there a file called openstreetmaps.ms , and then opened it using a regular text editor.

<?xml version="1.0" encoding="UTF-8"?> <customMapSource> <name>OpenStreetMaps</name> <minZoom>0</minZoom> <maxZoom>18</maxZoom> <url>http://{$serverpart}.tile.openstreetmap.org/{$z}/{$x}/{$y}.png</url> <serverParts>ab c</serverParts> </customMapSource> 

In fact, we just have a list of several values. Let's consider them in order:

name - The name of the map that will be displayed in the application
minZoom - From what zoom level will this map be displayed
maxZoom - Up to what zoom level will this map show
url - Template for accessing map files
serverParts - If the server on which the map files are stored has several mirrors, then you need to list their names

Before moving on, I note that for storage on servers, large cards are broken into small pieces. Usually these are png images with a size of 256x256 pixels. These fragments are called tiles .

Now let's take a closer look at the url template.

http://{$serverpart}.tile.openstreetmap.org /{$z}/{$x}/{$y}.png

The navigator automatically replaces the words in braces with the “coordinates” of the map fragment that is currently required. Here is what exactly will be substituted for the stubs:

{$ serverpart} - One of the serverParts values ​​will be substituted here.
{$ z} - The zoom level for which you want to download a map fragment
{$ x} - The horizontal number of the map fragment
{$ y} - The number of the map fragment vertically

After substituting the values, the navigator will receive a link, which then downloads the file with the required map fragment. For example, this:

http://a.tile.openstreetmap.org /12/2478/1265.png

When the download is completed, the downloaded tile will be displayed on the smartphone screen.

Add your card

So, let's say you found on the Internet a card that interested you and that you would really like to connect to your smartphone. Let's try. First, using a browser on your computer, go to the site with a window for viewing this map. For example , this one .

Open the panel with the developer tools (Ctrl + Alt + I for Google Chrome)

In the panel that opens, go to the Sources tab.

We open all the folders in order until we find the folder with images of slices of the displayed map.

Right click on the file name. In the menu that opens, select Coly link address

For example, we came across such a link
http://anygis.herokuapp.com/Combo_Best_Genshtab/1242/639/11

You need to understand what exactly these numbers mean. We check from our reference card - OpenStreetMaps.

http://a.tile.openstreetmap.org/1242/639/11.png

Is not downloading. Let's try to swap the numbers.
http://a.tile.openstreetmap.org/11/1242/639.png

Loaded! Now compare the tile obtained by the first and second links:

We made sure that the tiles of both of these cards show the same place. And, most importantly, no offsets. So the map we found is made in a standard projection and it is suitable for connection.

Well, and now, knowing in what order the coordinates of OpenStreetMaps went - z, x, y - we can confidently say in which they go in our map.

http://anygis.herokuapp.com/Combo_Best_Genshtab/{$x}/{$y}/{$z}

Now zoom in and out on the map in the viewport. So we find out that the card is loaded only from the 0th and the 15th zoom.

Further, if the url began with a single letter or number, then we could substitute other values ​​there. But usually there is either a, b, c or 0,1,2,3 .

So, now we have figured out all the necessary parameters and can make a preset for our new map.

 <?xml version="1.0" encoding="UTF-8"?> <customMapSource> <name>.   </name> <minZoom>0</minZoom> <maxZoom>15</maxZoom> <url>http://anygis.herokuapp.com/Combo_Best_Genshtab/{$x}/{$y}/{$z}</url> </customMapSource> 

It remains to save the file under a new name and add it to your navigation application. For iOS - just drag and drop the file into the application folder (via iTunes). For Android - copy the file to the following directory:

Android\data\com.bodunov.GalileoPro\files\Imported

Now, when you open the navigator, what you have done appears in the map list. Congratulations!

As you can see, it was pretty simple. And best of all, the whole process is more or less similar for all of the above navigators. Fast, universal, cross-platform.

Of course, there are cards in non-standard projections. Or with non-standard numbering. In this article, I described how to solve this problem. Nevertheless, the vast majority of cards that are found on the Internet are connected easily and without additional troubles.

By the way, on my AnyGIS website you can download ready-made presets. They are automatically generated in the formats of all of the above navigators based on the database I collected. And periodically updated. So, if necessary, download and use.

Well, that's over with the introduction. In the next article I will tell you how to connect vector online maps.