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

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

• javascript
• dictionary
• openstreetmap
• leaflet

4 Answers 4

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

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

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.

Just another humble suggestion. I had successfully done loading 10000+ polygons and querying attributes by rolling out my own Geoserver and PostgreSQL DB + PostGIS instance and producing a WMS (not WFS), as you can see in the image.

But it is not straightforward to implement, especially if the geojson data is the original (and only) data

In that regard I would second psousa's answer to use TileMill.