Programmatically adding multiple points to the map

MohitBhonde · ‎10-14-2011

All,

I intend to programatically add Points(Pins) on the map.

I have a function which looks like this

var mp = new esri.geometry.Multipoint(new esri.SpatialReference({wkid:4326}));
mp.points = [[-122.63,45.51],[-122.56,45.51],[-122.56,45.55],[-122.62,45.],[-122.59,45.53]];

var simpleMarkerSymbol = new esri.symbol.PictureMarkerSymbol('images/red-pushpin.png', 24, 24);
var infoTemplate = new esri.InfoTemplate("Vernal Pool Locations");
var graphic = new esri.Graphic(mp, simpleMarkerSymbol, infoTemplate);

   console.debug("adding a graphic to the map" + graphic);
   map.graphics.add(graphic);

I am using 2.4 version of the JSAPI. Upon executing, the pin gets placed at the centre of the map and all i see is one (overlapping) pin

Any thoughts on where I might be going wrong?

derekswingley1 · ‎10-14-2011

What's the spatial reference of your map? Is it geographic? Or are you using web mercator? If you're using web mercator, convert from lat, long to web merc using esri.geometry.geographicToWebMercator before creating your graphic.

There's also a syntax issue with how you are defining your points. You should either pass your points to the MultipPoint constructor (as shown below) or use the addPoint() method to add points.


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/css/Popup.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{ margin: 0; padding: 0; }
    </style>
    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      
      var map;
      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-14052134,"ymin":5562249,"xmax":-13179529,"ymax":5897349,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{extent:initExtent});
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);

        dojo.connect(map, 'onLoad', function() { 
          dojo.connect(dijit.byId('map'), 'resize', map, map.resize);

          var points = { 
            "points": [[-122.63,45.51],[-122.56,45.51],[-122.56,45.55],[-122.62,45.00],[-122.59,45.53]], 
            "spatialReference": ({ "wkid": 4326 })
          };
          var mp = new esri.geometry.Multipoint(points);
          var wm_mp = esri.geometry.geographicToWebMercator(mp);

          var sms = new esri.symbol.SimpleMarkerSymbol();
          var infoTemplate = new esri.InfoTemplate("Vernal Pool Locations", ""); 
          var graphic = new esri.Graphic(wm_mp, sms, '', infoTemplate);

          map.graphics.add(graphic);
        });
      }
      dojo.ready(init);
    </script>
  </head>
  
  <body class="tundra">
    <div data-dojo-type="dijit.layout.BorderContainer" 
         data-dojo-props="design:'headline',gutters:false" 
         style="width: 100%; height: 100%; margin: 0;">
      <div id="map" 
           data-dojo-type="dijit.layout.ContentPane" 
           data-dojo-props="region:'center'"> 
      </div>
    </div>
  </body>
</html>

KhaldoonMansour · ‎06-21-2017

Your reply was very helpful , thank you so much , how do i make a distinguish infoTemplate for each point ?