Popup window doesn't work

ShruthiR · ‎10-30-2014

I tried creating a popup window in map. When I run my program , it gets the basemap and the icons on the map , but not the popup window. Firebug throws this error

Error: Unable to draw graphic (null): Unable to complete operation.

...usePost,v=h.crossOrigin):A=!!h);g=e.mixin({},g);g._ssl&&(g.url=g.url.replace(/^h...

/3.11/ (line 871)

Error: Unable to draw graphic (null): Unable to complete operation.

...usePost,v=h.crossOrigin):A=!!h);g=e.mixin({},g);g._ssl&&(g.url=g.url.replace(/^h...

To solve this, I tried adding time between the layers, It didn't solve the problem. Below is my code. Please let me know, if I am making any mistake. Thanks!

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title> Trees Location</title> <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css"> <script src="http://js.arcgis.com/3.11/"></script> <script> var map; require(["esri/config", "esri/map","esri/dijit/Popup", "dojo/dom-construct", "esri/dijit/PopupTemplate", "esri/layers/FeatureLayer", "esri/symbols/SimpleMarkerSymbol", "esri/tasks/GeometryService", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/ArcGISTiledMapServiceLayer", "esri/Color", "dojo/domReady!"], function (esriConfig, Map,Popup,domConstruct, PopupTemplate, FeatureLayer,SimpleMarkerSymbol, GeometryService, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, Color ) { esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); var popupOptions = { markerSymbol: new SimpleMarkerSymbol("circle", 32, null, new Color([0, 0, 0, 0.25])), marginLeft: "20", marginTop: "20" }; var popup = new Popup(popupOptions, domConstruct.create("div")); map = new Map("map", { center: [-76.756, 40.241], zoom: 8, infoWindow: popup }); var popupTemplate = new PopupTemplate({ title: "{address}", fieldInfos: [ { fieldName: "Tredonor", visible: true, label: "Type" }, { fieldName: "Trespecies", visible: true, label: "Type" }, { fieldName: "Trevariety", visible: true, label: "Type" } ] }); var customBasemap = new ArcGISTiledMapServiceLayer( ""); map.addLayer(customBasemap); /* setTimeout(function(){ console.log("pausing a few seconds"); map.addLayer(customBasemap); },1000); */ var treeLayer = new ArcGISDynamicMapServiceLayer( ""); // map.addLayer(treeLayer); setTimeout(function(){ console.log("pausing a few seconds"); map.addLayer(treeLayer); },1000); var featureLayer = new FeatureLayer("", { infoTemplate: popupTemplate, outFields: ["Tredonor","Trespecies","Trevariety", "address"] }); featureLayer.setDefinitionExpression("MEMORIAL != ''"); map.addLayer(featureLayer); }); </script> </head> <body class="claro"> <div align="center"><strong> Trees Listing </strong><hr> <i><a target="_self" href="listingtrees.html">Listing</a> | <a target="_self" href="locationtrees.html">Locations </a></i> </div> <br> <div id="map" > </div> </body> </html>

JanJeske · ‎10-31-2014

Hey I modifed the Popup examle code for your Problem i hope it helps u a bit.

https://developers.arcgis.com/javascript/jssamples/popup_chart.html

BTW: the <hr> Element is depreached also the attribut align. You should use CSS for that.

var map;
      require([
        "esri/map",
        "esri/dijit/Popup", "esri/dijit/PopupTemplate",
        "esri/layers/FeatureLayer",
        "esri/symbols/SimpleFillSymbol", "esri/Color",
        "dojo/dom-class", "dojo/dom-construct", "dojo/on","esri/layers/ArcGISDynamicMapServiceLayer",
  "esri/layers/ArcGISTiledMapServiceLayer", 
        "dojox/charting/Chart", "dojox/charting/themes/Dollar",
        "dojo/domReady!"
      ], function(
        Map,
        Popup, PopupTemplate,
        FeatureLayer,
        SimpleFillSymbol, Color,
        domClass, domConstruct, on,ArcGISDynamicMapServiceLayer,ArcGISTiledMapServiceLayer,
        Chart, theme
      ) {
        //The popup is the default info window so you only need to create the popup and 
        //assign it to the map if you want to change default properties. Here we are 
        //noting that the specified title content should display in the header bar 
        //and providing our own selection symbol for polygons.
        var fill = new SimpleFillSymbol("solid", null, new Color("#A4CE67"));
        var popup = new Popup({
            fillSymbol: fill,
            titleInBody: false
        }, domConstruct.create("div"));
        //Add the dark theme which is customized further in the <style> tag at the top of this page
        domClass.add(popup.domNode, "dark");

        map = new Map("map", {         
          center: [-98.57, 39.82],
          zoom: 4,
          infoWindow: popup
        });

        var template = new PopupTemplate({
          title: "Boston Marathon 2013",
          description: "{STATE_NAME}:  {Percent_Fi} of starters finished",
          fieldInfos: [{ //define field infos so we can specify an alias
            fieldName: "Number_Ent",
            label: "Entrants"
          },{
            fieldName: "Number_Sta",
            label: "Starters"
          },{
            fieldName: "Number_Fin",
            label: "Finishers"
          }],
          mediaInfos:[{ //define the bar chart
            caption: "",
            type:"barchart",
            value:{
              theme: "Dollar",
              fields:["Number_Ent","Number_Sta","Number_Fin"]
            }
          }]
        });
          
        var basemap = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer");
        map.addLayer(basemap);          
        
        var usaLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer", {
          id: "us_counties",
          opacity: 0.7,
          visible: false
        });
        usaLayer.setVisibleLayers([2]);
        map.addLayer(usaLayer);

          
          
        var featureLayer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Boston_Marathon/FeatureServer/0",{
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"],
          infoTemplate: template
        });
        map.addLayer(featureLayer);
      });

