Archive | December, 2014

Add Feature With Different Projection

10 Dec

In my previous post, I showed how to query from one coordinate system and get the results in another. This was all in an effort to add a feature to an ESRI feature class in 2903 using leaflet.js in 4326. I remembered that some services allow you to specify an inSR, however, that option was missing in the addFeature capabilities.

I took a minute to read the documentation and viola! you can specify an input coordinate system. So now you can go from 4326 using leaflet.js to any coordinate system in ESRI using REST. All you need to do is pass a spatial reference in your geometry and ESRI will handle the conversion for you.

I have 4326 (lat,long) and want to send to 2903:

[{“geometry”:{“x”:-106,”y”:35,”spatialReference” : {“wkid” : 4326}}}]

This tells the service that I  know you are in WKID:2903 but I am giving you WKID:4326, deal with it. And it does!

I will admit that I am awful with projections and coordinate systems and this is a great way for me to avoid them…..for now.


Convert Coordinates in Leaflet.js: WGS84 to NAD 1983 HARN StatePlane New Mexico Central FIPS 3002 Feet

10 Dec

I wish I could do everything in WGS84, but nobody wants to change their projection – even if they have no technical reason for keeping the one they currently use – see this presentation. I have shown how from Leaflet.js I can use the ESRI REST API to add geometry to a feature class. The problem is, I can only do it using WGS84 right now.

How can I convert WKID: 4326 to WKID: 2903?

I could use Proj4Leaflet. I took a quick look but came up with an idea that I know I can implement right now. I will use the ESRI REST API. Here is how it works.

I created a service in WGS84(WKID:4326). The service allows me to use


       put e.latlng in featureclass


to add a point to my feature class. Now I have a point in WGS84 and it gave me back the objectid when it succeeded. I then use the objectid to query the featureclass and set the outSR to the projection I need (2903).

var queryparams = “objectIds=”+id+”&outSR=2903&f=json”;

var queryurl=urlToService+”/query”;
var http;
http=new XMLHttpRequest();“POST”, queryurl, true);
http.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
var k = JSON.parse(http.responseText);


I know it takes a few AJAX calls, but now I can get any projection coordinates I want, all while starting with WGS84. Having only started testing, it appears to work fast enough for me.

ESRI Attachments with ArcServer and Javascript

10 Dec
Upload Image from Phone Camera

Upload Image from Phone Camera

I was working on the following problem:

How can we take a photo of a GIS feature and put it on the network in a folder named after a property of the feature?

I started by creating a map that displayed the feature and grabbed the property value. I coded a popup for the feature that used a form to allow the uploading of images from a phone camera. The code for the form is below:

<form target=”_blank”‘+theaction+'” enctype=”multipart/form-data” method=”post” accept=”image/*;capture=camera”><input type=”file” name=”upload” multiple=”multiple”><br><input type=”submit” value=”Upload”></form>

The next step was handling the files the form sent on the server side. Using Node.js, I displayed the map and handled the file transfer from the form. The problem was solved.

Was it the best solution? No. Keeping the geometry and images separate means extra coordination – if a point is deleted we have to find the image as well.

The end goal was an image associated with a GIS feature. I came up with a better solution. We could just use a blob field and put the photo in the database as a field. As I was starting to work on it, I remembered ArcGIS allows attachments. It will accept a blob and handle the relation between the geometry and the point features. This would be the best solution.

I created my feature class and enabled attachments. Now, using the ESRI REST API, I can upload attachments (images) using a form with the action set to the url of the service:


This solution is much simpler than the Node.js solution. first, it doesn’t require a new server application – it uses our already running ArcServer. I don’t have to justify to the IT Department my use of Node.js – ArcServer is already allowed.  Finally, the relationship between the feature and the images are handled by ArcServer. If a point is deleted, so is the image.

My final application displays a map. When you click on the map a point is placed and a popup is opened. The popup contains a combo box that allows you to select the feature class for your point. Using the REST API, the point is added to the feature class. The popup content then changes to the attachment upload form. You can click the select button and the camera application is launched on your phone. Once an image is captured, you click submit and a new tab opens showing the result of the file upload. I have a separate map application that displays the points from the feature classes with a popup detailing the associated attachments for viewing and downloading.