0

I have FeatureLayer on top of MapImageLayer so both layers are intersecting each other on some points. I have to show popup on map click which will contains all features available on click point. It means popup will have multiple pages. Right now when I click on map I get only feature layer's value and popup also contains only feature layer's value. Please help me how can I achieve this?

1

You just need to assign a popup template to any sublayer you want to present information on their features. Take a look at this example I made for you,

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS API for JavaScript Hello World App</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">
  <script src="https://js.arcgis.com/4.15/"></script>

  <script>
    require([
      'esri/Map',
      'esri/views/MapView',
      'esri/layers/MapImageLayer'
    ], function(Map, MapView, MapImageLayer) {

      const renderer = {
        type: 'simple',
        symbol: {
          type: 'simple-fill',
          style: 'none',
          outline: {
            color: [0, 255, 0, 0.5],
            width: 0.75
          }
        }
      };

      const layer = new MapImageLayer({
        url:
          'https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer',
        sublayers: [
          {
            id: 0,
            visible: true,
            title: 'Cities',
            popupTemplate: {
              title: '{areaname} City',
              content: '{pop2000} people lived in this city in 2000'
            }
          },
          {
            id: 1,
            visible: true,
            title: 'Highways',
            popupTemplate: {
              title: '{route} Route',
              content: [
                {
                  type: 'fields',
                  fieldInfos: [
                    {
                      fieldName: 'type',
                      label: 'Type'
                    },
                    {
                      fieldName: 'length',
                      label: 'Length'
                    },
                    {
                      fieldName: 'admn_class',
                      label: 'Adm. Class'
                    },
                    {
                      fieldName: 'toll_rd',
                      label: 'Toll?'
                    }
                  ]
                }
              ]
            }
          },
          {
            id: 2,
            visible: true,
            title: 'States',
            popupTemplate: {
              title: '{state_name} State',
              content: '{pop2000} people lived in this state in 2000'
            }
          },
          {
            id: 3,
            visible: true,
            title: 'Counties',
            renderer,
            popupTemplate: {
              title: '{name} County',
              content: '{pop2000} people lived in this county in 2000'
            }
          }
        ]
      });

      const map = new Map({
        basemap: 'dark-gray-vector',
        layers: [layer]
      });

      const view = new MapView({
        container: 'viewDiv',
        map: map,
        zoom: 3,
        center: [-99, 39]
      });

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.