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)