I like to explore the city via public transport and as I am a big map fan, I fell in love with the map of our Berlin based public transport service provider BVG. The map is a great product and has so many levels of information. It has a well know style established in Berlin so I wanted to use it in my own web mapping application.
As I scanned the website of the BVG I noticed the leaflet map on their page:
So I asked the question: "Where does the tiles came from". A short look in the network developer pane in firefox revealed the address https://fahrinfo.bvg.de/tiles/base/15/17605/22019.png (example)
The Tiles can be easily added inside a ArcGIS Javascript API based webmap:
<SPAN class="keyword token">var</SPAN> tiledLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">WebTileLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
urlTemplate<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Ffahrinfo.bvg.de%2Ftiles%2Fbase%2F" target="_blank">https://fahrinfo.bvg.de/tiles/base/</A><SPAN>{level}/{col}/{row}.png"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN>
title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"BVG Basemap"</SPAN><SPAN class="punctuation token">,</SPAN>
copyright<SPAN class="punctuation token">:</SPAN>
<SPAN class="string token"><SPAN>"Map Data by <a href='</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2FBvg.de" target="_blank">https://Bvg.de</A><SPAN>'>BVG</a>, "</SPAN></SPAN> <SPAN class="operator token">+</SPAN>
<SPAN class="string token"><SPAN>"Imagery by <a href='</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2FBvg.de%2F" target="_blank">https://Bvg.de/</A><SPAN>'>BVG</a>"</SPAN></SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>But as soon you embed this, you will notice: There are only 404s send back from the BVG server. So I examined the URL-schema and found out, that the Y id is somewhat different compared to mapbox or OSM Y ids for the same tile:
| y-tile: BVG | y-tile: Mapbox | zoomLevel |
| 22020 | 10747 | 15 |
| 22015 | 10752 | 15 |
| 22013 | 10754 | 15 |
| 11007 | 5376 | 14 |
| 44025 | 21510 | 16 |
| 44026 | 21509 | 16 |
So the tile indices are somehow shifted compared to the normal schema... So let us reverse engineer the conversion. First approach: plot the IDs on a chart and try some regression:
But as you can see: the line looks straight but the equation is just crap. Let's zoom in a bit:
This is of course a bit different: the regression line flipped and we do have no residuals. The summand looks very common as it is near a power of 2. to be exact: 2^15-1
So there is a direct equation to transform the original tile row into a BVG tile row:
<SPAN class="keyword token">var</SPAN> rownew <SPAN class="operator token">=</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="operator token">*</SPAN>row<SPAN class="operator token">+</SPAN>Math<SPAN class="punctuation token">.</SPAN><SPAN class="token function">pow</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">,</SPAN>level<SPAN class="punctuation token">)</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN></SPAN>
So now we need to import this logic into the method ArcGIS uses to get the tiles. And BAMM: here are the tiles:
<SPAN class="keyword token">var</SPAN> tiledLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">WebTileLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
urlTemplate<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Ffahrinfo.bvg.de%2Ftiles%2Fbase%2F" target="_blank">https://fahrinfo.bvg.de/tiles/base/</A><SPAN>{level}/{col}/{row}.png"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN>
title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"BVG Basemap"</SPAN><SPAN class="punctuation token">,</SPAN>
getTileUrl<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>level<SPAN class="punctuation token">,</SPAN> row<SPAN class="punctuation token">,</SPAN> col<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">var</SPAN> rownew <SPAN class="operator token">=</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="operator token">*</SPAN>row<SPAN class="operator token">+</SPAN>Math<SPAN class="punctuation token">.</SPAN><SPAN class="token function">pow</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">,</SPAN>level<SPAN class="punctuation token">)</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>urlTemplate<SPAN class="punctuation token">.</SPAN><SPAN class="token function">replace</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"{level}"</SPAN><SPAN class="punctuation token">,</SPAN> level<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">replace</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"{col}"</SPAN><SPAN class="punctuation token">,</SPAN> col<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">replace</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"{row}"</SPAN><SPAN class="punctuation token">,</SPAN> rownew<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
copyright<SPAN class="punctuation token">:</SPAN>
<SPAN class="string token"><SPAN>"Map Data by <a href='</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2FBvg.de" target="_blank">https://Bvg.de</A><SPAN>'>BVG</a>, "</SPAN></SPAN> <SPAN class="operator token">+</SPAN>
<SPAN class="string token"><SPAN>"Imagery by <a href='</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2FBvg.de%2F" target="_blank">https://Bvg.de/</A><SPAN>'>BVG</a>"</SPAN></SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Explore the webmap on CodePen, or download it below.
And last but not least: You can even rotate it:
In the end: If you know the math, you can change the world 😉
