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

VaniShrivastava — Fri, 26 Nov 2021 06:55:53 GMT

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)

topic How to add clusters to graphics layer in esri map in react in ArcGIS JavaScript Maps SDK Questions

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