Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- All Communities
- :
- Developers
- :
- JavaScript Maps SDK
- :
- JavaScript Maps SDK Questions
- :
- Very simple example - adding collection of points ...
Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
Very simple example - adding collection of points by lat/long to web map
Subscribe
11-08-2012
11:46 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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
thanks,
josh
Solved! Go to Solution.
1 Solution
Accepted Solutions
11-13-2012
11:25 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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
1 Reply
11-13-2012
11:25 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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
