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