topic Re: Geocode CSV in JavaScript in ArcGIS JavaScript Maps SDK Questions

Geocode CSV in JavaScript

HeathAnderson — Fri, 05 Sep 2014 14:43:13 GMT

I am trying to geocode a list of addresses from a CSV. I know that there is a drag and drop option that works well if you have lat long, but I only have addresses. I want my coworkers to be able to save an xls as a csv then in the JS app browse to the CSV and run the gp model or drag and drop the csv into the map and kickoff the gp tool. The service is upload enabled, but I am struggling getting the correct code down. Has anyone done this before where they can point me in the correct direction.

Cheers,

Heath

Re: Geocode CSV in JavaScript

TracySchloss — Fri, 05 Sep 2014 18:30:42 GMT

I don't believe ESRI licensing allows batch geocoding in this manner. That is part of an ArcOnline subscription.

Re: Geocode CSV in JavaScript

JeffJacobson — Fri, 05 Sep 2014 21:27:06 GMT

This document describes what you are allowed to do with free vs. paid ArcGIS Online Geocode services. If you are using your own geocoding services then, of course, this does not apply to you.

Another alternative is the MapQuest Open Geocoding API Web Service.

Re: Geocode CSV in JavaScript

TracySchloss — Fri, 05 Sep 2014 21:44:07 GMT

It sounds like a bit of a gray area. If you aren't keeping the results beyond the session, then are you meeting the definition of 'batch'? For myself, I have used the geocoder just as a means for getting the map focused to a particular area.

It might be OK in this scenario, but of course the next request from the user could be 'now I want to keep what I'm seeing' which just crosses over to 'not OK' without use of a subscription.

Re: Geocode CSV in JavaScript

JeffJacobson — Fri, 05 Sep 2014 21:50:18 GMT

It looks like the free version only allows one address per request.

Re: Geocode CSV in JavaScript

JeffJacobson — Fri, 05 Sep 2014 21:53:15 GMT

Here's a CSV-Reader JavaScript library that will allow the web browser to read the CSV file and convert it into JavaScript objects or arrays.

Re: Geocode CSV in JavaScript

HeathAnderson — Mon, 08 Sep 2014 16:00:18 GMT

I am not sure that I clearly defined my problem. I have a Geocode service running on our GIS Server in addition to a model that uses that same Geocode Service but creates an output shapefile and CSV table with matched addresses. I want my coworkers to be able to click a button browse to a CSV with "Name", "Address", "City", "State", and "ZIP" as the column headers, click ok and the Geocoder Service will run. This is what i have found from the REST API help page

Syntax:

{ "records"  : [ { "attributes" : {"<OBJECTID>" : "<OID11>","<field1>" : "<value11>", "<field2>" : "<value12>", "<field3>" : "<value13>"} }, { "attributes" : {"<OBJECTID>" : "<OID21>","<field1>" : "<value21>", "<field2>" : "<value22>", "<field3>" : "<value23>"} } ] }

Example 1:

{ "records": [ { "attributes": { "OBJECTID": 1, "STREET": "440 Arguello Blvd", "ZONE": "94118" } }, { "attributes": { "OBJECTID": 2, "STREET": "450 Arguello Blvd", "ZONE": "94118" } } ] }

Do I need to create an input type as file, assign it to variable and then pass in the variable as the input parameters?

Re: Geocode CSV in JavaScript

PaulCrickard1 — Mon, 08 Sep 2014 22:58:59 GMT

This uses Leaflet.js and makes an AJAX call to your GIS Service on ArcServer. Just change the URL to the location of your service. You can drag the textfile to the map and it will put markers on the map. And change the map center coordinates so it is where you want to be. Mine is in Albuquerque. This uses Drag and Drop functionality in HTML5 so you need a new browser - just use chrome.

My address file looks like this:

7520 Corona Ave NE

600 2nd St NW

6200 Paseo Del-Norte

3805 Northern Blvd NE

3701 Constitution Ave NE

320 Yale Boulevard SE

6001 Lomas Blvd NE

My HTML File:

<html>

<head>

<style>

#map{

height: 100%;

