The Geocoding Plugin for Leaflet makes it easy to send requests to the MapQuest Geocoding API Web Service, receive the results, and display the result on a map. If you are new to the MapQuest Plugins for Leaflet, you'll want to look at the Getting Started section in the Leaflet Plugins documentation. In order to use the Geocoding Plugin, you will need to include the Maps Plugin library as well as the Leaflet library and associated CSS files.
This documentation assumes that you have basic knowledge of Leaflet. To begin using the MapQuest plugins for Leaflet, you must first add the following to the head section of your page: This will load the core Leaflet library and CSS:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>Next, load the MapQuest Maps plugin for Leaflet and MapQuest Geocoding plugin for Leaflet and replace KEY with your API key.
<script src="https://www.mapquestapi.com/sdk/leaflet/v2.2/mq-map.js?key=KEY"></script>
<script src="https://www.mapquestapi.com/sdk/leaflet/v2.2/mq-geocoding.js?key=KEY"></script>
The following example shows how to easily geocode a single-line address and display the result on the map.
The following JavaScript code creates a map, geocodes a single-line address, and plots the result on the map:
var map = L.map('map', {
layers: MQ.mapLayer()
});
MQ.geocode({ map: map })
.search('Boston,MA');
In the body of the page, create the 'map' element, which is where the map will appear:
<div id="map"></div>The following example shows how to geocode an address that is in 5-box format and display the result on the map.
The following JavaScript code creates a map, geocodes an address that is broken into components (also called 5-box format), and plots the result on the map.
var map = L.map('map', {
layers: MQ.mapLayer()
});
MQ.geocode({ map: map })
.search({ city: 'Boston', state: 'MA' });
In the body of the page, create the 'map' element, which is where the map will appear.
<div id="map"></div>The following example shows how to use a custom POI marker icon to display the geocoding result.
The following JavaScript code creates a map, geocodes the address, and displays the result on the map using a custom POI marker icon:
var map = L.map('map', {
layers: MQ.mapLayer()
});
MQ.geocode({
map: map,
icon: L.icon({
iconUrl: 'https://www.mapquestapi.com/staticmap/geticon?uri=mcenter.png',
iconSize: [ 22, 28 ],
iconAnchor: [ 11, 28 ],
popupAnchor: [ 0, -22 ]
})
}).search('Boston,MA');
In the body of the page, create the 'map' element, which is where the map will appear:
<div id="map"></div>
The following example shows how show a geocode result using a POI marker with attached popup.
The following JavaScript displays a geocoding result using a POI marker and popup:
var map = L.map('map', {
layers: MQ.mapLayer()
});
MQ.geocode().search('san francisco ca').on('success', function(e) {
var best = e.result.best,
latlng = best.latlng;
map.setView(latlng, 12);
L.marker([ latlng.lat, latlng.lng ])
.addTo(map)
.bindPopup('<strong>' + best.adminArea5 + ', ' + best.adminArea3 + '</strong>
is located here.')
.openPopup()
});
In the body of the page, create the 'map' element, which is where the map will appear:
<div id="map"></div>The following example shows how to display geocoded location information inside of a popup (using L.Popup).
The following JavaScript code creates a map and event listener and displays the geocoded location information in a popup:
var map = L.map('map', {
layers: MQ.mapLayer()
});
MQ.geocode().search('san francisco ca').on('success', function(e) {
var best = e.result.best,
latlng = best.latlng;
map.setView(latlng, 12);
L.popup({ closeButton: false })
.setLatLng(latlng)
.setContent('<strong>' + best.adminArea5 + ', ' + best.adminArea3 + '</strong>
is located here.')
.openOn(map);
});
In the body of the page, create the 'map' element, which is where the map will appear:
<div id="map"></div>The following example shows how to use reverse geocoding to display address information for points clicked on the map, if information is available. Reverse geocoding involves passing in a lat/lng and returning address information based off the location. Since clicking on the map returns a lat/lng object, we can reverse geocode and display the address information of the clicked location.
The following JavaScript code creates a map and adds the necessary event listeners to listen for clicks on the map, so that results are processed and displayed on the map on each click:
var popup = L.popup(),
geocode,
map;
map = L.map('map', {
layers: MQ.mapLayer(),
center: [ 38.890385, -77.031989 ],
zoom: 14 })
.on('click', function(e) {
popup.setLatLng(e.latlng).openOn(this);
geocode.reverse(e.latlng);
});
geocode = MQ.geocode().on('success', function(e) {
popup.setContent(geocode.describeLocation(e.result.best));
});In the body of the page, create the 'map' element, which is where the map will appear:
<div id="map"></div>The following example shows how to geocode multiple locations at once and display the result on the map as well as additional address information on the page.
The following JavaScript code creates a map, makes the batch geocoding request, parses the response and displays the results on the map as well as displaying additional address information on the page:
MQ.geocode().search([
'portland or',
'flagstaff az',
'denver co'
])
.on('success', function(e) {
var results = e.result,
html = '',
group = [],
features,
marker,
result,
latlng,
prop,
best,
val,
map,
r,
i;
map = L.map('map', {
layers: MQ.mapLayer()
});
for (i = 0; i < results.length; i++) {
result = results[i].best;
latlng = result.latlng;
html += '<div style="width:300px; float:left;">';
html += '<p><strong>Geocoded Location #' + (i + 1) + '</strong></p>';
for (prop in result) {
r = result[prop];
if (prop === 'displayLatLng') {
val = r.lat + ', ' + r.lng;
} else if (prop === 'mapUrl') {
val = '<br /><img src="' + r + '" />';
} else {
val = r;
}
html += prop + ' : ' + val + '<br />';
}
html += '</div>';
// create POI markers for each location
marker = L.marker([ latlng.lat, latlng.lng ])
.bindPopup(result.adminArea5 + ', ' + result.adminArea3);
group.push(marker);
}
// add POI markers to the map and zoom to the features
features = L.featureGroup(group).addTo(map);
map.fitBounds(features.getBounds());
// show location information
L.DomUtil.get('info').innerHTML = html;
});
In the body of the page, create the 'map' element, which is where the map will appear:
<div id="map"></div>Also, in the body of the page, create the 'info' element, which is where the location information will be displayed:
<div id="info"></div>