Add shapefile from a local file to a JS API map

Question

Using ArcGIS.com's Map Viewer it's possible for the user to add a local shapefile to the map, using an Add Data approach.

Is it possible to add this functionality to an ArcGIS Server map built on the JavaScript API?

(I posted this on the ESRI forum but haven't had a reply yet. I'm hoping the GIS.SE experts will know the answer)

Answer 1

Two separate approaches I would take:

1 - Write your own web service to parse a shapefile and return it as a JSON representation. I would write the web service in .NET as I am most familiar with it. Use a .NET ShapeFile library to parse the uploaded shapefile (you'll probably want to take ESRI's approach and upload everything as a zip file, instead of uploading multiple files to cover the shp/prj/shx/dbf). Once you have the shapefile parsed, you'll need to write out the geometries and attributes as JSON. To make your life easier on client-side, format the JSON as a ArcGIS JS API FeatureCollection. That way when you have the returned data in JS, you don't need to write yet another parse method to convert it to a FeatureCollection. Finally, add the returned FeatureCollection to a graphics layer in your JS API map.

The downside to this approach is that you have to write server code, and you have to run the service on your own server. You'll also be limited to how many features you can parse and return, as the browser will not appreciate being sent 1000s of geometries to display in the graphics layer.

2 - try to reverse engineer ESRI's JS code to figure out how they upload the zip file to their server, and afterwards how they retrieve it. You should be able to do the upload easily enough, which should add the data to your ArcGIS Online map. I'm not certain about the second part though. If you're NOT using an ArcGIS Online map however, this is certainly not the way to go.

Starting points: http://www.arcgis.com/home/js/esri/arcgisonline.js is the file you want to examine. Run the file through JS Beautifier, and look for the following 'class':

esri.arcgisonline.sharing.dijit.dialog.AddLayerFromFileDlg

As you can see, they upload the zip file by using dojo.io.iframe.send after which ESRI's servers parse the file and add it to ArcGIS Online.

The drawback with this method is that you may spend a long time and still come to a dead end. Benefit is that you don't need to write or run server-side code.

There are other approaches, such as uploading the shapefile and adding it an existing map service in ArcGIS server, but those are more complex.

Answer 2

The ArcGIS.com Map Viewer is built with the JavaScript API, so it certainly must be possible. The latest version of the JSAPI includes ArcGIS.com integration, so the first option to explore might be to simply use an arcgis.com map embedded into your web application.

If you are going to try to create your own capabilities, you might want to take a look at this sample as a start on file access (you do not have to use drag and drop): http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/exp_dragdrop.html

File access is not trivial with the multifile shapefile, keep that in mind.

The next difficult part is parsing the shapefile once you get it uploaded.

And while an older application, the Shapefile Viewer might give a lead on how to display shapefiles once you get them uploaded: http://blogs.esri.com/Dev/blogs/apl/archive/2009/08/10/No-Download-Required_3A00_-View-Data.gov-Shapefiles-Directly-In-Your-Browser.aspx

There are other options out there (just search for "esri javascript shapefile"), but I have not used any so I cannot make any recommendations.

Answer 3

maybe you could have a look at this : http://github.com/RandomEtc/shapefile-js

I've received a Good Subjective, Bad Subjective Stackexchange recomendetion. I don't know why my answer seems useless, but if it's enough to write some more lines, here they are :)