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:
- Serve the geojson file gzipped, unpack on the client.
- Parse the shapefile on the client to geojson
- 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!
Best Answer
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:
A 99% application reduces it to a 441 kb file with no overlaps and loss of detail that is invisible at this zoom level:
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):