Optimizing Marker Display for Large Map Datasets

Hello,

I’m currently using a Map component to display a large dataset of over 1500 markers, which I’ve generated using a Python script as a list of dictionaries.

My goal is to optimize the display so that all markers don’t appear simultaneously. Ideally, markers would become visible when the user zooms in sufficiently and disappear when the user zooms out.

The most apparent solution seems to be binding the “enable” property of each marker to a “zoom” property that tracks the user’s zoom level.

However, I’m facing a challenge: I need to apply this binding to all markers, and manually setting it for each one doesn’t seem efficient.

Here’s the binding I intend to apply to all markers:

{
  "type": "expr",
  "config": {
    "expression": "{this.custom.zoom} > 7"
  }
}

Any suggestions for a more efficient way to apply this binding to all markers would be greatly appreciated.

Thank you!

In the master list of items, include a constant for the zoom at which it should appear. No binding inside the list.

Then apply a filtering expression or script to convert that constant to a boolean for the enable property as zoom changes. Either regenerate the list of items as zoom changes, or use a change script on zoom that updates the items in place.

2 Likes

Thanks for answering !
For those wondering how the code looks like here is mine :

def runAction(self, event):
	zoom = self.getZoom()
	marker = self.props.layers.ui.marker
	
	for i in range(len(marker)):
		marker[i]['enabled'] = zoom>7

Applied to the onZoomEnd event