Pop up disappears

Dianede_lanfranchi · ‎06-23-2014

Hello,

I've been working on a script that simply display a marker on a map which let a pop up appear with some infos on it.

My problem is that my pop up "pop" and instantly "unpop", I've noticed that if I replace the webmap id by a simple map creation, it works..

I can't understand why it doesn't work, here's my code :
Any kind of help/tips would be appreciated, thanks 🙂

var map,         webmapId = "map id";          require([       "esri/map",       "esri/arcgis/utils",       "dojo/domReady!"       ], function (Map, arcgisUtils) {         arcgisUtils.createMap(webmapId, "mapDiv").then(function (response) {         map = response.map;                         map.on("load", function(){             map.infoWindow.resize(250,100);           });                 var point = new esri.geometry.Point(8.7386350, 41.9192290);                 point = esri.geometry.geographicToWebMercator(point);                 var symbol = new esri.symbol.PictureMarkerSymbol("btb.png", 16, 16);                 var graphic = new esri.Graphic(point, symbol);                 var layer = new esri.layers.GraphicsLayer();                 layer.add(graphic);                 map.addLayer(layer);                  dojo.connect(layer, "onClick", onClick);                                  function onClick(evt) {                     map.infoWindow.setTitle("Test");                     map.infoWindow.setContent(                       "test test test test"                     );                     map.infoWindow.show(evt.screenPoint);                 }      });      });   </script>  </head> <body class="claro">   <div id="mapDiv"></div> </body> </html>

JakeSkinner · ‎06-24-2014

Hi Diane,

It looks like you are combining legacy and AMD code. I would recommend using only AMD. One way around this is to set the infoTemplate for the graphic you are creating. Here is an example:

var map, webmapId = "123456";  require([     "esri/map", "esri/arcgis/utils", "esri/InfoTemplate",     "esri/geometry/Point", "esri/geometry/webMercatorUtils",     "esri/symbols/PictureMarkerSymbol", "esri/graphic", "esri/layers/GraphicsLayer",     "dojo/domReady!" ],  function(     Map, arcgisUtils, InfoTemplate,     Point, webMercatorUtils,     PictureMarkerSymbol, Graphic, GraphicsLayer ) {      arcgisUtils.createMap(webmapId, "mapDiv").then(function(response) {       map = response.map;        map.on("load", function() {         map.infoWindow.resize(250, 100);       });       var point = new Point(-75.16994, 40.00284);       point = webMercatorUtils.geographicToWebMercator(point);              var symbol = new PictureMarkerSymbol("btb.png", 16, 16);              var attr = {"Xcoord":point.x,"Ycoord":point.y};       var infoTemplate = new InfoTemplate("Location","Latitude: ${Ycoord} <br/>Longitude: ${Xcoord}");              var graphic = new Graphic(point, symbol, attr, infoTemplate);       var layer = new GraphicsLayer();       layer.add(graphic);       map.addLayer(layer);     });  });

View solution in original post

Dianede_lanfranchi · ‎06-24-2014

Any ideas ?

JakeSkinner · ‎06-24-2014

Hi Diane,

It looks like you are combining legacy and AMD code. I would recommend using only AMD. One way around this is to set the infoTemplate for the graphic you are creating. Here is an example:

var map, webmapId = "123456";  require([     "esri/map", "esri/arcgis/utils", "esri/InfoTemplate",     "esri/geometry/Point", "esri/geometry/webMercatorUtils",     "esri/symbols/PictureMarkerSymbol", "esri/graphic", "esri/layers/GraphicsLayer",     "dojo/domReady!" ],  function(     Map, arcgisUtils, InfoTemplate,     Point, webMercatorUtils,     PictureMarkerSymbol, Graphic, GraphicsLayer ) {      arcgisUtils.createMap(webmapId, "mapDiv").then(function(response) {       map = response.map;        map.on("load", function() {         map.infoWindow.resize(250, 100);       });       var point = new Point(-75.16994, 40.00284);       point = webMercatorUtils.geographicToWebMercator(point);              var symbol = new PictureMarkerSymbol("btb.png", 16, 16);              var attr = {"Xcoord":point.x,"Ycoord":point.y};       var infoTemplate = new InfoTemplate("Location","Latitude: ${Ycoord} <br/>Longitude: ${Xcoord}");              var graphic = new Graphic(point, symbol, attr, infoTemplate);       var layer = new GraphicsLayer();       layer.add(graphic);       map.addLayer(layer);     });  });

Dianede_lanfranchi · ‎06-24-2014

Oh... seems like I need to practice a little more.. 🙂

Thanks for your help