Community
Select to view content in your preferred language

dynamic values in popup from mapimagelayer

717
4
09-20-2022 02:38 PM
BradSkopyk
by
Occasional Contributor
‎09-20-2022 02:38 PM

I have a dynamically aggregated query layer that I created as a map image service in my portal and which is currently being visualized with a timeslider in a webmap: The html is here. The values being rendered in the choropleth map are dynamic and, therefore, respond to the timeslider. When I try to fetch those dynamic values and show them in the popup, however, the values are rendered statically, never responding to the filter applied by the timeslider.

Is there a way to change my code to produce a popup that shows dynamic values?

Thank you for your help.

Brad

 

0 Kudos
4 Replies
TanuHoque
by Esri Regular Contributor
Esri Regular Contributor
‎09-23-2022 01:05 PM

first: adding a reference back to my comment in the previous thread for future reference.
https://community.esri.com/t5/arcgis-api-for-javascript-questions/dynamic-aggregation-layer-and-time...

 

Second,

@BradSkopyk can you pls try this with AGOL or your enterprise Map Viewer and see if the popup respects time slider time values? One way you can confirm this is by looking at the output requests to your map service in the browser's Developers Tools's Network tab. You should see a parameter named time and the value(s) for that parameter must not be nulls. 

if that works fine, then we can figure out how to code that part in js api.

 

0 Kudos
BradSkopyk
by
Occasional Contributor
‎09-23-2022 01:14 PM

Yes, the values in the popups in my webmap are dynamic.  Values for 'row_count' change as the timeslider is adjusted. It's exactly the function that I want in my ArcGIS API for Javascript version. 

0 Kudos
TanuHoque
by Esri Regular Contributor
Esri Regular Contributor
‎09-23-2022 03:26 PM

I guess that means we are missing something in the coce.

Please note, in my sample, I didn't include the timeslider code. Just want to make sure when you tried, did you have timeslider code etc. in your app too? can you share your sample code? 

0 Kudos
BradSkopyk
by
Occasional Contributor
‎09-24-2022 05:39 AM
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>ecocrisis events - dynamically aggregated</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.24/"></script>

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

    #timeSlider {
      position: absolute;
      left: 5%;
      right: 5%;
      bottom: 20px;
    }
  </style>
  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/MapImageLayer",
      "esri/widgets/TimeSlider",
      "esri/PopupTemplate"
    ], (Map, MapView, MapImageLayer, TimeSlider, PopupTemplate) => {

      const layer = new MapImageLayer({
        sublayers: [{
          id: 2,
          popupTemplate: {
            // 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: "cvegeo",
                    label: "cvegeo"
                  },
                  {
                    fieldName: "cve_ent",
                    label: "cve_ent"
                  },
                  {
                    fieldName: "cve_mun",
                    label: "cve_mun"
                  },
                  {
                    fieldName: "nomgeo",
                    label: "nomgeo"
                  },
                  {
                    fieldName: "row_count",
                    label: "row_count",
                    format: {
                      digitSeparator: true,
                      places: 0
                    }
                  }
                ]
              }
            ]
          }
        }]
      });

      layer.load().then(() => {

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

        const view = new MapView({
          container: "viewDiv",
          map: map,
          extent: layer.fullExtent
        });

        const timeSlider = new TimeSlider({
          container: "timeSlider",
          view: view,
          loop: true,
          mode: 'time-window',
          fullTimeExtent: layer.timeInfo.fullTimeExtent.expandTo("years"),
          stops: { interval: { value: 10, unit: 'years' } }
        });

      });
    });
  </script>
</head>

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

</html>
0 Kudos