Migrating a webapp from Google Maps API V3 to OSM + Leaflet, which displays custom data that consists of lots of lines and points, on a background map.

When this custom data is drawn by Leaflet on the fly from geoJson files, the map tends to become less responsive on slow machines (zoom and pan take forever).

The custom data is pretty static (it doesn't change often), so it would make sense to pre-render it as transparent image tiles that would be displayed on top of the map. This is how KML files are rendered on Google Maps and it works very well.

So the question is this: how to generate transparent tiles from geoJson files and reference them in Leaflet (instead of displaying geoJson data on the fly)?

  • 1
    If you are a begginer, I'll suggest that you use tilemill for this. Feb 8, 2014 at 4:09
  • Have you considered adding it to OSM?
    – BradHards
    Feb 8, 2014 at 6:37
  • @DevdattaTengshe TileMill is a way to do it but it seems way overkill for what I want to do; I was hoping there was a service where I could send geoJson+styles and receive a bunch of transparent tiles in return. Maybe I can hack Google Maps API to capture the tiles generated from KLM...?
    – Bambax
    Feb 8, 2014 at 9:48
  • @BradHards Some of that data is already in OSM, some isn't; but what I want to do is the ability to switch it on or off in my app, so a transparent tile layer would be much useful, whereas if the data is part of the map we need to change maps to switch data on or off.
    – Bambax
    Feb 8, 2014 at 9:50
  • Or maybe Leaflet could do it; it's already drawing everything on the screen; there may be a way to export that to .png from within the browser...?
    – Bambax
    Feb 8, 2014 at 11:44

3 Answers 3


Your problem is a less responsive browser when displaying the very large set of vector data, which presumably is the result of trying to render each/every node of your data set. This is exactly the issue WMS and TMS are used to solve - however, since you are looking for an alternative solution, try Google encoding your polylines which simplifies the geometry at lower zoom levels.

Then you'll need to use this javascript function to display them in leaflet.js: leaflet-geojson-gpolydecode.js


This tool is an option if you use ArcGIS. You can style a map any way you please (including with transparent background* and zoom levels/logic) then export that map to any assortment of tiles. http://www.arcgis.com/home/item.html?id=f7bc5db184034f5f9938112dcaa88e69

*note that you should set the export settings to "PNG with Transparency" for this type of export. note

  • 1
    Thanks for this; it's exactly what I would need except that I don't use ArcGIS (and won't for the foreseeable future...) I ended up using TileMill which does a fairly good job of this, except that I would have thought there would be a simpler option...
    – Bambax
    Mar 6, 2014 at 9:19

I am feeding my vector data into a OSM-like postgis database, and use Mapnik to render tiles from that (only the vector data, not together with other data).

The mapnik style allows to create a transparent background:

Map bgcolor="#ffffff" 

For displaying, I use openlayers, but leaflet should do as well:


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.