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

baohuachu7

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

The context is as the screenshot attached.

 

nafizpervez

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

1. 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.
2. 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.