nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Popup does not work after elevation widget

Vakhtang_Zubiashvili

Hello again,

I have issue: I have mapView and I use elevation profile widget on it, it works perfect, shows elevation data as shoudl, but after it I can't use Popup, I click on map, but nothing happens. What might be cause?

thanks,

Encuentra más publicaciones etiquetadas con

Accepted answers

kenbuja

I'm wondering if this is a bug. I get the same results when adding the widget to the PopupTemplate sample.

<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Intro to PopupTemplate | Sample | ArcGIS API for JavaScript 4.19</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

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

  <script>
    require([
      "esri/Map",
      "esri/layers/FeatureLayer",
      "esri/views/MapView",
      "esri/widgets/Legend",
      "esri/widgets/ElevationProfile"
    ], (Map, FeatureLayer, MapView, Legend, ElevationProfile) => {
      // Create the map
      const map = new Map({
        basemap: "gray-vector",
        ground: 'world-elevation'
      });

      // Create the MapView
      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-73.95, 40.702],
        zoom: 10
      });

      view.ui.add(new Legend({ view: view }), "bottom-left");

      /*************************************************************
       * The PopupTemplate content is the text that appears inside the
       * popup. {fieldName} can be used to reference the value of an
       * attribute of the selected feature. HTML elements can be used
       * to provide structure and styles within the content. The
       * fieldInfos property is an array of objects (each object representing
       * a field) that is use to format number fields and customize field
       * aliases in the popup and legend.
       **************************************************************/

      const template = {
        // autocasts as new PopupTemplate()
        title: "{NAME} in {COUNTY}",
        content: [
          {
            // It is also possible to set the fieldInfos outside of the content
            // directly in the popupTemplate. If no fieldInfos is specifically set
            // in the content, it defaults to whatever may be set within the popupTemplate.
            type: "fields",
            fieldInfos: [
              {
                fieldName: "B12001_calc_pctMarriedE",
                label: "Married %"
              },
              {
                fieldName: "B12001_calc_numMarriedE",
                label: "People Married",
                format: {
                  digitSeparator: true,
                  places: 0
                }
              },
              {
                fieldName: "B12001_calc_numNeverE",
                label: "People that Never Married",
                format: {
                  digitSeparator: true,
                  places: 0
                }
              },
              {
                fieldName: "B12001_calc_numDivorcedE",
                label: "People Divorced",
                format: {
                  digitSeparator: true,
                  places: 0
                }
              }
            ]
          }
        ]
      };

      // Reference the popupTemplate instance in the
      // popupTemplate property of FeatureLayer
      const featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/ACS_Marital_Status_Boundaries/FeatureServer/2",
        popupTemplate: template
      });
      map.add(featureLayer);

      const elevationProfile = new ElevationProfile({
        view: view,
        profiles: [
          {
            type: "ground" // first profile line samples the ground elevation
          },
          {
            type: "view" // second profile samples the view and shows building profiles
          }
        ],
        // hide the select button
        // this button can be displayed when there are polylines in the
        // scene to select and display the elevation profile for
        visibleElements: {
          //selectButton: false
        }
      });

      // add the widget to the view
      view.ui.add(elevationProfile, "top-right");
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>
</html>

All comments

kenbuja

Yes, open a case with Esri to verify that it is a bug.

Vakhtang_Zubiashvili

Yes, i think same ,

So what we do know? Let ESRI knw that it is a bug?

kenbuja

I'm wondering if this is a bug. I get the same results when adding the widget to the PopupTemplate sample.

<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Intro to PopupTemplate | Sample | ArcGIS API for JavaScript 4.19</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

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

  <script>
    require([
      "esri/Map",
      "esri/layers/FeatureLayer",
      "esri/views/MapView",
      "esri/widgets/Legend",
      "esri/widgets/ElevationProfile"
    ], (Map, FeatureLayer, MapView, Legend, ElevationProfile) => {
      // Create the map
      const map = new Map({
        basemap: "gray-vector",
        ground: 'world-elevation'
      });

      // Create the MapView
      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-73.95, 40.702],
        zoom: 10
      });

      view.ui.add(new Legend({ view: view }), "bottom-left");

      /*************************************************************
       * The PopupTemplate content is the text that appears inside the
       * popup. {fieldName} can be used to reference the value of an
       * attribute of the selected feature. HTML elements can be used
       * to provide structure and styles within the content. The
       * fieldInfos property is an array of objects (each object representing
       * a field) that is use to format number fields and customize field
       * aliases in the popup and legend.
       **************************************************************/

      const template = {
        // autocasts as new PopupTemplate()
        title: "{NAME} in {COUNTY}",
        content: [
          {
            // It is also possible to set the fieldInfos outside of the content
            // directly in the popupTemplate. If no fieldInfos is specifically set
            // in the content, it defaults to whatever may be set within the popupTemplate.
            type: "fields",
            fieldInfos: [
              {
                fieldName: "B12001_calc_pctMarriedE",
                label: "Married %"
              },
              {
                fieldName: "B12001_calc_numMarriedE",
                label: "People Married",
                format: {
                  digitSeparator: true,
                  places: 0
                }
              },
              {
                fieldName: "B12001_calc_numNeverE",
                label: "People that Never Married",
                format: {
                  digitSeparator: true,
                  places: 0
                }
              },
              {
                fieldName: "B12001_calc_numDivorcedE",
                label: "People Divorced",
                format: {
                  digitSeparator: true,
                  places: 0
                }
              }
            ]
          }
        ]
      };

      // Reference the popupTemplate instance in the
      // popupTemplate property of FeatureLayer
      const featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/ACS_Marital_Status_Boundaries/FeatureServer/2",
        popupTemplate: template
      });
      map.add(featureLayer);

      const elevationProfile = new ElevationProfile({
        view: view,
        profiles: [
          {
            type: "ground" // first profile line samples the ground elevation
          },
          {
            type: "view" // second profile samples the view and shows building profiles
          }
        ],
        // hide the select button
        // this button can be displayed when there are polylines in the
        // scene to select and display the elevation profile for
        visibleElements: {
          //selectButton: false
        }
      });

      // add the widget to the view
      view.ui.add(elevationProfile, "top-right");
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>
</html>

Vakhtang_Zubiashvili

Hi Ken,

Sorry for this , i did not notice...

Here is code only with basic widgets and Elevation Profile Widget, also one FL with popupTemplate and Custom Symbol...

I noticed that, before making Elevation profile, popup works, but after i make Profile by clicking on map and it creates graphic line on map (like elevation path), after this i can not call popup 😕

Here is a working file,

Thanks

index_for_ken.zip

kenbuja

Wow....4300 lines of code is way too much for me to wade through. Can you distill this down to a short example that replicates your problem?

Vakhtang_Zubiashvili

Hi Ken,

I update working file here, you can simply check, I see errors only from imported libraries (it no problem, u can ignore and type error, this u can ignore too, it is old errors 😄 ). I really do not understand what is problem, i out widget at top and at the end too of the code, but get same result 😞

index.zip

kenbuja

Are you seeing any error messages in your console? Can you either post your code or put together a code sample that reproduces the error?

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.