AnsweredAssumed Answered

Elementary example for adding graphic to a map

Question asked by filipkral on Oct 29, 2014
Latest reply on Oct 29, 2014 by filipkral

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>

Outcomes