How to: Reveal additional markers as user zooms in

[chandu]

I am using react-simple-maps show US map (along with Puerto Rico) to display some data points on the map. I was able to display the data at state level. Now we need to add ability show data points at city level (close to 26000 markers). So showing all the markers at zoom level 1 might not be a good UX. So what I was thinking is initially we display only few markers and as the user starts zooming in, get data points based on the following the current center and a known radius and display them (ref: https://gis.stackexchange.com/questions/258515/show-hide-markers-depending-on-zoom-level). But am unable to follow through this approach.

Is there any guidance or example of this use case:

• Show some primary markers on zoom level 1
• As user zooms in calculate the data points based on some pre-defined radius, current center of the map and zoom level and add them to the map.

Thanks

[scho3034]

Any updates on this? @Chandu were you able to achieve it? I am looking to do something similar

[Socvest]

I found a way to kinda do this based on the example in @Chandu 's example link.

const [zoomLevelShow, setZoomLevelShow] = useState(0)

<ComposableMap>
 <ZoomableGroup
      onMove={(item: any) => {
            // console.log(item);
     setZoomLevelShow(item.zoom);
          }}
        >
     <Geographies>
          ...
        <Marker key={name} coordinates={coordinates}>
            {zoomLevelShow > 3 && (
                    <g>
                    <circle cx="12" cy="10" r="3" />
                  </g>)
       </Marker>
   </Geographies>
</ZoomableGroup>
</ComposableMap>

The link that shows getting values from ZoomableGroup to build your other ideas.