Render 2500 geoJSON polygons onto a leaflet map

Question

I've been searching but cannot seem to find a solution.

I have a GeoJSON file which is 170mb in size. It contains about 2500 polygons. Somehow I need to render it to a leaflet map. Evidently at that size I have no chance.

What will the easiest way to render this data? Am I able to create a complete transparent png which can simply be rendered over the world map. The huge size is due to the complexity and the number of polygons. At this point I don't need it to be interactive.

Thanks, Brian

Answer 1

The easiest way is to create your own map tiles based on that data. There are a couple of ways of achieving this but my suggestion is that you use TileMill. It's free and very easy to use. So, basically you would:

• Use TileMill and specify your GeoJSON file as the data-source

• Configure how the map should be displayed (like the color of the polygons) with a special CSS-like language inside TileMill

• Generate the tiles

• Load a new TileLayer in your Leaflet map that references your files

I've actually written a tutorial some time ago that uses a .shp instead of a GeoJson, but should be similar enough:

http://build-failed.blogspot.pt/2012/03/custom-map-tiles-part-2-tilemill.html

Answer 2

I cannot argue with psousa's recommendation. For a straightforward presentation, TileMill is a great idea.

However, if you want to overlay your polygons onto another map, I reckon the only way is by using Mike Bostock's TopoJSON and D3.

The main TopoJSON page: https://github.com/mbostock/topojson/wiki

An example at the scale you are talking about: http://bl.ocks.org/mbostock/4206573

You'll have to shop around Mike's excellent examples on github to see how to combine leaflet with a D3 overlay.

I'm currently doing this successfully with hundreds of complex polygons. Haven't had the need to break into the thousands ... yet.

Answer 3

There is also geojson-vt, which apparently can to the tiling serverless on-the-fly - after a bit of loading time.