How to add shapefile without ArcGIS Online?

[StephenLam]

Refering to this sample, I can do the things as expected. However, my ArcGIS Server and client PC cannot go to the internet, so can I setup the same thing in my intranet environment or can I just simply enable it in my ArcGIS manager? Thanks.

[JeffJacobson]

You might be able to use this library:

mbostock/shapefile · GitHub

[StephenLam]

Thanks for your reply! Is this written in Node.js? I am not sure if I can setup the Node.js in my servers, but is there any other library, server object extension or sample to do the same thing also?

[TimWitt2]

Stephen,

you can always host the javascript API locally.

See the last paragraph here: Get the ArcGIS API for JavaScript | Guide | ArcGIS API for JavaScript

Hope this helps!

Tim

[JeffJacobson]

I didn't notice it was designed for Node.js.

There are other JavaScript libraries for shapefiles on GitHub, though.

Based on its documentation it looks like shapefile-js is designed to work in a browser.

[PaulCrickard · Accepted solution]

Use Leaflet.js map with leaflet.shapefile at calvinmetcalf/leaflet.shapefile · GitHub  it requires shapefile JS. Then you create a map as in the code below. In the zip I have 4 shapefiles with points and polygons. And you can use ESRI's leaflet plugin for their other stuff if you want. I am over the ESRI JavaScript API - I hate DOJO. It's like they love huge things like Flex and Silverlight and now DOJO for all the fancy widgets. Pretty over functional.

var m = L.map('map').setView([ 35.10418, -106.62987],8);

var watercolor = L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg',{attribution:'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'}).addTo(m);

var shpfile = new L.Shapefile('apsschools.zip',{onEachFeature:function(feature, layer) {

    if (feature.properties) {

  layer.bindPopup(Object.keys(feature.properties).map(function(k){

  return k + ": " + feature.properties ;

  }).join("<br />"),{maxHeight:200});

    }

  }});

         shpfile.addTo(m);

         shpfile.once("load", function(){

          console.log("finished loading shapefile");

         });

[StephenLam]

Thanks Paul, It works! Can this API convert the geometry based on my coordinate system of shape file?

I also don't like DOJO as it is huge size and slow performance....

[PaulCrickard]

My shapefile is in state plane and it converted automatically. If you want to read it back in the original projection, use something like proj4js.

[BaizuraNapiah]

hey paul, thanks for the codes, it works like a charm

but how to change the outline of the shapefile? like how to customize it to another color and change it from watercolor to a better outline

hope you can help, thanks