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.
