How to add clusters to graphics layer in esri map in react

597
0
11-25-2021 10:48 PM
VaniShrivastava
New Contributor

Hi,

I have used arcgis npm library. In the map view of my react code, I have added a graphics layer to show different places as points on the map. I want to show the number of points being clustered in the map when it is zoomed in/out. 

Here is my code: 

 

import React, { useEffect } from 'react'
import { loadModules, setDefaultOptions } from 'esri-loader'

import useMedia from '../../styles/use-media'

const MapView = ({ data, layout, map, view }: any) => {
    const { isMobile } = useMedia()

    useEffect(() => {
        if (layout === undefined) return

        if (isMobile) {
            view.padding = { bottom: view.size[1] * 0.2 }
            return
        }

        view.padding = { top: 30, bottom: 30 }
        if (layout) view.padding.left = view.size[0] * 0.35
        else view.padding.right = view.size[0] * 0.35
    }, [isMobile, layout, view])

    useEffect(() => {
        setDefaultOptions({ css: true })
        loadModules([
            'esri/layers/GraphicsLayer',
            'esri/Graphic',
            'esri/geometry/Point',
            'esri/PopupTemplate',
        ])
            .then(([GraphicsLayer, Graphic, Point, PopupTemplate]) => {
                const markerLayer = new GraphicsLayer()

                data.map((pt: any) => {
                    const point = new Point({
                        longitude: pt.longitude,
                        latitude: pt.latitude,
                    })

                    const markerSymbol = {
                        type: 'simple-marker',
                        color: '#253DD9',
                        outline: {
                            color: [255, 255, 255],
                            width: 2,
                        },
                    }

                    const pop = new PopupTemplate({
                        title: pt.projectName,
                        content: `<div style="min-height:15px;">Location: ${pt.location}`,
                    })

                    const graphic = new Graphic({
                        geometry: point,
                        symbol: markerSymbol,
                        popupTemplate: pop,
                    })

                    markerLayer.add(graphic)

                    return null
                })

                map.add(markerLayer)
                var zoomOutAction = {
                    title: 'Zoom out',
                    id: 'zoom-out',
                    className: 'esri-icon-zoom-out-magnifying-glass',
                }

                view.popup.actions.push(zoomOutAction)
                view.popup.on('trigger-action', function (event: any) {
                    if (event.action.id === 'zoom-out') {
                        view.goTo({
                            center: view.center,
                            zoom: view.zoom - 1,
                        })
                    }
                })
                view.goTo(markerLayer.graphics.toArray())
            })
            .catch((err) => console.error(err))
    }, [data, map, view])

    return null
}
export default React.memo(MapView)
0 Kudos
0 Replies