View solution in original post

JanJeske · ‎10-31-2014

Hey I modifed the Popup examle code for your Problem i hope it helps u a bit.

https://developers.arcgis.com/javascript/jssamples/popup_chart.html

BTW: the <hr> Element is depreached also the attribut align. You should use CSS for that.

var map;
      require([
        "esri/map",
        "esri/dijit/Popup", "esri/dijit/PopupTemplate",
        "esri/layers/FeatureLayer",
        "esri/symbols/SimpleFillSymbol", "esri/Color",
        "dojo/dom-class", "dojo/dom-construct", "dojo/on","esri/layers/ArcGISDynamicMapServiceLayer",
  "esri/layers/ArcGISTiledMapServiceLayer", 
        "dojox/charting/Chart", "dojox/charting/themes/Dollar",
        "dojo/domReady!"
      ], function(
        Map,
        Popup, PopupTemplate,
        FeatureLayer,
        SimpleFillSymbol, Color,
        domClass, domConstruct, on,ArcGISDynamicMapServiceLayer,ArcGISTiledMapServiceLayer,
        Chart, theme
      ) {
        //The popup is the default info window so you only need to create the popup and 
        //assign it to the map if you want to change default properties. Here we are 
        //noting that the specified title content should display in the header bar 
        //and providing our own selection symbol for polygons.
        var fill = new SimpleFillSymbol("solid", null, new Color("#A4CE67"));
        var popup = new Popup({
            fillSymbol: fill,
            titleInBody: false
        }, domConstruct.create("div"));
        //Add the dark theme which is customized further in the <style> tag at the top of this page
        domClass.add(popup.domNode, "dark");

        map = new Map("map", {         
          center: [-98.57, 39.82],
          zoom: 4,
          infoWindow: popup
        });

        var template = new PopupTemplate({
          title: "Boston Marathon 2013",
          description: "{STATE_NAME}:  {Percent_Fi} of starters finished",
          fieldInfos: [{ //define field infos so we can specify an alias
            fieldName: "Number_Ent",
            label: "Entrants"
          },{
            fieldName: "Number_Sta",
            label: "Starters"
          },{
            fieldName: "Number_Fin",
            label: "Finishers"
          }],
          mediaInfos:[{ //define the bar chart
            caption: "",
            type:"barchart",
            value:{
              theme: "Dollar",
              fields:["Number_Ent","Number_Sta","Number_Fin"]
            }
          }]
        });
          
        var basemap = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer");
        map.addLayer(basemap);          
        
        var usaLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer", {
          id: "us_counties",
          opacity: 0.7,
          visible: false
        });
        usaLayer.setVisibleLayers([2]);
        map.addLayer(usaLayer);

          
          
        var featureLayer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Boston_Marathon/FeatureServer/0",{
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"],
          infoTemplate: template
        });
        map.addLayer(featureLayer);
      });

ShruthiR · ‎12-08-2014

Hi,

I have tried modifying my code as yours, it doesn't create popup window. I get the map and the icons but does not create the window. Below is the modified code, can you please see it, let me know if I'm missing something or I'm making some mistake.

<!DOCTYPE html>

<html>

<head>

<title>BGSU Memorial Trees Location</title>

</script>

var map;

require(["esri/map", "esri/dijit/Popup", "esri/dijit/PopupTemplate",

"esri/layers/FeatureLayer", "esri/symbols/SimpleMarkerSymbol", "esri/Color", "dojo/dom-class",

"dojo/dom-construct", "dojo/on", "esri/layers/ArcGISDynamicMapServiceLayer",

"esri/layers/ArcGISTiledMapServiceLayer", "dojo/domReady!"],

function(Map, Popup, PopupTemplate, FeatureLayer, SimpleMarkerSymbol,

Color, domClass, domConstruct, on, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer){

var popupOptions = new SimpleMarkerSymbol("solid", 32, null, new Color("#A4CE67"));

//create popup window

var popup = new Popup(popupOptions, domConstruct.create("map"));

map = new Map("map", {

center: [-76.756, 40.241],

zoom: 8,

infoWindow: popup // assign popup to the map

});

var template = new PopupTemplate({

title: "{MEMORIAL TREE}",

fieldInfos: [{ //defining field infos

fieldName: "MEMORIAL_TREE_DONOR",

label: "Type"

}, {

fieldName: "TREE_SPECIES",

label: "Type"

}, {

fieldName: "TREE_VARIETY",

label: "Type"

}]

});

// map layer

var basemap = new ArcGISTiledMapServiceLayer("https://gistest2.bgsu.edu/arcgis/rest/services/Basemap/gisbasemap/MapServer");

map.addLayer(basemap);

// tree icon layer

var treeLayer = new ArcGISDynamicMapServiceLayer("https://gistest2.bgsu.edu/arcgis/rest/services/MemorialTrees/MemorialTEST/MapServer");

map.addLayer(treeLayer);

// info

var featureLayer = new FeatureLayer("https://gistest2.bgsu.edu/arcgis/rest/services/MemorialTrees/MemorialTEST/MapServer/0", {

mode: FeatureLayer.MODE_ONDEMAND,

infoTemplate: template,

outFields: ["MEMORIAL_TREE_DONOR", "TREE_SPECIES", "TREE_VARIETY", "MEMORIAL"]

});

map.addLayer(featureLayer);

});

</script>

</head>

<body>

</div>

</body>

</html>

Thank you very much for seeing this!