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>
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
