Very simple example - adding collection of points by lat/long to web map

JoshMeyer — Thu, 08 Nov 2012 19:46:48 GMT

I'm new to ArcGIS and I'm looking for a VERY simple example of just adding a collection of points to a web map using the JS API. I just want to be able to read in a collection of points (in JSON format) and then plot the points on a map. I've found bits and pieces of what I think I need, but haven't been able to put it together into a working example.

thanks,

josh

Re: Very simple example - adding collection of points by lat/long to web map

ShreyasVakil — Tue, 13 Nov 2012 19:25:22 GMT

I'm new to ArcGIS and I'm looking for a VERY simple example of just adding a collection of points to a web map using the JS API. I just want to be able to read in a collection of points (in JSON format) and then plot the points on a map. I've found bits and pieces of what I think I need, but haven't been able to put it together into a working example.

thanks,

josh

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />     <!--The viewport meta tag is used to improve the presentation and behavior of the samples        on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>     <title>Topographic Map</title>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />          <style>       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }       .esriScalebar{         padding: 20px 20px;       }       #map{         padding:0;       }     </style>     <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>     <script type="text/javascript">       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("esri.map");       dojo.require("esri.layers.graphics");              var map;       var json_object = new Object();       function init() {         var initExtent = new esri.geometry.Extent({"xmin":-9671921.1555481,"ymin":3835533.6423208765,"xmax":-9647499.525011018,"ymax":3852598.2088855193,"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);    var graphicsLayer = new esri.layers.GraphicsLayer();  map.addLayer(graphicsLayer);    //json_object = { "type": "Point", "coordinates": ["8761793.5", "2709029.5"] };   /*json_object = { "type": "MultiPoint",    "coordinates": [ ["8761793.5", "2709029.5"], [101.0, 1.0] ]   };*/    json_object = {      "displayFieldName" : "STATE_FIPS",      "fieldAliases" : {        "STATE_FIPS" : "STATE_FIPS"      },      "geometryType" : "esriGeometryPoint",      "spatialReference" : {        "wkid" : 102100      },      "fields" : [        {          "name" : "STATE_FIPS",          "type" : "esriFieldTypeString",          "alias" : "STATE_FIPS",          "length" : 2        }      ],      "features" : [        {          "attributes" : {     "STATE_FIPS" : "01"          },          "geometry" : {     "x" : -9659984.5882678125,     "y" : 3843423.8370021689          }        },        {          "attributes" : {     "STATE_FIPS" : "01"          },          "geometry" : {     "x" : -9659849.6690449715,     "y" : 3846485.4913369077          }        },        {          "attributes" : {     "STATE_FIPS" : "01"          },          "geometry" : {     "x" : -9659093.6882630419,     "y" : 3847661.0485759573          }        },        {          "attributes" : {     "STATE_FIPS" : "01"          },          "geometry" : {     "x" : -9660123.1709138975,     "y" : 3849092.0352045712          }        },        {          "attributes" : {     "STATE_FIPS" : "01"          },          "geometry" : {     "x" : -9662476.5863887127,     "y" : 3848187.8772689351          }        },        {          "attributes" : {     "STATE_FIPS" : "01"          },          "geometry" : {     "x" : -9660216.9019251466,     "y" : 3847431.2924679583          }        }      ]    };     var point;         var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10,    new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,    new dojo.Color([255,0,0]), 1),    new dojo.Color([255,0,0,0.25]));    var graphic;      for(var i=0; i<json_object.features.length; i++)  {   point = new esri.geometry.Point(json_object.features.geometry.x, json_object.features.geometry.y, new esri.SpatialReference({ wkid: 102100 }));   graphic = new esri.Graphic(point, symbol);   graphicsLayer.add(graphic);  }              dojo.connect(map, 'onLoad', function(theMap) {            //resize the map when the browser resizes           dojo.connect(dijit.byId('map'), 'resize', map,map.resize);         });       }        dojo.addOnLoad(init);     </script>   </head>      <body class="claro">     <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;">       <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;padding:0;">      </div>     </div>   </body>  </html>

Take a look at this sample which adds a collection of points(JSON Format) to the map.

-Shreyas

topic Re: Very simple example - adding collection of points by lat/long to web map in ArcGIS JavaScript Maps SDK Questions

Very simple example - adding collection of points by lat/long to web map

Re: Very simple example - adding collection of points by lat/long to web map