How to generate image tiles from custom geo data for use with Leaflet

Question

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)?

Answer 1

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

Answer 2

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.

Answer 3

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:

http://powerland.bplaced.net/osm-power.htm