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 widget for ArcGISDynamicMapServiceLayer??

DerekLoi

i just came across the popup widget and noticed that the sample is for a FeatureLayer.
can the popup widget be applied to an ArcGISDynamicMapServiceLayer as well? if so,
are there any examples floating around?

Find more posts tagged with

Accepted answers

All comments

NickO_Day

I too would like to know if this is possible. I'd like to modify the timeslider sample to include popups, but the popups seem to only be configurable on a FeatureLayer and time can only be configured on a DyanmicMapServiceLayer. Does anyone have a solution to this?

AnnaArzrumtsyan

Have you found a solution for this? I am also trying to work with time + popup... What is the best way to go?

OzanEmem

as ArcGISDynamicMapServiceLayer serves images not features like featurelayer, you cannot interact with objects on the map. So you need to send your query manually to your service after click or similar event. when you get your results then you can show popup manually and populate it with your result features, attributes etc.

check this example

http://help.arcgis.com/en/webapi/javascript/arcgis/demos/find/find_popup.html

Hope this helps

derekswingley1

Here's an example of using a popup with a dynamic map service:


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/css/Popup.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{ margin: 0; padding: 0; }
    </style>
    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.tasks.query");
      dojo.require("esri.dijit.Popup");
      
      var map;
      function init() {
        var dynSvc = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer",{"opacity":0.5});
        var ext = new esri.geometry.Extent({"xmin":-97.968323,"ymin":32.405333,"xmax":-86.220025,"ymax":37.006985,"spatialReference":{"wkid":4269}});
        var popup = new esri.dijit.Popup(null, dojo.create("div"));
        
        map = new esri.Map("map", { 
          "extent": ext, 
          "infoWindow": popup
        });
        map.addLayer(dynSvc);

        dojo.connect(map, 'onClick', queryCounties);
        
        dojo.connect(map, 'onLoad', function() { 
          dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
        });
      }

      function queryCounties(e) {
        // build an extent around the click point
        var pad = map.extent.getWidth() / map.width * 3;
        var queryGeom = new esri.geometry.Extent(e.mapPoint.x - pad, e.mapPoint.y - pad, e.mapPoint.x + pad, e.mapPoint.y + pad, map.spatialReference);
        var q = new esri.tasks.Query();
        q.outSpatialReference = {"wkid": 4269};
        q.returnGeometry = true;
        q.outFields = ["NAME", "STATE_FIPS", "CNTY_FIPS"];
        q.geometry = queryGeom;

        var popupTemplate = new esri.dijit.PopupTemplate({
          title: "{NAME}",
          fieldInfos: [
            { fieldName: "CNTY_FIPS", visible: true, label: "County FIPS: " },
            { fieldName: "STATE_FIPS", visible: true, label: "State FIPS: " }
          ]
        });

        var qt = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");
        var def = qt.execute(q);
        def.addCallback(function(result) {
          return dojo.map(result.features, function(f) {
            f.setInfoTemplate(popupTemplate);
            return f;
          });
        }); 

        // use the deferred returned from the query task to set
        // the popup features
        map.infoWindow.setFeatures([def]);
        // show the popup
        map.infoWindow.show(e.screenPoint, map.getInfoWindowAnchor(e.screenPoint));
      }
      dojo.ready(init);
    </script>
  </head>
  
  <body class="tundra">
    <div data-dojo-type="dijit.layout.BorderContainer" 
         data-dojo-props="design:'headline',gutters:false" 
         style="width: 100%; height: 100%; margin: 0;">
      <div id="map" 
           data-dojo-type="dijit.layout.ContentPane" 
           data-dojo-props="region:'center'"> 
      </div>
    </div>
  </body>
</html>

JSFiddle: http://jsfiddle.net/swingley/Bkswj/

This sample is using a query task to get features that intersect a click point and then using the deferred returned by the query task to set features for the map's popup.

If you're underlying data is time-enabled, use a timeExtent property on your query to query by time.

AnnaArzrumtsyan

Dear Derek & Ozan,

Thanks for sharing the samples! Yes, this is helpful. I will look into the code and will try to use it with time aware data.

Thanks,
Anna

AnnaArzrumtsyan

Dear Derek,

Could you please elaborate on how can I use a timeExtent property to query by time. I have a timeSlider and want to be able to connect the popup with the current time extent. Do you have a sample with dynamic service and a timeslider? It would help a lot.

Thanks,
Anna

Here's an example of using a popup with a dynamic map service:

JSFiddle: http://jsfiddle.net/swingley/Bkswj/

This sample is using a query task to get features that intersect a click point and then using the deferred returned by the query task to set features for the map's popup.

If you're underlying data is time-enabled, use a timeExtent property on your query to query by time.

AnnaArzrumtsyan

Hi Derek,

Never mind, I just fixed the problem. The following code in the query did the job:

var mystart = timeSlider.getCurrentTimeExtent().startTime;
var myend = timeSlider.getCurrentTimeExtent().endTime;
q.timeExtent = new esri.TimeExtent(mystart, myend);

Thanks again for your sample!
Anna

Dear Derek,

Could you please elaborate on how can I use a timeExtent property to query by time. I have a timeSlider and want to be able to connect the popup with the current time extent. Do you have a sample with dynamic service and a timeslider? It would help a lot.

Thanks,
Anna

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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