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.

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:

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.

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.

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,
)

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
)

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
})

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.