The Geoman Blog

Edit Massive Geodata With Improved Performance πŸš€


Awesome projects deal with large amounts of data and users of Leaflet-Geoman and Leaflet-Geoman Pro ⭐ requested additional capabilities to edit such data with a smooth, snappy user experience without much distraction. That's why the latest release of Leaflet-Geoman and Leaflet-Geoman Pro ⭐ adds new, powerful options to the edit mode.

Let's use this massive polygon as an example. It's not only barely editable on this zoom level, it is also very laggy to deal with.

A polygon with over 6000 vertices. Let's make the user experience here super smooth for easy edits

Leaflet-Geoman

Let's take a look at the new features in the open-source library. First and foremost, the library includes some efficiency improvements so you will get performance improvements by simply updating to the new version. Additionally, the option limitMarkersToCount was added. Setting this option will limit the markers shown per layer in edit mode to the specified number. Here's how it works:

map.pm.setGlobalOptions({
  limitMarkersToCount: 20
)

We are testing this with a polygon with over 6000 vertices. Editing this polygon was slow and chunky due to the many DOM elements. Limiting those, will significantly improve the performance.

Here is the result:

Super smooth editing of a huge polygon

This option and the performance improvements are available in the latest release of Leaflet-Geoman. For Pro customers, there's more.

Leaflet-Geoman Pro ⭐

Pro users are able to leverage 4 additional options to get the most performance in their individual use cases.

  • limitMarkersCountGlobally
  • limitMarkersToViewport
  • limitMarkersToZoom
  • limitMarkersToClick

Let's get into them.

Limit Marker Count Across Layers

With limitMarkersCountGlobally, you can the same effect as above but the limitation takes all layers into account. That means

map.pm.setGlobalOptions({
  limitMarkersToCount: 5,
  limitMarkersCountGlobally: false
)

is the same as above and will limit the marker count to 20 per layer. While

map.pm.setGlobalOptions({
  limitMarkersToCount: 5,
  limitMarkersCountGlobally: true
)

will limit the total count on the map to 5. Useful if you have many big layers instead of one huge polygon.

Map wide limit of markers across layers
Limit Markers to the current viewport

This is an obvious one - in large datasets, there is no need to add vertex-markers to the map that aren't visible in the current viewport. You can achieve this by using limitMarkersToViewport.

map.pm.setGlobalOptions({
  limitMarkersToViewport: true
)

Visible markers will be updated when the user moves or zooms the map.

Only rendering markers in the current viewport greatly improves the speed
Limit Vertex-Markers to a specific zoom level

With thousands of markers on the map when zoomed out, there is no point in letting the user edit the layers when it's impossible to distinguish individual markers. In those cases, it makes sense to only show them under a specific zoom level with limitMarkersToZoom. And it makes the most sense together with limitMarkersToViewport. It works like this:

map.pm.setGlobalOptions({
  limitMarkersToZoom: true,
  limitMarkersToViewport: true,
)
Limiting Vertex-Marker visibility by zoom-level combined with a viewport limitΒ 
Don't show any markers, until the user clicks on a layer

Especially when using many, many layers it can make sense to show markers only when a user specifically clicks on a layer again. This can be done through limitMarkersToClick. Here's how to apply it and what it looks like:

map.pm.setGlobalOptions({
  limitMarkersToClick: true
)
Only show vertex-markers after an additional click on the layer

These were the 4 additional options for customers of Leaflet-Geoman Pro ⭐. But here comes...

πŸ† The Holy Grail πŸ†

Using all of the above options combined:

map.pm.setGlobalOptions({
  limitMarkersToCount: 20,
  limitMarkersCountGlobally: true,
  limitMarkersToViewport: true,
  limitMarkersToZoom: 5,
  limitMarkersToClick: true
})
Smooth, effortless editing with large data is here πŸ’ͺ

Frankly, you will have a hard time getting a laggy experience with these options applied. Get Leaflet-Geoman Pro ⭐ today and benefit from these massive improvements right away.


Leaflet-Geoman Pro is a drop-in replacement for Leaflet-Geoman, with more powerful features and prioritized support. As a Pro customer, your feature requests define my major roadmap for Leaflet-Geoman Pro.