I am using leaflet.js to allow web users to select a region. Valid regions are US states, Canadian providences, and world countries (except for US and Canada). I constructed a shapefile myself using Qgis and saved it as a geojson. I simplified the geometries as much as I could.

The resulting shapefile is 400kb, but the geojson is over a megabyte. This is bigger than I would like. I need to reduce the network overhead involved in transferring this information.

What is the right way to do this? The options I can imagine are:

  1. Serve the geojson file gzipped, unpack on the client.
  2. Parse the shapefile on the client to geojson
  3. Generate my own tiles from the shapefile and serve those

If anyone could tell me which option is the best (or none of the above) I would appreciate it!

  • I note that you said you tried to simplify the geometry, but have you tried using a GIS simplification algorithm and checking the results? It might also help to look at which part of the JSON is taking up the most space. – BradHards Jan 14 '13 at 5:58
  • 1
    Make sure the GeoJSON is not pretty-printed, stripping out all unnecessary white space will help make the file smaller - not necessarily by a huge amount but it all helps! – CHenderson Sep 5 '13 at 21:23

Mapshaper.org is a handy free online tool that allows you to upload a geojson file, display it as a map, then choose one of three simplification alogrithims which you can adjust the strength of with a slider.

It updates the map and highlights in red any places where there's a loss of integrity like an overlap between two regions. There's a 'fix' button that usually (but not always) fixes such problems.

You can find a level of simplification that is acceptable and export the newly simplified geojson file.

Obviously this depends on what level of detail you need, but the results can be impressive. For example, here's map of Scotland from a 40mb geojson file:

enter image description here

A 99% application reduces it to a 441 kb file with no overlaps and loss of detail that is invisible at this zoom level:

enter image description here

A 99.95% application (down to 29kb) shows what sort of path simplification is being applied (and still manages to avoid overlaps, and is perfectly suitable for uses like national-level chloropleth):

enter image description here

  • I use this tool all the time. It is excellent! – Mike Furlender Oct 4 '16 at 14:50
  • 1
    You are a lifesaver!! – Khizar Apr 29 '19 at 10:12

Before going down any more laborious paths, the simplest option is to reduce the geometry. What are your source datasets? How did you simplify them? How much did this reduce the geojson file size?

If you are confident that you have done all you can on the above, then the lowest hanging fruit of your options is

  1. Serve the geojson file gzipped, unpack on the client.

All modern browsers do the unpacking of gzipped data automatically, so it's just a case of setting up your web server to pack up the data before sending. This is normally a relatively straight forward, with much material around out there for Apache, IIS or Nginx

My tip would be to try this first, test, then if latency / response / data size is not acceptable, then move to other options. I would also be wary of trying to optimise prematurely, I would be looking to determine why you need to reduce the data size, and once you have hard reasons (and numbers) for doing so, then iteratively implementing changes and re testing to see what gains you are getting.


I wonder if you could make use of the compression found in this answer that talks about compressing the GeoJSON with topojson.

I don't know if Leaflet will still be able to read the GeoJSON - something to try =)

More about topojson: https://github.com/mbostock/topojson/

  • Leaflet.GeoJSON doesn't parse arc data, so this approach won't work – smcphill Feb 7 '13 at 0:28
  • Leaflet can't natively but you can use topojson on the client side to do it, example of topojson on leaflet, though that example happens to use d3 to render it. – Calvin Feb 16 '13 at 19:28
  • 1
    I had a 27mb geoJson file. Went to mapshaper.org and after simplify (1.0%) and topojson export it became 122kb. After that added topoJson Leaflet code from github.com/shramov/leaflet-plugins/blob/master/layer/vector/… to my app and did the following: new L.TOPOJSON("myExported.topojson").toGeoJson(). – StackUnder Aug 22 '18 at 13:34

I agree with @Kelso above on simplifying your geometry.

If you don't have access to your server to deflate the data with gzip easily you could take a look at the MessagePack library to serialise your geoJSON into binary data (I believe it's an implementation of the BSON spec that's used by things like MongoDB to store data, but I could be wrong). There are libraries in Python and javascript (among others) that you can use to serialise/deserialise the data.


I would suggest just creating your own procedural array of Leaflet Polygon objects. I agree with GeoJSON being way too big. The object key names are very descriptive but maybe unnecessarily long as well. I do this kind of thing:

objects = [];
objects.push( new L.polygon([[1,1],[1,2],[3,4]],options );
objects.push( new L.polygon([[4,7],[8,27],[35,66]],options );
objects.push( new L.polygon([[3,5],[56,24],[13,49]],options );
objects.push( new L.polygon([[13,7],[7,68],[23,9]],options );
layerGroup = L.layerGroup(objects).addTo(map);

It's straightforward. It's much more lightweight than GeoJSON like this:

{ "type": "FeatureCollection",
  "features": [
    { "type": "Feature",
      "geometry": {"type": "Polygon",
      "coordinates": [1,1],[1,2],[3,4]},


And Repeat for every single polygon... ugh... way too bloated imo. Adds a lot of bytes to your JS. Like I said, the key names are nice and descriptive... but they are long and add a lot of unnecessary byes to your JS.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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