A Story of Maps and Tiles
Recently, in a project for a client, I had to work on an overlay for the map to show how polluted the air can be around the user. For that we use a service call the Heatmap by BreezoMeter. Happily, BreezoMeter changed the way you use this service to optimized it, and that’s what I learned:
The old way
Before this major change, the service sent you a fancy list of all the countries the service was activate for, with the North-West and South-East coordinates and the different overlays’ url the country could have (for exemple France had 4 different overlays). Each overlay had its North-West and South-East coordinates too.
You should normally see how the all thing worked: You had to know your user’s map coordinates, to loop over all the countries and know if you had to display the different overlays on your map, each overlay had to be previously loaded from its own URL. As you can see, this was not a very optimized method and it was painful to implement for the end-dev like me.
The Mercator Projection
Fortunately, BreezoMeter decided to change its HeatMap API and to support the tile map services with the Mercator Projection used by all the map services around the word (OpenStreetMap, Google Maps, MapKit, etc.).
The Web Mercator, is a variant of the Mercator Projection that permits to project the surface of a sphere on a very plan (and that’s very useful to make map of our Earth!). The projection cuts up the map in equals squares, each one has coordinates (x, y) such that the upper left corner is (0, 0) and the lower right corner is (256, 256) (whitout zoom).
Each tile measures 256 pixels and it coordinates can be calculated with fancy formulas depending on longitude, latitude and zoom (you can find them here)
“That quite fun and instructive” you might be thinking, “but what is the point to change your API if it is to continue to make fancy calculs?”. And you are right! But you missing one point: that’s the way all the maps services are working! Thereby, all the intelligence of the Mercator Projection is currently apply in the different frameworks and it is easy to add our own tiles to a map!
Furthermore, the end user of your map is used to see tile chargements when he use maps feature, so this solution will not change its use.
The mobile implementation
Let’s talking about some code now! You will see how easy in the mobile world it can be to had your own tile overlays.
Android and Kotlin
Starting with Android and Kotlin, the easiest way to do: the UrlTileProvider.
We provide a 256x256 pixel tile through the URL “https://tiles.breezometer.com/z/x/y.png?key=API_KEY”. You can provide an other URL (this is just an exemple of BreezoMeter implementation), all you need is put the zoom, x and y in your current URL.
To use it, in your activity or your fragment, on the onMapReady(googleMap: GoogleMap) function, add the following lines:
And that’s it for Android! You can use your MyTileProvider any time you need it and it works like a charm!
iOS and Swift
In Swift you need for each ViewController create an overlay with your url template then subscribe to your MKMapViewDelegate and set the correct MKOverlayRenderer for your tile overlay:
As in the Android part I used the BreezoMeter URL, free to you to use another. Concerning the renderer, if my overlay is not a Tile Overlay I return a classical overlay as MKPolylineRenderer. I set the overlay .aboveRoads (the other option in .aboveLabels) and set an alpha of 0.65 to the renderer (it is corresponding to the 35% of transparency in the Android part)
Conclusion
When it comes to add overlays on a map from a server, using tiles overlay with the Mercator Projection is (IMO) the best way to do it. It is optimized, easy to implement on the front end and it is the way the big map providers promote it. The all intelligence is then transfert to the server side which has to handle the Mercator Projection calculs.
Thanks to this solution, you can easily in your app add dynamics overlays to your map or even customize your maps thanks to some open source project as OpenMapTiles to name but one.
All images are property of BreezoMeter, all rights reserved.
