Select to view content in your preferred language

Deeply stuck adding one marker to a map

1139
4
05-28-2014 11:13 AM
KenDeeds
Regular Contributor
I've been stuck now for 2 days using the new code syntax ("require" vs "init()").  All I'm trying to do is put one marker on a map.  I have an example page here:

http://dev.consensusdev.com/sample_esri_map.html

I have no errors, I can copy and paste the source into the sandbox, it runs, no marker shows up, no errors.  I'm hoping I'm missing something really simple.  I know doing it the old way with "init()" and "dojo.require" I could add a marker no problem.  Any help really appreciated.  I agreed to do a local developer meeting on ESRI javascript again tomorrow and really just want to show how to make a map and add one point.  Been stuck for hours.
0 Kudos
4 Replies
TimWitt
Deactivated User
Maybe this application I have created helps?

I created two markers in it.

One thing I see is that you are missing "dojo/on" in your require, and the corresponding "on" in your function.

This might help you understanding AMD vs Legacy.
0 Kudos
TimWitt
Deactivated User
Try this:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test map with one marker</title>
<link type="text/css" href="style/cp.css" rel="stylesheet" />
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css"> 
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<script type="text/javascript" src="http://js.arcgis.com/3.9/"></script>

<script>
<!--//
var icons = new Array();
var coords = {'lat': new Array(), 'lon': new Array()};
var map = '';
var icon = '';

var lat = '43.727294000';
var lon = '-97.977614000';

require([
 "esri/map",
 "esri/geometry/Point",
 "esri/SpatialReference",
 "esri/graphic",
 "dojo/on",
 "esri/symbols/SimpleMarkerSymbol",
 "esri/symbols/PictureMarkerSymbol",
 "esri/symbols/SimpleFillSymbol",
 "dojo/domReady!"
 ], 
 function(Map, Point, SpatialReference, Graphic, on, SimpleMarkerSymbol, PictureMarkerSymbol, SimpleFillSymbol) { 
     map = new Map("idmap", {
   center: [lon, lat],
   zoom: 9,
   basemap: "national-geographic"
  });
  on(map, "load", addGraphic);
  function addGraphic(){
   var symbolb = new PictureMarkerSymbol('http://files.geoconhead.consensusdev.com/portal/GCH3cXr0JLmkVKE3QykW/icons/type/original/vtm891210C58F9ABE062.png', 30, 30); 
   var gpoint = new Point(lon, lat, new SpatialReference({ wkid: 4326 }) );
   var newgraphic = new Graphic(gpoint, symbolb);
   map.graphics.add(newgraphic);
   console.log(newgraphic);
  }
  });
 

//-->
</script>
</head>
<body>
<div id="container">
 <div id="core">
  <div class="column" id="column3">
   <div id="idmap" style="width:500px;height:500px;"></div>
  </div>
  <div class="clearboth"></div>
 </div>
</div>
</body>
</html>


You were also missing "esri/SpatialReference"

Tim
0 Kudos
KenDeeds
Regular Contributor
Thank you Tim.  My first time initiating the map this way (I've used the old onload method with an init() function) and felt anytime I'm this stuck it's something relatively simple and it was.  Thank you again.
0 Kudos
TimWitt
Deactivated User
No problem, don't forget to mark the thread as answered.
0 Kudos