JavaScript Class for ESRI REST API

29 Jul

Warning: This is sloppy. I have been slowly piecing this together. I could always use ESRI.leaflet plugin, but have had issues with it and am intentionally going another route. I have also used the ESRI JavaScript API, but am also intentionally not using it here.

 

I have been using Leaflet.js as the front end to my ArcServer. I use the ESRI REST API to handle all my CRUD. After copying and parting a bunch of AJAX, I decided to try to start writing a class. I combine this with the Leaflet Vector Layers Plugin available at http://jasonsanford.github.io/leaflet-vector-layers/documentation/#docs-ags. the plugin handles displaying my features and grabbing the properties (OBJECTID in particular).

Here is my attempt at a class.

 

function CRUD(url){ //url should look like: http://MyServer/ArcGIS/rest/services/PaulFeaturewgs84/FeatureServer/1

this.url=url;
}//end function CRUD
CRUD.prototype={

add: function(addFeature){ //needs to look like [{“geometry”:{“x”:-106,”y”:35}, “attributes”:{“name”:”paul”,”number”:123}}]
var addparams = “features=”+addFeature+”&f=json”;
var addurl=this.url+”/addFeatures”;
alert(addFeature);
var http;
if (window.XMLHttpRequest){
http=new XMLHttpRequest();
}

else {
http=new ActiveXObject(“Msxml2.XMLHTTP”);
}
http.open(“POST”, addurl, 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) {
console.log(http.responseText);
}
}
http.send(addparams);

}, //end ADD

update: function(updateFeature){
var updateparams = “features=”+updateFeature+”&f=json”;
var updateurl=this.url+”/updateFeatures”;
var http;
if (window.XMLHttpRequest){
http=new XMLHttpRequest();
}

else {
http=new ActiveXObject(“Msxml2.XMLHTTP”);
}
http.open(“POST”, updateurl, 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) {
console.log(http.responseText);
}
}
http.send(updateparams);
}, //end UPDATE

delete: function(deleteFeature){ //takes objectid
var deleteparams = “objectIds=”+deleteFeature+”&f=json”;
var deleteurl=this.url+”/deleteFeatures”;
var http;
if (window.XMLHttpRequest){
http=new XMLHttpRequest();
}

else {
http=new ActiveXObject(“Msxml2.XMLHTTP”);
}
http.open(“POST”, deleteurl, 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) {
console.log(http.responseText);
}
}
http.send(deleteparams);
}, //end DELETE

query: function(){

} // end QUERY
};//end CRUD.prototype

//USE CASE for DELETE and ADD
//var crud = new CRUD(“http://MyServer/ArcGIS/rest/services/PaulFeaturewgs84/FeatureServer/0”);
//DELETE WORKS
//crud.delete(43);
//ADD WORKS
//var pointToAdd='[{“geometry”:{“x”:-106.79192,”y”:35.06148}, “attributes”:{}}]’;
//crud.add(pointToAdd);
//USE FOR UPDATE
//UPDATE WORKS requires OBJECTID
//var crud2 = new CRUD(“http://MyServer/ArcGIS/rest/services/featuretestproperties/FeatureServer/0”);
//var feature='[{“geometry”:{“x”:-106.73975,”y”:35.12765}, “attributes”:{“OBJECTID”:57,”name”:”Paul”,”number”:123}}]’;
//crud2.update(feature);

 

 

 

to delete a feature, I use the clickEvent from the Vector Layer Plugin to grab it, then you can pass it to the delete function:

clickEvent: function (feature, e) {
objectid=feature.properties.OBJECTID;

crud.delete(objectid);

 

to add a feature, I use the map.on(‘click,function) in Leaflet to get the geometry. I parse out sloppily like this (subTwo[0] is lon or x and theLat[1] is lat or y. then you can pass feature properties however you want:

 

map.on(‘click’,function(x){

theString=String(x.latlng);
subOne=theString.split(“,”);
theLat=subOne[0].split(“(“);
subTwo=subOne[1].split(“)”);
latAsFloat=parseFloat(theLat[1]);
longAsFloat=parseFloat(subTwo[0]);

}

when I want to add properties and not just a point, I use a popup on dblclick:

popup = L.popup()
.setLatLng(x.latlng)
.setContent(‘<h3>Add Point</h3>Name:<input type=”text” id=”name”><br>Number:<input type=”text” id=”number”><br><button onclick=”crud.add(the point object)”>Add Point</button>’)
.openOn(map);

to update an object, I set the popup template in the Vector Layer plugin and call the function:

popupTemplate: ‘<h3>{number}</h3>Name:<input type=”text” id=”newname”><button onclick=”crud.update(feature)”>Update Name?</button>’,

Advertisements

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: