how to add multiple popups on map in JS sdk v4.x

baohuachu7 — Wed, 25 Dec 2024 08:48:05 GMT

I has searched in the community, many guys have this requirements but no answer.

The context is as the screenshot attached.

Re: how to add multiple popups on map in JS sdk v4.x

nafizpervez — Mon, 24 Feb 2025 11:39:24 GMT

Typically, you can manage multiple pop-ups by manually setting their content and ensuring they open at different locations.

Add Multiple Graphic Overlays
You need to create Graphic objects, each with its own location and content, and add them to the map. You can then associate each graphic with a pop-up.
Create a Graphic with Popup Information
You can create a Graphic object for each point on the map, with a custom pop-up configuration that will display relevant information when clicked.

require([ "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/PopupTemplate", "esri/layers/GraphicsLayer" ], function (Map, MapView, Graphic, PopupTemplate, GraphicsLayer) { // Create the map const map = new Map({ basemap: "streets-navigation-vector" }); // Create the MapView const view = new MapView({ container: "viewDiv", map: map }); // Create a GraphicsLayer to hold the graphics (popups) const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); // Define a simple popup template for each graphic const popupTemplate = new PopupTemplate({ title: "{name}", content: "<b>Value:</b> {value}" }); // Sample data (could come from a database or API) const data = [ { id: 1, name: "108", value: "36.5", coordinates: [-118.15, 33.76] }, { id: 2, name: "106.1", value: "33.7", coordinates: [-118.17, 33.77] }, { id: 3, name: "108.2", value: "35.9", coordinates: [-118.16, 33.75] } ]; // Loop through data and create graphics data.forEach((point) => { const pointGraphic = new Graphic({ geometry: { type: "point", // Create point geometry longitude: point.coordinates[0], latitude: point.coordinates[1] }, symbol: { type: "simple-marker", color: "blue", size: "8px" }, attributes: { name: point.name, value: point.value }, popupTemplate: popupTemplate // Apply the popup template }); // Add the graphic to the graphics layer graphicsLayer.add(pointGraphic); }); // Optional: Set view to zoom in to a specific area if needed view.goTo({ center: [-118.16, 33.75], zoom: 14 }); });

Customizing Popup Templates
You can further customize the PopupTemplate to include more complex content, such as HTML, images, or dynamic content fetched from a database.

Re: how to add multiple popups on map in JS sdk v4.x

baohuachu7 — Mon, 24 Feb 2025 12:25:14 GMT

Hi nafizpervez:

As the code above,the popup only open when it is clicked. Any method to open all the popups of graphics?

topic Re: how to add multiple popups on map in JS sdk v4.x in ArcGIS JavaScript Maps SDK Questions

how to add multiple popups on map in JS sdk v4.x

Re: how to add multiple popups on map in JS sdk v4.x

Re: how to add multiple popups on map in JS sdk v4.x