width:100%;

}

</style>

</head>

<body>

var map = L.map('map',

{

center: [35.10418, -106.62987],

zoom: 9

});

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

function handleFileSelect(evt) {

evt.stopPropagation();

evt.preventDefault();

var files = evt.dataTransfer.files; // FileList object.

var reader = new FileReader();

reader.onload = function(event) {

var temp=event.target.result;

var text=temp.replace( /\n/g, "," );

var c=text.split(",");

for(i=0;i<c.length;i++){

url1="http://YourDomain/ArcGIS/rest/services/AddressLocator/GeocodeServer/findAddressCandidates?Street=";

url2=String(c);

url3="&outFields=&outSR=4326&f=pjson";

url=url1.concat(url2,url3);

var xhReq = new XMLHttpRequest();

xhReq.open("GET", url, false);

xhReq.send(null);

var serverResponse = xhReq.responseText;

var d=JSON.parse(serverResponse);

if(typeof d.candidates[0] == 'undefined'){alert("error in address: "+url2);}

else{

L.marker([parseFloat(d.candidates[0].location.y),parseFloat(d.candidates[0].location.x)]).addTo(map).bindPopup(url2);

}

var s = reader.readAsText(files[0],"UTF-8");

}

function handleDragOver(evt) {

evt.stopPropagation();

evt.preventDefault();

evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.

}

// Setup the dnd listeners.

var dropZone = document.getElementById('map');

dropZone.addEventListener('dragover', handleDragOver, false);

dropZone.addEventListener('drop', handleFileSelect, false);

</script>

</body>

</html>

Re: Geocode CSV in JavaScript

HeathAnderson — Tue, 09 Sep 2014 19:23:10 GMT

Works great, thank you.

Took a while to figure out that you can't have <!DOCTYPE html> on your page. You must either delete it or comment it out. Does you know why this is? The page still functions correctly on IE, Chrome, and Firefox.

Re: Geocode CSV in JavaScript

PaulCrickard1 — Tue, 09 Sep 2014 19:42:49 GMT

Don't know why <!DOCTYPE html> doesn't work. It is supposed to sit above the <html> tag and tell the browser it is HTML 5.

Glad it works for you.

Re: Geocode CSV in JavaScript

LangdonSanders2 — Wed, 12 Aug 2015 18:00:18 GMT

Thank you Paul! This is incredibly helpful. I appreciate you posting your code and lightweight use of Leaflet.

Re: Geocode CSV in JavaScript

ChrisSmith7 — Sat, 11 Dec 2021 23:42:54 GMT

One thing though - since we're talking about batch processing - this method looks like it will parse the CSV and make a geocoding request on each address... not batch per se. There is a way to make a batch request - we use our own locator and generated an ArcGIS geocoding service to geocode in batch, e.g.:

{"records":[{"attributes":{"UID": 33549,"STREET": "123 Main Street","CITY": "Beverly Hills","STATE":"CA","ZIP":"90210",}},
{"attributes":{"UID": 30520,"STREET": "321 Main Street","CITY": "Beverly Hills","STATE":"CA","ZIP":"90210",}},
{"attributes":{"UID": 8391,"STREET": "987 2nd Street","CITY": "Beverly Hills","STATE":"CA","ZIP":"90210",}},
{"attributes":{"UID": 33512,"STREET": "1001 1st Street","CITY": "Beverly Hills","STATE":"CA","ZIP":"90210",}}]}

Which generate a response like this (note - using a fake data and fake response):

{
"spatialReference": {
  "wkid": 4326,
  "latestWkid": 4326
},
"locations": [
  {
  "address": "",
  "location": {
  "x": "NaN",
  "y": "NaN"
  },
  "score": 0,
  "attributes": {
  "ResultID": -1,
  "Status": "U",
  "Score": 0,
  "Match_addr": "",
  "Side": "",
  "AddNum": "",
  "AddNumFrom": "",
  "AddNumTo": "",
  "StPreDir": "",
  "StPreType": "",
  "StName": "",
  "StType": "",
  "StDir": "",
  "Nbrhd": "",
  "City": "",
  "Subregion": "",
  "Region": "",
  "Postal": "",
  "PostalExt": "",
  "Country": "",
  "LangCode": "",
  "Addr_type": "",
  "StreetID": "",
  "Distance": 0,
  "X": 0,
  "Y": 0,
  "DisplayX": 0,
  "DisplayY": 0,
  "Xmin": 0,
  "Ymin": 0,
  "Xmax": 0,
  "Ymax": 0
  }
  },
  {
  "address": "",
  "location": {
  "x": "NaN",
  "y": "NaN"
  },
  "score": 0,
  "attributes": {
  "ResultID": -1,
  "Status": "U",
  "Score": 0,
  "Match_addr": "",
  "Side": "",
  "AddNum": "",
  "AddNumFrom": "",
  "AddNumTo": "",
  "StPreDir": "",
  "StPreType": "",
  "StName": "",
  "StType": "",
  "StDir": "",
  "Nbrhd": "",
  "City": "",
  "Subregion": "",
  "Region": "",
  "Postal": "",
  "PostalExt": "",
  "Country": "",
  "LangCode": "",
  "Addr_type": "",
  "StreetID": "",
  "Distance": 0,
  "X": 0,
  "Y": 0,
  "DisplayX": 0,
  "DisplayY": 0,
  "Xmin": 0,
  "Ymin": 0,
  "Xmax": 0,
  "Ymax": 0
  }
  },
  {
  "address": "",
  "location": {
  "x": "NaN",
  "y": "NaN"
  },
  "score": 0,
  "attributes": {
  "ResultID": -1,
  "Status": "U",
  "Score": 0,
  "Match_addr": "",
  "Side": "",
  "AddNum": "",
  "AddNumFrom": "",
  "AddNumTo": "",
  "StPreDir": "",
  "StPreType": "",
  "StName": "",
  "StType": "",
  "StDir": "",
  "Nbrhd": "",
  "City": "",
  "Subregion": "",
  "Region": "",
  "Postal": "",
  "PostalExt": "",
  "Country": "",
  "LangCode": "",
  "Addr_type": "",
  "StreetID": "",
  "Distance": 0,
  "X": 0,
  "Y": 0,
  "DisplayX": 0,
  "DisplayY": 0,
  "Xmin": 0,
  "Ymin": 0,
  "Xmax": 0,
  "Ymax": 0
  }
  },
  {
  "address": "",
  "location": {
  "x": "NaN",
  "y": "NaN"
  },
  "score": 0,
  "attributes": {
  "ResultID": -1,
  "Status": "U",
  "Score": 0,
  "Match_addr": "",
  "Side": "",
  "AddNum": "",
  "AddNumFrom": "",
  "AddNumTo": "",
  "StPreDir": "",
  "StPreType": "",
  "StName": "",
  "StType": "",
  "StDir": "",
  "Nbrhd": "",
  "City": "",
  "Subregion": "",
  "Region": "",
  "Postal": "",
  "PostalExt": "",
  "Country": "",
  "LangCode": "",
  "Addr_type": "",
  "StreetID": "",
  "Distance": 0,
  "X": 0,
  "Y": 0,
  "DisplayX": 0,
  "DisplayY": 0,
  "Xmin": 0,
  "Ymin": 0,
  "Xmax": 0,
  "Ymax": 0
  }
  }
]
}

You could then parse the JSON and grab the x/y coords and plot. I don't have any code samples readily available, though! Just wanted to give some other ideas... To make the request, you would need to create a JSON object from the CSV and post to the server. The advantage to this would be that you're making one request for the entire file instead of one request per address.

Re: Geocode CSV in JavaScript

LangdonSanders2 — Wed, 12 Aug 2015 19:21:18 GMT

Right, I saw that it uses the findAddressCandidates method while looping over each candidate. I wonder why it Mr. Crickard chose this instead of the method you described. The response seems fairly snappy for the small sample set I have.

I intended on adding a results passed counter and other plugins like heatmap display.

How do you handle the file upload process to get your initial candidate list? (This is before it is converted to JSON or sent via the url request as shown above).