Combine Open street tiles with your own

May 12, 2013

During development of mobile app for music festivals, we had to display custom festival map overlaid over Open street map.

We used MapTiler to get Google-maps-like tiles, place them on our server and request them instead of the OSM tiles whenever map was in the festival area. However, we had to come up with solution what to display on edges of the festival map, where both custom tiles and Open street map tiles were needed. Due to nature of the tiling engine we were using, we couldn’t display two images overlaid over each other so we needed somehow to combine OSM tiles and our own into one image.

Merging tiles

I wrote simple python script, which:

  1. downloads OSM tiles from server
  2. lookup custom tile in the corresponding folder ( the folder structure is based on tiles hierarchy as specified in the Tile Map Service – the same as Google maps are using )
  3. paste the custom tile image, which is transparent png
  4. save resulting image into new folder

The script is available on github, together with sample tiles.

Leave a Reply