Programmatically adding multiple points to the map

MohitBhonde — Fri, 14 Oct 2011 09:58:57 GMT

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?

Re: Programmatically adding multiple points to the map

derekswingley1 — Sat, 11 Dec 2021 22:02:08 GMT

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>

Re: Programmatically adding multiple points to the map

KhaldoonMansour — Wed, 21 Jun 2017 22:00:22 GMT

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

topic Re: Programmatically adding multiple points to the map in ArcGIS JavaScript Maps SDK Questions

Programmatically adding multiple points to the map

Re: Programmatically adding multiple points to the map

Re: Programmatically adding multiple points to the map