Load ESRI Data in Map Without Plugin

12 Feb

I am sure at some point I have shown how to load ESRI REST API data in to a Leaflet.js map. I usually use a plugin called Leaflet Vector Layers which works great, but sometimes you may want to do it for yourself. In this example, I will show you how to parse points from an ESRI REST API Endpoint and map them with no additional leaflet.js plugins.

The map with filming location points

The map with filming location points

As we have done with all the REST API examples, you will make an AJAX call to the service. We will use a where clause of 1=1, an outSR of 4326, and out fields = *. We will also specify f=json so that we can easily parse it.

var params = “f=json&where=1=1&outSR=4326&outFields=*”;
var url = “http://coagisweb.cabq.gov/arcgis/rest/services/public/FilmLocations/MapServer/0/query”;

http=new XMLHttpRequest();
http.open(“POST”, url, true);
http.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
Code goes here
}}}http.send(params);

Now all we need to do is convert the response to JSON, parse out the coordinates and throw in a popup with some additional attributes. Put the code below in place of the “code goes here” line.

var result= JSON.parse(http.responseText);
console.log(Object.keys(result.features).length)
for(x=0;x<Object.keys(result.features).length;x++){
L.marker([result.features[x].geometry.y,result.features[x].geometry.x]).addTo(map).bindPopup(“<h3>”+result.features[x].attributes.Title+”</h3><h3>”+result.features[x].attributes.Type+”</h3><h3><a href='”+result.features[x].attributes.IMDbLink+”‘>IMDB</a></h3><h3>”+result.features[x].attributes.Address+”</h3><h3>”+result.features[x].attributes.Site+”</h3><h3>”+result.features[x].attributes.ShootDate+”</h3><h3>”+result.features[x].attributes.OriginalDetails+”</h3>”);

The ESRI REST API will hand back the features and geometry. Once you have them, parsing them for the coordinates is simple. For a polygon or polyline, it becomes slightly more difficult.

Adding Polygons to the map

Adding Polygons to the map

To parse a polygon, we will use the Municipal Limits data. The AJAX call is the same as for points, but we will create a geoJSON object for each boundary passing the rings as the coordinates.

for(x=0;x<Object.keys(result.features).length;x++){
var pts=result.features[x].geometry.rings;
var b = [{
“type”: “Polygon”,
“coordinates”:pts}];

var bStyle = {
“color”: “red”,
“opacity”:1,
“weight”: 10
};

var project = L.geoJson(b, { style: bStyle}).addTo(map);
}

Now you know how to parse points and polygons from an ESRI REST API Endpoint with no additional libraries or plugins.

Advertisements

2 Responses to “Load ESRI Data in Map Without Plugin”

  1. dineshramitc July 12, 2015 at 6:52 pm #

    Reblogged this on Dinesh Ram Kali..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: