<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; 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>Add Shapefile</title> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css"> <script>var dojoConfig = { parseOnLoad: true };</script> <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script> <script> dojo.require("esri.map"); dojo.require("esri.layers.FeatureLayer"); dojo.require("esri.dijit.Popup"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.ready(init); var map; var portalUrl = "http://www.arcgis.com"; function init() { esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx"; esri.config.defaults.io.alwaysUseProxy = false; dojo.connect(dojo.byId("uploadForm").data, "onchange", function (evt) { var fileName = evt.target.value; //filename is full path in IE so extract the file name var arr = fileName.split("\\"); fileName = arr[arr.length - 1]; if (fileName.indexOf(".zip") !== -1) {//is file a zip - if not notify user generateFeatureCollection(fileName); }else{ dojo.byId('upload-status').innerHTML = '<p style="color:red">Add shapefile as .zip file</p>'; } }); //create a popup to replace the map's info window // var popup = new esri.dijit.Popup(null, dojo.create("div")); var extent = new esri.geometry.Extent({"xmin": -82.982664376928,"ymin":36.9701097164086,"xmax":-77.3635190912301, "ymax":40.8546687287403,"spatialReference":{"wkid":4326}}); //map = new esri.Map("mapDiv", { extent: esri.geometry.geographicToWebMercator(extent)}); map = new esri.Map("mapDiv", { basemap: "streets", extent:extent }); } function generateFeatureCollection(fileName) { var name = fileName; //Chrome and IE add c:\fakepath to the value - we need to remove it //See this link for more info: http://davidwalsh.name/fakepath //name = name[0].replace("C:\\fakepath\\",""); dojo.byId('upload-status').innerHTML = '<b>Loading </b>' + name; //Define the input params for generate see the rest doc for details //http://www.arcgis.com/apidocs/rest/index.html?generate.html var params = { 'name': name, 'targetSR': map.spatialReference, 'maxRecordCount': 1000, 'enforceInputFileSizeLimit': true, 'enforceOutputJsonSizeLimit': true }; //generalize features for display Here we generalize at 1:40,000 which is approx 10 meters //This should work well when using web mercator. var mapextent = esri.geometry.getExtentForScale(map,40000); var resolution = mapextent.getWidth() / map.width; params.generalize = true; params.maxAllowableOffset = resolution; params.reducePrecision = true; params.numberOfDigitsAfterDecimal = 0; var myContent = { 'filetype': 'shapefile', 'publishParameters': dojo.toJson(params), 'f': 'json', 'callback.html': 'textarea' }; console.log(myContent); //use the rest generate operation to generate a feature collection from the zipped shapefile esri.request({ url: portalUrl + '/sharing/rest/content/features/generate', content: myContent, form: dojo.byId('uploadForm'), handleAs: 'json', load: dojo.hitch(this, function (response) { if (response.error) { errorHandler(response.error); return; } dojo.byId('upload-status').innerHTML = '<b>Loaded: </b>' + response.featureCollection.layers[0].layerDefinition.name; addShapefileToMap(response.featureCollection); }), error: dojo.hitch(this, errorHandler) }); } function errorHandler(error) { dojo.byId('upload-status').innerHTML = "<p style='color:red'>" + error.message + "</p>"; } function addShapefileToMap(featureCollection) { //add the shapefile to the map and zoom to the feature collection extent //If you want to persist the feature collection when you reload browser you could store the collection in //local storage by serializing the layer using featureLayer.toJson() see the 'Feature Collection in Local Storage' sample //for an example of how to work with local storage. var fullExtent; var layers = []; dojo.forEach(featureCollection.layers, function (layer) { var infoTemplate = new esri.InfoTemplate("Details", "${*}"); var layer = new esri.layers.FeatureLayer(layer, { infoTemplate: infoTemplate }); //associate the feature with the popup on click to enable highlight and zoomto dojo.connect(layer,'onClick',function(evt){ map.infoWindow.setFeatures([evt.graphic]); }); //change default symbol if desired. Comment this out and the layer will draw with the default symbology changeRenderer(layer); fullExtent = fullExtent ? fullExtent.union(layer.fullExtent) : layer.fullExtent; layers.push(layer); }); map.addLayers(layers); map.setExtent(fullExtent.expand(1.25), true); dojo.byId('upload-status').innerHTML = ""; } function changeRenderer(layer) { //change the default symbol for the feature collection for polygons and points var symbol = null; switch (layer.geometryType) { case 'esriGeometryPoint': symbol = new esri.symbol.PictureMarkerSymbol({ 'angle':0, 'xoffset':0, 'yoffset':0, 'type':'esriPMS', 'url':'http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png', 'contentType':'image/png', 'width':20, 'height':20 }); break; case 'esriGeometryPolygon': symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([112, 112, 112]), 1), new dojo.Color([136, 136, 136, 0.25])); break; } if (symbol) { layer.setRenderer(new esri.renderer.SimpleRenderer(symbol)); } } </script> </head> <body class="claro"> <div id="mainWindow" dojotype="dijit.layout.BorderContainer" style="width:100%; height:100%;"> <div dojotype="dijit.layout.ContentPane" id="rightPane"> <div style='padding-left:4px;'> <p> Add a zipped shapefile to the map.</p><p>Visit the <a target='_blank' href="http://help.arcgis.com/en/arcgisonline/help/#/About_shapefiles/010q000000m2000000"/>About Shapefiles</a> help topic for information and limitations.</p> <form enctype="multipart/form-data" method="post" id="uploadForm"> <div class="field"> <label class="file-upload"> <span><strong>Add File</strong></span> <input type="file" name="file" id="inFile" /> </label> </div> </form> <span class="file-upload-status" style="opacity:1;" id="upload-status"></span> <div id="fileInfo"> </div> </div> </div> <div id="mapDiv" style="height:500px; width:500px; border:1px solid black"></div> </div> </body> </html>
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
