Simple add graphics question

BenScott1 · ‎01-15-2014

I am new to javascript and the api and experimenting with the various samples on this site as a starting point. One thing I have tried is adding a graphic to a map using map.graphics.add.

I am finding that when I contain the map.graphics.add part in the dojo connect statement (as per example 1 below) my script works - it plots a single point on the map at the specified coordinates.

If, however I try a more functionally decomposed script as is presented in https://developers.arcgis.com/en/javascript/jsapi/map.html I get a blank map (see example 2.). I am sure this is something simple, but can't figure out what's wrong.

Any ideas?

Cheers,
Ben

Example 1.

  <script>     dojo.require("esri.map");        function init(){       var map = new esri.Map("mapDiv", {         center: [150, -33],         zoom: 3,         basemap: "streets"       });       dojo.connect(map, 'onLoad', function() {        var point = new esri.geometry.Point(150, -33, new esri.SpatialReference({wkid:4326}));       map.graphics.add(new esri.Graphic(point,new esri.symbol.SimpleMarkerSymbol()));       });     }     dojo.ready(init);   </script>

Example 2.

  <script>     dojo.require("esri.map");          function init(){       var map = new esri.Map("mapDiv", {         center: [150, -33],         zoom: 7,         basemap: "streets"       });       dojo.connect(map, "onLoad", function() { ShowLocation(150, -33); });          }      function ShowLocation(x, y)      {       var point = new esri.geometry.Point(x, y, new esri.SpatialReference({wkid:4326}));       map.graphics.add(new esri.Graphic(point,new esri.symbol.SimpleMarkerSymbol()));     }                  dojo.ready(init);   </script>

KenBuja · ‎01-16-2014

Actually, you can keep the ShowLocation function outside the init function. However, the variable "map" was declared inside the init function, so it was only usable with all the properties you set in that function. When you used the variable "map" in the ShowLocation function, you were in a sense creating another variable "map". Take a look at these articles that talk about the scopt of variables.

This would work equally well. Notice where the variable "map" is declared.

<!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>         dojo.require("esri.map");         var map;          function init() {             map = new esri.Map("mapDiv", {                 center: [-56.049, 38.485],                 zoom: 3,                 basemap: "streets"             });             dojo.connect(map, "onLoad", function () { ShowLocation(150, -33); });         }          function ShowLocation(x, y) {             var point = new esri.geometry.Point(x, y, new esri.SpatialReference({ wkid: 4326 }));             map.graphics.add(new esri.Graphic(point, new esri.symbol.SimpleMarkerSymbol()));         }         dojo.ready(init);     </script>  </head> <body class="claro">     <div id="mapDiv"></div> </body> </html>

As a side note, if you're learning how to use the JavaScript API, I would recommend that you learn how to use the AMD style of coding. At some point in the future, using dojo.connect will be depreciated.

View solution in original post

JohnathanBarclay · ‎01-15-2014

Your ShowLocation function is defined outside the init function.

Try this instead:

<script>
  dojo.require("esri.map");
    
  function init(){
    var map = new esri.Map("mapDiv", {
      center: [150, -33],
      zoom: 7,
      basemap: "streets"
    });
    dojo.connect(map, "onLoad", function(){ ShowLocation(150, -33) });   

    function ShowLocation(x, y){
      var point = new esri.geometry.Point(x, y, new esri.SpatialReference({wkid:4326}));
      map.graphics.add(new esri.Graphic(point,new esri.symbol.SimpleMarkerSymbol()));
    }
  }
        
  dojo.ready(init);
</script>

KenBuja · ‎01-16-2014

Actually, you can keep the ShowLocation function outside the init function. However, the variable "map" was declared inside the init function, so it was only usable with all the properties you set in that function. When you used the variable "map" in the ShowLocation function, you were in a sense creating another variable "map". Take a look at these articles that talk about the scopt of variables.

This would work equally well. Notice where the variable "map" is declared.

<!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>         dojo.require("esri.map");         var map;          function init() {             map = new esri.Map("mapDiv", {                 center: [-56.049, 38.485],                 zoom: 3,                 basemap: "streets"             });             dojo.connect(map, "onLoad", function () { ShowLocation(150, -33); });         }          function ShowLocation(x, y) {             var point = new esri.geometry.Point(x, y, new esri.SpatialReference({ wkid: 4326 }));             map.graphics.add(new esri.Graphic(point, new esri.symbol.SimpleMarkerSymbol()));         }         dojo.ready(init);     </script>  </head> <body class="claro">     <div id="mapDiv"></div> </body> </html>

As a side note, if you're learning how to use the JavaScript API, I would recommend that you learn how to use the AMD style of coding. At some point in the future, using dojo.connect will be depreciated.