I've overlaid a huge GeoJSON geometry on top of my Leaflet map, covering about 20 countries' borderlines (about 1,5 million vertices) using "L.geoJson".
Each time I zoom in/out, the computer has to calculate the new amount of vertices before map interaction comes back. So the user has to wait 3-4 seconds after zooming until the map comes to resolution, before the user can zoom more or pan the map.
Looking at a previously asked question, I've simplified the geometries to reduce the number of vertices by 30% (now 1 million vertices), but that earned me just about -1 second of calculation time.
Instead of giving up on the GeoJSON geometry quality, is there a way to be able to pan/zoom the map while the vertices are not yet done calculating?
In other words, I want to be able to pan and zoom the map while the geometry is still blurry.
PS: Using TileMill is out of the question because I want interactivity for my GeoJSON data (eg. changing colors of countries later by js code), but TileMill will give me uneditable png.
Best Answer
Interrupting a rendering process is not possible in Leaflet since it is performed in a single atomic JS job (AFAIK). The only way to make your app more responsive to user interactions might be to boost the rendering process so that it completes faster. Simplifying the geometries (or using topojson) is an excellent first solution for that. Another one could be to "tile" your geojson layer so that only the features in the map extent are rendered. There is a plugin to rendered such geojson tiles. A step further would be to build simplified versions of your dataset for each zoom level as described in this document.