7

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.

Improve this question
5
  • 1
    Have you tried converting your data to topojson? By eliminating redundant, duplicated nodes, you may find the file sizes reduce significantly and load time decreases as well.
    – RyanKDalton
    Commented Jul 12, 2014 at 5:55
  • The file is already in topojson format, but I had to convert it to GeoJSON in the client's browser, because Leaflet doesn't support native topojson yet. Eventually the client browser is rendering GeoJSON.
    – Doruk Karınca
    Commented Jul 12, 2014 at 20:35
  • You can use this library to add TopoJSON support to Leaflet; it interprets TopoJSON as GeoJSON (with topojson.feature or topojson.mesh). This may or may not help improve performance, depending on whether the slow-down is memory-related or merely a matter of rendering time.
    – Arthur
    Commented Jul 14, 2014 at 15:13
  • I'm already using that library, and the memory allocated to the Chrome tab with the app open is 332 MB. Still I think the slowdown is caused by the rendering because it freezes only when zoomed in/out. Other than that the app works ultra smoothly.
    – Doruk Karınca
    Commented Jul 15, 2014 at 7:45
  • 1
    I think TopoJSON will only save stored/transferred file size. Once it's loaded it'll be the same as GeoJSON.
    – Alex Leith
    Commented Aug 18, 2014 at 2:55

2 Answers 2

Reset to default
2

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.

Improve this answer
3
  • The plugin will be useful if I can figure out how to convert a GeoJSON file into GeoJSON tile layers. I found TileStache but it works as a tile server itself. Instead I could use a command-line tool to put tiles into a folder in my computer, do you know any?
    – Doruk Karınca
    Commented Aug 13, 2014 at 14:26
  • To build a geojson tiles pyramid, I use that: sourceforge.net/p/opencarto/code/HEAD/tree/trunk/server/src/…
    – julien
    Commented Aug 13, 2014 at 14:41
  • It seems to be a very nice library you built there, but unfortunately I don't know the Java to operate all that without an UI or tutorial. Thank you for your response anyway.
    – Doruk Karınca
    Commented Aug 16, 2014 at 21:39
1

I think you are approaching the problem the wrong way.

You can't load a gigantic dataset and expect fast interactivity. If you've already simplified as much as you want, and it's not fast enough. Try a different technology.

If you're not happy with TileJSON, use CartoDB or MapBox to to it for you, or use WMS for viewing and WFS for interactivity. Or load your data on ArcGIS online for easy point and click.

Improve this answer
2
  • I think this is a good point. Older web-map software like ArcIMS often had a Refresh button, to allow the user to make multiple changes in one batch, before all changes were applied. This approach may also work here - pan/zoom the map until the extent is correct, and only draw the GeoJSON then
    – Stephen Lead
    Commented Aug 18, 2014 at 5:49
  • +1 for WMS. I would try to show the data using WMS and change the symbology, by sending different SLDs to the WMS service. You won't get an instantaneous change in symbology, but it will be better than what is happening right now.
    – Devdatta Tengshe
    Commented Aug 18, 2014 at 9:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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