topic Elementary example for adding graphic to a map in ArcGIS JavaScript Maps SDK Questions

Elementary example for adding graphic to a map

FilipKrál — Wed, 29 Oct 2014 15:50:07 GMT

Hello,

I cannot figure out what am I doing wrong while adding a point graphic to a map. I have searched fora, samples, and help, but still cannot crack it.

Below is code for an elementary example of adding a single point graphic. The graphic ends up in map.graphics.graphics.array, but it is not visible on the map.

Can you see what is wrong with it? I am guessing the symbol is not right but nothing I tried worked.

Many thanks,

Filip.

<!DOCTYPE html>
<html lang="en">
<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>Add Graphic to a Map</title>

<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<style type="text/css" media="screen">
#map{
   height: 500px;
   width: 100%;
}
</style>

script src="http://js.arcgis.com/3.11/"></script>

</head>
<body>

<div id="map"></div>

<script>

  var map;

  require([
    "esri/map",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/graphic",
    "esri/dijit/Popup",
    "esri/Color",
    "esri/InfoTemplate",
    "esri/geometry/Point",
    "dojo/dom-construct",
    "dojo/domReady!"
  ], function (
    Map,
    SimpleMarkerSymbol,
    Graphic,
    Popup,
    Color,
    InfoTemplate,
    Point,
    domConstruct
  ) {

    map = new Map("map", { basemap: "topo", center: [-120.45, 45.75], zoom: 7 });

    map.on("load", function () {
      var pt = new Point(-120.0, 45.4, { wkid: 4326 });
      var sms = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_CIRCLE).setColor(new Color([255, 0, 0]));
      var attr = { "Plant": "Mesa Mint" };
      var infoTemplate = new InfoTemplate("Vernal Pool Locations", "$(Plant)");
      var graphic = new Graphic(pt, sms, attr, infoTemplate);
      map.graphics.add(graphic);
    });

  });

</script>
</body>
</html>

Re: Elementary example for adding graphic to a map

JerredSchmidt — Wed, 29 Oct 2014 16:15:10 GMT

If you remove the spatial reference from the definition of pt your example works

line 51 should be var pt = new Point(-120.0, 45.4);

point-amd | API Reference | ArcGIS API for JavaScript

Re: Elementary example for adding graphic to a map

JerredSchmidt — Wed, 29 Oct 2014 16:18:31 GMT

Also your infoTemplate should be

var infoTemplate = new InfoTemplate("Vernal Pool Locations", "${Plant}");

notice the use of {} not ()

Re: Elementary example for adding graphic to a map

RobertScheitlin__GISP — Wed, 29 Oct 2014 16:35:22 GMT

Filip,

If you want to specify the spatial reference then this is the syntax:

var point = new Point([-122.65,45.53],new SpatialReference({ wkid:4326 }));

and of course you need the "esri/SpatialReference" require.

But as Jared shows there is no need to specify the SpatialReference if the wkid is 4326 or 102100 or 3857. as Point can automatically take lat, lon or X, Y from those wkids.

Re: Elementary example for adding graphic to a map

FilipKrál — Wed, 29 Oct 2014 16:42:38 GMT

Thank you both ever so much!

The problem in the example I posted was indeed in the spatial reference definition.

In fact, my original problem was that I created a new graphics layer and added my graphics into it. But I forgot to add this new graphics layer to the map! So I explored more and more with no success and ended up completely lost.

Many thanks again!

Filip.