An open popup

TimWitt · ‎02-26-2014

Hey everybody,

I am have the following map, that creates a point on load. Now I would like to add a popup box that is already opened on load, where I can put an address in. So when the map loads it shows a point with an open popup box pointing to the point. What is the best way to do that?

Here is my code:

<!DOCTYPE html> <html> <head>   <title>Create a Map</title>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">   <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">   <style>     html, body, #mapDiv{       padding: 0;       margin: 0;       height: 100%;     }   </style>      <script src="http://js.arcgis.com/3.8/"></script>   <script>     var map;     require([         "esri/map",         "esri/symbols/SimpleMarkerSymbol",          "esri/symbols/SimpleLineSymbol",          "dojo/_base/Color",          "esri/geometry/Point",         "esri/graphic",         "dojo/on",         "dojo/dom",         "dojo/domReady!"     ],      function(         Map,         SimpleMarkerSymbol, SimpleLineSymbol, Color, Point, Graphic,         on, dom     ) {       map = new Map("mapDiv", {         center: [-80.719892, 28.303518],         zoom: 16,         basemap: "topo"       });                   on(map, "load", addGraphic);               var sfs = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,               new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,               new Color([255,0,0]), 1),               new Color([0,255,0,0.25])               )       function addGraphic(){                         var singlePoint = new Point([-80.719892, 28.303518])             var gra = new Graphic(singlePoint,sfs);             map.graphics.add(gra);       }     });   </script>  </head> <body class="claro">   <div id="mapDiv"></div> </body> </html>

Thanks!

Tim

JakeSkinner · ‎02-26-2014

Hi Tim,

I'm not sure if it's possible to edit an infoWindow for a graphic, but you can easily show it when the map loads by updating the addGraphic function. Ex:

function addGraphic(){                         var singlePoint = new Point([-80.719892, 28.303518])                         var attr = {"Xcoord":singlePoint.x,"Ycoord":singlePoint.y,"Address":""};             var infoTemplate = new InfoTemplate("Attributes","Latitude: ${Ycoord} <br/>Longitude: ${Xcoord} <br/>Address:${Address}");              var gra = new Graphic(singlePoint,sfs,attr,infoTemplate);                         map.graphics.add(gra);                          featureArray = [];             featureArray.push(gra);              map.infoWindow.setFeatures(featureArray);             map.infoWindow.show(singlePoint);        }

<!DOCTYPE html> <html> <head>   <title>Create a Map</title>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">   <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">   <style>     html, body, #mapDiv{       padding: 0;       margin: 0;       height: 100%;     }   </style>      <script src="http://js.arcgis.com/3.8/"></script>   <script>     var map;     require([         "esri/map",         "esri/symbols/SimpleMarkerSymbol",          "esri/symbols/SimpleLineSymbol",          "dojo/_base/Color",          "esri/geometry/Point",         "esri/InfoTemplate",         "esri/graphic",         "dojo/on",         "dojo/dom",         "dojo/domReady!"     ],      function(         Map,         SimpleMarkerSymbol, SimpleLineSymbol, Color, Point, InfoTemplate, Graphic,         on, dom     ) {       map = new Map("mapDiv", {         center: [-80.719892, 28.303518],         zoom: 16,         basemap: "topo"       });                   on(map, "load", addGraphic);               var sfs = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,               new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,               new Color([255,0,0]), 1),               new Color([0,255,0,0.25])               )       function addGraphic(){                         var singlePoint = new Point([-80.719892, 28.303518])                         var attr = {"Xcoord":singlePoint.x,"Ycoord":singlePoint.y,"Address":""};             var infoTemplate = new InfoTemplate("Attributes","Latitude: ${Ycoord} <br/>Longitude: ${Xcoord} <br/>Address:${Address}");              var gra = new Graphic(singlePoint,sfs,attr,infoTemplate);                         map.graphics.add(gra);                          featureArray = [];             featureArray.push(gra);              map.infoWindow.setFeatures(featureArray);             map.infoWindow.show(singlePoint);        }     });   </script>  </head> <body class="claro">   <div id="mapDiv"></div> </body> </html>

View solution in original post

JakeSkinner · ‎02-26-2014

Hi Tim,

I'm not sure if it's possible to edit an infoWindow for a graphic, but you can easily show it when the map loads by updating the addGraphic function. Ex:

function addGraphic(){                         var singlePoint = new Point([-80.719892, 28.303518])                         var attr = {"Xcoord":singlePoint.x,"Ycoord":singlePoint.y,"Address":""};             var infoTemplate = new InfoTemplate("Attributes","Latitude: ${Ycoord} <br/>Longitude: ${Xcoord} <br/>Address:${Address}");              var gra = new Graphic(singlePoint,sfs,attr,infoTemplate);                         map.graphics.add(gra);                          featureArray = [];             featureArray.push(gra);              map.infoWindow.setFeatures(featureArray);             map.infoWindow.show(singlePoint);        }

<!DOCTYPE html> <html> <head>   <title>Create a Map</title>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">   <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">   <style>     html, body, #mapDiv{       padding: 0;       margin: 0;       height: 100%;     }   </style>      <script src="http://js.arcgis.com/3.8/"></script>   <script>     var map;     require([         "esri/map",         "esri/symbols/SimpleMarkerSymbol",          "esri/symbols/SimpleLineSymbol",          "dojo/_base/Color",          "esri/geometry/Point",         "esri/InfoTemplate",         "esri/graphic",         "dojo/on",         "dojo/dom",         "dojo/domReady!"     ],      function(         Map,         SimpleMarkerSymbol, SimpleLineSymbol, Color, Point, InfoTemplate, Graphic,         on, dom     ) {       map = new Map("mapDiv", {         center: [-80.719892, 28.303518],         zoom: 16,         basemap: "topo"       });                   on(map, "load", addGraphic);               var sfs = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,               new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,               new Color([255,0,0]), 1),               new Color([0,255,0,0.25])               )       function addGraphic(){                         var singlePoint = new Point([-80.719892, 28.303518])                         var attr = {"Xcoord":singlePoint.x,"Ycoord":singlePoint.y,"Address":""};             var infoTemplate = new InfoTemplate("Attributes","Latitude: ${Ycoord} <br/>Longitude: ${Xcoord} <br/>Address:${Address}");              var gra = new Graphic(singlePoint,sfs,attr,infoTemplate);                         map.graphics.add(gra);                          featureArray = [];             featureArray.push(gra);              map.infoWindow.setFeatures(featureArray);             map.infoWindow.show(singlePoint);        }     });   </script>  </head> <body class="claro">   <div id="mapDiv"></div> </body> </html>

TimWitt · ‎02-26-2014

Jake,

this is exactly what I was looking for!

Thanks,

Tim