Skip to content

Commit d49c055

Browse files
jgravoisjgravois
committed
sample to demonstrate how to use World Geocoding Service categories
1 parent cd83abd commit d49c055

File tree

2 files changed

+333
-138
lines changed

2 files changed

+333
-138
lines changed

‎html/geocoding/geosearch_category.html‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
6+
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
7+
<title>Find Places (by Category)</title>
8+
<link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
9+
<!-- ArcGIS API for JavaScript CSS-->
10+
<link rel="stylesheet" href="//js.arcgis.com/3.9/js/esri/css/esri.css">
11+
<!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
12+
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
13+
<link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
14+
<style>
15+
html, body, #mapDiv {
16+
height: 100%;
17+
width: 100%;
18+
}
19+
</style>
20+
21+
<!-- ArcGIS API for JavaScript library references -->
22+
<script src="//js.arcgis.com/3.9compact"></script>
23+
<script>
24+
require(["esri/map",
25+
"esri/tasks/locator",
26+
"esri/request",
27+
"esri/InfoTemplate",
28+
"esri/graphic",
29+
"esri/symbols/PictureMarkerSymbol",
30+
"esri/geometry/Multipoint",
31+
"dojo/keys",
32+
"dojo/on",
33+
"dojo/dom",
34+
"dojo/domReady!"],
35+
function(Map, Locator, esriRequest, InfoTemplate, Graphic, PictureMarkerSymbol, Multipoint, keys, on, dom) {
36+
"use strict"
37+
38+
// Create map
39+
var map = new Map("mapDiv", {
40+
basemap: "national-geographic",
41+
center: [-117.16, 32.71], //long, lat
42+
zoom: 13
43+
});
44+
45+
// Set popup
46+
var popup = map.infoWindow;
47+
// popup.anchor = "top";
48+
popup.highlight = false;
49+
popup.titleInBody = false;
50+
popup.domNode.style.marginTop = "-20px";
51+
52+
// Get symbol
53+
var symbol = new createPictureSymbol("//esri.github.io/quickstart-map-js/images/blue-pin.png", 0, 12, 13, 24);
54+
55+
// Create geoservice
56+
var geocodeService = new Locator("//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
57+
58+
// Wire events
59+
on(map, "load", function() {
60+
on(geocodeService, "address-to-locations-complete", geocodeResults);
61+
on(geocodeService, "error", geocodeError);
62+
on(dom.byId("btnSearch"),"click", geoSearch);
63+
on(dom.byId("btnClear"),"click", clearFindGraphics);
64+
on(dom.byId("cat"), "change", function(event) {
65+
geoSearch();
66+
});
67+
68+
//lets add our category manually
69+
esriRequest.setRequestPreCallback(addCategory);
70+
});
71+
72+
/*
73+
the world geocoding service now supports category searches, but there's nothing in the JS API yet to help submit the requests so for the time being we can add the parameter manually.
74+
*/
75+
function addCategory(ioArgs) {
76+
var url = location.protocol + "//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates";
77+
if (ioArgs.url == url) {
78+
ioArgs.content.category = dom.byId("cat").value;
79+
}
80+
return ioArgs;
81+
}
82+
83+
// Geocode against the user input
84+
function geoSearch() {
85+
//you can combine category searches and actual search strings, but for now lets just search by categories
86+
var searchString = "";
87+
var boundingBox;
88+
if (dom.byId('useMapExtent').checked)
89+
boundingBox = map.extent;
90+
// Set geocode options
91+
var options = {
92+
address:{"SingleLine": searchString},
93+
outFields:["Place_addr", "PlaceName"],
94+
searchExtent: boundingBox,
95+
location: map.extent.getCenter(),
96+
distance: 1
97+
}
98+
// Execute geosearch
99+
geocodeService.addressToLocations(options);
100+
}
101+
102+
// Geocode results
103+
function geocodeResults(places) {
104+
if (places.addresses.length > 0) {
105+
clearFindGraphics();
106+
// Objects for the graphic
107+
var place, attributes, infoTemplate, pt, graphic, placeName = "";
108+
// Create and add graphics with pop-ups
109+
for (var i = 0; i < places.addresses.length; i++) {
110+
place = places.addresses[i];
111+
pt = place.location;
112+
placeName = place.attributes.Place_addr ? "${address}<br/>" : '';
113+
attributes = { name:place.attributes.PlaceName, address:place.attributes.Place_addr, score:place.score, lat:pt.y.toFixed(5), lon:pt.x.toFixed(5) };
114+
infoTemplate = new InfoTemplate("${name}", placeName+"Lat/Lon: ${lat},${lon}<br/>Score: ${score}"+"<br/><a href='#' onclick='window.zoomToPlace(" + pt.x + "," + pt.y + ")'>Zoom</a>");
115+
graphic = new Graphic(pt,symbol,attributes,infoTemplate);
116+
map.graphics.add(graphic);
117+
}
118+
zoomToPlaces(places.addresses);
119+
} else {
120+
alert("Sorry, address or place not found.");
121+
}
122+
}
123+
124+
function geocodeError(errorInfo) {
125+
alert("Sorry, place or address not found!");
126+
}
127+
128+
window.zoomToPlace = function zoomToPlace(lon,lat) {
129+
var level = map.getLevel();
130+
level = level < 14 ? 14 : level + 1;
131+
map.centerAndZoom([lon,lat],level);
132+
}
133+
134+
function zoomToPlaces(places) {
135+
var multiPoint = new Multipoint();
136+
for (var i = 0; i < places.length; i++) {
137+
multiPoint.addPoint(places[i].location);
138+
}
139+
map.setExtent(multiPoint.getExtent().expand(1.5));
140+
}
141+
142+
function clearFindGraphics() {
143+
map.infoWindow.hide();
144+
map.graphics.clear();
145+
}
146+
147+
function createPictureSymbol(url, xOffset, yOffset, xWidth, yHeight) {
148+
return new PictureMarkerSymbol(
149+
{
150+
"angle": 0,
151+
"xoffset": xOffset, "yoffset": yOffset, "type": "esriPMS",
152+
"url": url,
153+
"contentType": "image/png",
154+
"width":xWidth, "height": yHeight
155+
});
156+
}
157+
}
158+
);
159+
</script>
160+
</head>
161+
<body>
162+
<div class="panel panel-primary panel-fixed">
163+
<div class="panel-heading">
164+
<h3 class="panel-title">Find Places by Category</h3>
165+
</div>
166+
<div class="panel-body">
167+
<div class="form-group">
168+
<select class="form-control" id="cat">
169+
<option value="ATM">ATM</option>
170+
<option value="Museum">Museum</option>
171+
<option value="Convention Center">Convention Center</option>
172+
<option value="Sushi">Sushi</option>
173+
<option value="Tourist Attraction">Tourist Attraction</option>
174+
<option value="Brewpub">Brewpub</option>
175+
<option value="Breakfast">Breakfast</option>
176+
<option value="Pizza">Pizza</option>
177+
<option value="Vegetarian Food">Vegetarian Food</option>
178+
</select>
179+
</div>
180+
<div class="form-inline">
181+
<div class="checkbox">
182+
<label>
183+
<input id="useMapExtent" type="checkbox" checked/> Search map only
184+
</label>
185+
</div>
186+
<button class="btn btn-success" id="btnSearch">Go</button>
187+
<button id="btnClear" class="btn btn-default">Clear</button>
188+
<br><br>More info can be found <a href="https://developers.arcgis.com/rest/geocode/api-reference/geocoding-category-filtering.htm" target="_blank">here</a>
189+
</div>
190+
</div>
191+
</div>
192+
<div id="mapDiv"></div>
193+
</body>
194+
</html>

0 commit comments

Comments
 (0)