├── README.md
├── add-shapefile.png
├── css
    ├── app.css
    └── fileupload.css
├── index.html
└── license.txt


/README.md:
--------------------------------------------------------------------------------
 1 | # add-shapefile-js
 2 | 
 3 | This ArcGIS JavaScript sample let's you navigate to a local .zip file add a shapefile to your web map. It uses the Portal API REST Generate method to create features that can be loaded into a web map application.  Learn more [here](http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/portal_addshapefile.html).
 4 | 
 5 | [View live here](http://help.arcgis.com/en/webapi/javascript/arcgis/samples/portal_addshapefile/index.html)
 6 | 
 7 | ![App](https://raw.github.com/Esri/add-shapefile-js/master/add-shapefile.png)
 8 | 
 9 | ## Features
10 | * ArcGIS Javascript and Portal API
11 | * Uses REST Generate operation to create a feature collection from the zipped shapefile 
12 | * Applies symbols
13 | * Adds features to map
14 | 
15 | ## Instructions
16 | 
17 | 1. Download and unzip the .zip file or clone the repo.
18 | 2. Web-enable the directory or copy/paste the source to your own .html file.
19 | 3. Access the .html page.
20 | 
21 | [New to Github? Get started here.](https://github.com/)
22 | 
23 | ## Requirements
24 | 
25 | * Notepad or HTML editor
26 | * A little background with Javascript
27 | * Experience with the [ArcGIS Javascript API](http://www.esri.com/) would help.
28 | 
29 | ## Resources
30 | 
31 | * [ArcGIS for JavaScript API Resource Center](http://help.arcgis.com/en/webapi/javascript/arcgis/index.html)
32 | * [ArcGIS Blog](http://blogs.esri.com/esri/arcgis/)
33 | * [twitter@esri](http://twitter.com/esri)
34 | 
35 | ## Issues
36 | 
37 | Find a bug or want to request a new feature?  Please let us know by submitting an issue.
38 | 
39 | ## Contributing
40 | 
41 | Anyone and everyone is welcome to contribute. 
42 | 
43 | ## Licensing
44 | Copyright 2012 Esri
45 | 
46 | Licensed under the Apache License, Version 2.0 (the "License");
47 | you may not use this file except in compliance with the License.
48 | You may obtain a copy of the License at
49 | 
50 |    http://www.apache.org/licenses/LICENSE-2.0
51 | 
52 | Unless required by applicable law or agreed to in writing, software
53 | distributed under the License is distributed on an "AS IS" BASIS,
54 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
55 | See the License for the specific language governing permissions and
56 | limitations under the License.
57 | 
58 | A copy of the license is available in the repository's [license.txt]( https://raw.github.com/Esri/switch-basemaps-js/master/license.txt) file.
59 | 
60 | [](Esri Tags: ArcGIS Shapefile Map Web Display)
61 | [](Esri Language: JavaScript)
62 | 


--------------------------------------------------------------------------------
/add-shapefile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/add-shapefile-js/698aa361aedc8928d913994646c6951919af4b07/add-shapefile.png


--------------------------------------------------------------------------------
/css/app.css:
--------------------------------------------------------------------------------
 1 |       html, body {
 2 |         height: 98%;
 3 |         margin: 10px 10px 5px;
 4 |         padding: 0;
 5 |         width: 98%;
 6 |       }
 7 |       body {
 8 |         background-color: #FFFFFF;
 9 |         color: #333333;
10 |         font-family:"Helvetica Neue", Helvetica, "Trebuchet MS", Arial, sans-serif;
11 |         font-size: 14px;
12 |         overflow: hidden;
13 |       }
14 |       a {
15 |         color: #336699;
16 |       }
17 |  
18 |         h1{
19 |         color: #222;
20 |         text-shadow: 0px 2px 3px #555;
21 |         }
22 | 
23 |       #rightPane {
24 |         background-color: #FCFFF5;
25 |         border-bottom-right-radius: 4px;
26 |         
27 |         border-top-right-radius:4px;
28 |         border:1px solid #222;
29 |         border-left:none;
30 |         margin: 0;
31 |         padding: 0;
32 |         width: 250px;
33 |       }
34 |       #mapCanvas {
35 |         border:1px solid #222;
36 |         border-top-left-radius:4px;
37 |         border-bottom-left-radius: 4px;
38 |         margin: 0;
39 |         padding: 0;
40 |       }
41 |       .file-upload span {
42 |         display:none;
43 |     	}
44 |      .file-upload-status {
45 |     	vertical-align: middle;
46 |     	padding: 5px 11px;
47 |     	font-size: 12px;
48 |     	color: #888;
49 |     	background: #F8F8F8;
50 |     	}


--------------------------------------------------------------------------------
/css/fileupload.css:
--------------------------------------------------------------------------------
 1 |    
 2 |     #rightPane {
 3 |         width: 170px;
 4 |     }
 5 |    /*File upload form styling */
 6 |     .field { 
 7 | 	   padding:4px 4px;
 8 | 	}
 9 |     .file-upload {
10 |     	overflow: hidden;
11 |     	display: inline-block;
12 |     	position: relative;	
13 |     	vertical-align: middle;
14 |     	text-align: center;
15 |     	border: 2px solid #666666;
16 |     	background: #444444;
17 |     	-moz-border-radius: 6px;
18 |     	-webkit-border-radius: 6px;
19 |     	border-radius: 6px;
20 |       color: #fff;
21 |       text-shadow: 0px 2px 3px #555;
22 |       cursor:pointer;
23 |       }
24 |     	
25 |     .file-upload:hover { 
26 |     	background-color: #454545;
27 |     	}
28 | 
29 |     
30 |     .file-upload input {
31 |     	position: absolute;
32 |     	top: 0;
33 |     	left: 0;
34 |     	margin: 0;
35 |     	font-size: 70px;
36 |     	opacity: 0;
37 |     	filter: alpha(opacity=0);
38 |       z-index:2;
39 |     	}
40 |     
41 |     .file-upload strong { 
42 |     	font: normal 1.75em arial,sans-serif; 
43 |     	}	
44 |     	
45 |     .file-upload span {
46 |     	position: absolute;
47 |     	top: 0;
48 |     	left: 0;
49 |     	display: inline-block;
50 | 
51 |     	padding-top: .45em;
52 |     	}
53 | 
54 |     .file-upload { height: 3em; }
55 |     .file-upload,
56 |     .file-upload span {	width: 10em; }	
57 |     
58 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 |   <head>
  4 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />
  6 |     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  7 |     <title>Add Shapefile</title>
  8 |     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">
  9 |     <link rel='stylesheet' type='text/css' href='css/app.css' />
 10 |     <!--[if !IE]> -->
 11 |     <link rel='stylesheet' type='text/css' href='css/fileupload.css' />
 12 |     <!-- <![endif]-->
 13 | 
 14 |     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
 15 |     
 16 |     <script type="text/javascript">
 17 |       var dojoConfig = {
 18 |         parseOnLoad: true
 19 |       };
 20 |     </script>
 21 |     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2">
 22 |       
 23 |     </script>
 24 |     <script type="text/javascript">
 25 |       dojo.require("esri.map");
 26 |       dojo.require("esri.layers.FeatureLayer");
 27 |       dojo.require("esri.dijit.Popup");
 28 |       dojo.require("dijit.layout.BorderContainer");
 29 |       dojo.require("dijit.layout.ContentPane");
 30 | 
 31 | 
 32 |       dojo.addOnLoad(pageReady);
 33 |       var map;
 34 |       var portalUrl = 'http://www.arcgis.com';
 35 | 
 36 |       function pageReady() {
 37 |         esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
 38 |         dojo.connect(dojo.byId("uploadForm").data, "onchange", function (evt) {
 39 |           var fileName = evt.target.value.toLowerCase();
 40 |           if (dojo.isIE) { //filename is full path in IE so extract the file name
 41 |             var arr = fileName.split("\\");
 42 |             fileName = arr[arr.length - 1];
 43 |           }
 44 |           if (fileName.indexOf(".zip") !== -1) {//is file a zip - if not notify user 
 45 |             generateFeatureCollection(fileName);
 46 |           }else{
 47 |             dojo.byId('upload-status').innerHTML = '<p style="color:red">Add shapefile as .zip file</p>';
 48 |          }
 49 |         });
 50 | 
 51 | 
 52 |         var initialExtent = new esri.geometry.Extent({
 53 |           "xmin": -14048224.31,
 54 |           "ymin": -564100.20,
 55 |           "xmax": 4776075.51,
 56 |           "ymax": 9278543.05,
 57 |           "spatialReference": {
 58 |             "wkid": 102100
 59 |           }
 60 |         });
 61 | 
 62 |         //create a popup to replace the map's info window
 63 |         var popup = new esri.dijit.Popup(null, dojo.create("div"));
 64 |         map = new esri.Map("mapCanvas", {
 65 |           extent: initialExtent,
 66 |           infoWindow: popup,
 67 |           wrapAround180: true,
 68 |           slider: false
 69 |         });
 70 | 
 71 |         dojo.connect(map, 'onLoad', function (theMap) {
 72 |           //resize the map when the browser resizes
 73 |           dojo.connect(dijit.byId('mapCanvas'), 'resize', map, map.resize);
 74 |         });
 75 | 
 76 |         var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer");
 77 |         map.addLayer(basemap);
 78 |       }
 79 | 
 80 | 
 81 |       function generateFeatureCollection(fileName) {
 82 |        
 83 |         var name = fileName.split(".");
 84 |         //Chrome and IE add c:\fakepath to the value - we need to remove it
 85 |         //See this link for more info: http://davidwalsh.name/fakepath
 86 |         name = name[0].replace("c:\\fakepath\\","");
 87 |         
 88 |         dojo.byId('upload-status').innerHTML = '<b>Loading… </b>' + name; 
 89 |         
 90 |         //Define the input params for generate see the rest doc for details
 91 |         //http://www.arcgis.com/apidocs/rest/index.html?generate.html
 92 |         var params = {
 93 |           'name': name,
 94 |           'targetSR': map.spatialReference,
 95 |           'maxRecordCount': 1000,
 96 |           'enforceInputFileSizeLimit': true,
 97 |           'enforceOutputJsonSizeLimit': true
 98 |         };
 99 | 
100 |         //generalize features for display Here we generalize at 1:40,000 which is approx 10 meters 
101 |         //This should work well when using web mercator.  
102 |         var extent = esri.geometry.getExtentForScale(map,40000); 
103 |         var resolution = extent.getWidth() / map.width;
104 |         params.generalize = true;
105 |         params.maxAllowableOffset = resolution;
106 |         params.reducePrecision = true;
107 |         params.numberOfDigitsAfterDecimal = 0;
108 |         
109 |         var myContent = {
110 |           'filetype': 'shapefile',
111 |           'publishParameters': dojo.toJson(params),
112 |           'f': 'json',
113 |           'callback.html': 'textarea'
114 |         };
115 | 
116 |         //use the rest generate operation to generate a feature collection from the zipped shapefile 
117 |         esri.request({
118 |           url: portalUrl + '/sharing/rest/content/features/generate',
119 |           content: myContent,
120 |           form: dojo.byId('uploadForm'),
121 |           handleAs: 'json',
122 |           load: dojo.hitch(this, function (response) {
123 |             if (response.error) {
124 |               errorHandler(response.error);
125 |               return;
126 |             }
127 |             dojo.byId('upload-status').innerHTML = '<b>Loaded: </b>' + response.featureCollection.layers[0].layerDefinition.name;
128 |             addShapefileToMap(response.featureCollection);
129 |           }),
130 |           error: dojo.hitch(this, errorHandler)
131 |         });
132 | 
133 |       }
134 | 
135 |       function errorHandler(error) {
136 |         dojo.byId('upload-status').innerHTML = "<p style='color:red'>" + error.message + "</p>";
137 |       }
138 | 
139 |       function addShapefileToMap(featureCollection) {
140 |         //add the shapefile to the map and zoom to the feature collection extent
141 |         //If you want to persist the feature collection when you reload browser you could store the collection in 
142 |         //local storage by serializing the layer using featureLayer.toJson()  see the 'Feature Collection in Local Storage' sample
143 |         //for an example of how to work with local storage. 
144 |         var fullExtent;
145 |         var layers = [];
146 | 
147 |         dojo.forEach(featureCollection.layers, function (layer) {
148 |           var infoTemplate = new esri.InfoTemplate("Details", "${*}");
149 |           var layer = new esri.layers.FeatureLayer(layer, {
150 |             infoTemplate: infoTemplate
151 |           });
152 |           //associate the feature with the popup on click to enable highlight and zoomto
153 |           dojo.connect(layer,'onClick',function(evt){
154 |             map.infoWindow.setFeatures([evt.graphic]);
155 |           });
156 |           //change default symbol if desired. Comment this out and the layer will draw with the default symbology
157 |           changeRenderer(layer);
158 |           fullExtent = fullExtent ? fullExtent.union(layer.fullExtent) : layer.fullExtent;
159 |           layers.push(layer);
160 |         });
161 |         map.addLayers(layers);
162 |         map.setExtent(fullExtent.expand(1.25), true);
163 |         
164 |         dojo.byId('upload-status').innerHTML = "";
165 | 
166 | 
167 |       }
168 | 
169 |       function changeRenderer(layer) {
170 |         //change the default symbol for the feature collection for polygons and points
171 |         var symbol = null;
172 |         switch (layer.geometryType) {
173 |         case 'esriGeometryPoint':
174 |           symbol = new esri.symbol.PictureMarkerSymbol({
175 |             'angle':0,
176 |             'xoffset':0,
177 |             'yoffset':0,
178 |             'type':'esriPMS',
179 |             'url':'http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png',
180 |             'contentType':'image/png',
181 |             'width':20,
182 |             'height':20
183 |           });
184 |           break;
185 |         case 'esriGeometryPolygon':
186 |           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]));
187 |           break;
188 |         }
189 |         if (symbol) {
190 |           layer.setRenderer(new esri.renderer.SimpleRenderer(symbol));
191 |         }
192 |       }
193 |    
194 |     </script>
195 |   </head>
196 |   
197 |   <body class="claro">
198 |     <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
199 |       <div data-dojo-type="dijit.layout.ContentPane" id="rightPane" data-dojo-props="region:'right'">
200 |         <div style='padding-left:4px;'>
201 |           <p>
202 |             Add a zipped shapefile to the map.</p><p>Visit the
203 |             <a target='_blank' href="http://help.arcgis.com/en/arcgisonline/help/#/About_shapefiles/010q000000m2000000"/>About Shapefiles</a> help topic for information and limitations.</p>
204 |               <form enctype="multipart/form-data" method="post" id="uploadForm">
205 |               <div class="field">
206 |                   <label class="file-upload">
207 |                       <span><strong>Add File</strong></span>
208 |                       <input type="file" name="file" id="inFile" />
209 |                   </label>
210 |               </div>
211 |               </form>
212 |               <span class="file-upload-status" style="opacity:1;" id="upload-status"></span>
213 |               <div id="fileInfo">&nbsp;</div>
214 |         </div>
215 |     </div>
216 |     <div id="mapCanvas" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>
217 |   </div>
218 | </body>
219 | 
220 | </html>
221 | 


--------------------------------------------------------------------------------
/license.txt:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/add-shapefile-js/698aa361aedc8928d913994646c6951919af4b07/license.txt


--------------------------------------------------------------------------------