How to edit large GeoJSON in leaflet
Professional projects relying on geospatial data can’t get passed leaflet — the leading open-source JavaScript library for mobile friendly maps. Leaflet makes it easy and smooth to display your data on the web.
For creating and editing your data, the open-source geometry editing plugin Leaflet-Geoman is already the most powerful way to draw, edit, cut, drag and manage your geospatial data in leaflet and it now offers multiple ways to handle massive data like polygons with thousands of individual coordinates.
Big GeoJSON data means for most leaflet projects: lot’s of DOM nodes (HTML elements) causing a big performance hit for users. Fortunately, Leaflet-Geoman can now limit the visible markers to a specific count around the cursor, making editing buttery smooth and improving performance by over 3000% 🚀.
Simply set the option to experience the following result
map.pm.setGlobalOptions({
limitMarkersToCount: 20
)
But that’s not all. Professional applications which require drawing and editing of data should take a look at Leaflet-Geoman Pro — which includes powerful additions to fine tune your user experience with the best performance in mind. Four additional options are available:
- limitMarkersCountGlobally
- limitMarkersToViewport
- limitMarkersToZoom
- limitMarkersToClick
All of these options limit how and when markers are shown to the user and can be combined in any order to make performance with large geodata a non-issue. A deep dive into all these option can be found here.
When limiting markers by count, by the viewport, a specific zoom level *and* only showing them after a click, editing large geospatial data becomes effortless resulting in a smooth user experience with powerful tools at hand for your users.
Check out Leaflet-Geoman and Leaflet-Geoman Pro yourself to see it in action.
