Elementary example for adding graphic to a map

1018
4
Jump to solution
10-29-2014 08:50 AM
FilipKrál
Occasional Contributor III

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>

Tags (3)
1 Solution

Accepted Solutions
JerredSchmidt
New Contributor III

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

View solution in original post

0 Kudos
4 Replies
JerredSchmidt
New Contributor III

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

0 Kudos
JerredSchmidt
New Contributor III

Also your infoTemplate should be

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

notice the use of {} not ()

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

FilipKrál
Occasional Contributor III

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.

0 Kudos