Problem:
I needed a map embedded on a form I was working on to pinpoint a location onto an ArcGIS map. As far as ArcGIS, there were plenty of examples using latitude and longitude, but no examples using a standard address. This project seemed easier than it really was.
Solution:
I’ve decided to use the Javasript API to solve this problem and it worked like a charm. Those who are new to ArcGIS should find this post helpful if you want to simply point to a location using an address. Let’s get right to the code.
Code:
This is just very basic markup to show what files to include and what form elements to use.
HTML (index.html):
<html>
<head>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<style>
html, body, #myMap {
height: 400px;
width: 400px;
margin: 0;
padding-top: 35px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://js.arcgis.com/3.18/"></script>
<script src="index.js"></script>
</head>
<body>
<input type="text" id="address" placeholder="address" value="380 New York St." /><br />
<input type="text" id="city" placeholder="city" value="Redlands"/><br />
<select id="state">
<option value="0" >select state</option>
<option value="Alabama">Alabama</option>
<option value="California" selected>California</option>
</select><br />
<input type="text" id="postalCode" placeholder="postal code" value="92373" /><br />
<input type="button" id="mapIt" value="Map It!" />
<div id="myMap"></div>
</body>
</html>
JS (index.js):
I wrapped my code in a class so it’s easy to move from one project to another. As you can see, I simply instantiate the class and execute the “init” function.
function LocationMap(){
var self = this;
var map;
self.initMap = function(){
require(["esri/map"], function(Map){
map = new Map("myMap", {
basemap: "topo",
center: [-117.19, 34.05],
zoom: 13
});
});
}
self.addAddressToMap = function(fullAddress){
require([
"esri/graphic",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/TextSymbol",
"esri/symbols/Font",
"esri/tasks/locator",
"dojo/_base/Color",
"dojo/_base/array",
"dojo/dom",
"dojo/on",
"dojo/parser",
"dojo/ready",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane"],
function (Graphic,
SimpleMarkerSymbol, TextSymbol, Font, Locator,
Color, array,
dom, on, parser, ready,
BorderContainer, ContentPane) {
ready(function () {
var locator = new Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
if(map.graphics){
map.graphics.clear();
}
locator.addressToLocations({
address: {
SingleLine: fullAddress
},
outFields: ["Loc_name"]
});
locator.on("address-to-locations-complete", function(candidates){
var symbolMarker = new esri.symbol.PictureMarkerSymbol("https://s3.amazonaws.com/webapps.esri.com/map-pins/Pin_results_17x32.png", 17, 32);
var candidate = candidates.addresses[0];
var attributesCandidate = {
address: candidate.address,
score: candidate.score,
locatorName: candidate.attributes.Loc_name
};
var geometryLocation = candidate.location;
var graphicResult = new Graphic(geometryLocation, symbolMarker, attributesCandidate);
map.graphics.add(graphicResult);
map.centerAndZoom(geometryLocation, 15);
});
});
});
}
self.init = function(){
self.initMap();
$('#mapIt').click(function(){
var address = $('#address').val();
var city = $('#city').val();
var postalCode = $('#postalCode').val();
if(address && city && postalCode){
var fullAddress = (address + '. ' + city + ', ' + postalCode);
self.addAddressToMap(fullAddress);
}
});
}
return self;
}
$(document).ready(function(){
var locMap = new LocationMap();
locMap.init();
});
Conclusion:
It was hard to find examples of something so simple online, including the ArcGIS sample code online. I tried to make this a little easier for those interested in learning ArcGIS.
I hope this helps somebody.
Comments
Post a Comment