Display multiple coordinates on the map in Next JS

DeepanshuKumar — Tue, 19 Oct 2021 15:11:26 GMT

Here below is my next JS Code which is showing simple map.

Can anyone please let me know that how can I display pop up or Info window on the marker location?

import NavBar from '@/components/NavBar' import axios from 'axios'; import { useRef, useEffect } from 'react'; import { loadModules } from 'esri-loader'; export default function Home({...props}) { const MapElement = useRef(null) useEffect(() => { let view; loadModules([ "esri/views/MapView", "esri/WebMap", "esri/Graphic", "esri/geometry/Point" ],{ css: true }).then(([MapView, WebMap, Graphic, Point]) => { const webmap = new WebMap({ basemap: 'topo-vector' }) var view = new MapView({ map: webmap, center:[-6.357768833333333, 53.415487166666665], zoom:6, container: MapElement.current }) for(var i=0, i_length=props.data.length; i<i_length; i++){ var point_symbol = new Point({ longitude: props.data[i].longitude, latitude: props.data[i].latitude, spatialReference: { wkid: 3857 } }); var graphic_symbol = new Graphic({ geometry: point_symbol, symbol: { type: "simple-marker", style: "circle", color: "orange", size: "18px", outline: { color: [150, 200, 255], width: 5 } } }); view.graphics.add(graphic_symbol); } }) return () => { if(!!view) { view.destroy() view=null } } }) return ( <div id="home-container"> <NavBar /> <div className="app-wrapper" > <div className="app-content"> <div className="container no-padding"> <div className="row gy-4"> <div className="col-12 col-lg-8"> <div style={{height:850, width:1100}} ref={MapElement}> </div> </div> </div> </div> </div> </div> </div> ) } export async function getServerSideProps(context) { let response = await axios(process.env.BASE_URL + 'zutec/v1/liveview/all',{ headers : { 'Authorization' : 'Bearer ' + process.env.TOKEN } }) let data = await response.data return { props : { data: data } } }

In above code, API call is doing by getServerSideProps and data as array of objects is passing to the component using props.
I need to display information as below.

topic Display multiple coordinates on the map in Next JS in ArcGIS JavaScript Maps SDK Questions

Display multiple coordinates on the map in Next JS