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>
Solved! Go to Solution.
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);
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);
Also your infoTemplate should be
var infoTemplate = new InfoTemplate("Vernal Pool Locations", "${Plant}");
notice the use of {} not ()
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.
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.