Maps Plugin for Leaflet

The Maps Plugin for Leaflet makes it easy to use MapQuest map tiles in applications built with Leaflet. 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 Maps Plugin, you will need to include the Maps Plugin library as well as the Leaflet library and associated CSS files.

Getting Started

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 replace KEY with your AppKey.

<script src="https://www.mapquestapi.com/sdk/leaflet/v2.2/mq-map.js?key=KEY"></script>

Basic Map

The following example shows how to easily add MapQuest street map tiles to your application.

 

The following JavaScript code creates a map that uses the default MapQuest street map tiles:

window.onload = function() {
  L.map('map', {
    layers: MQ.mapLayer(),
    center: [ 40.731701, -73.993411 ],
    zoom: 12
  });
};

In the body of the page, create the 'map' element, which is where the map will appear:

<div id="map"></div>

Try It Now Try It On JSFiddle

Advanced Map Types Using the Layers Control

The following example shows how to use the layers control within Leaflet to toggle between the default street map, satellite, and hybrid map layers.

 

The following JavaScript code creates a map and adds a layers control that allows the user to toggle between the default street map, satellite, and hybrid map layers.

var mapLayer = MQ.mapLayer(), map;

map = L.map('map', {
  layers: mapLayer,
  center: [ 40.731701, -73.993411 ],
  zoom: 12
});

L.control.layers({
  'Map': mapLayer,
  'Hybrid': MQ.hybridLayer(),
  'Satellite': MQ.satelliteLayer(),
  'Dark': MQ.darkLayer(),
  'Light': MQ.lightLayer()
}).addTo(map);

In the body of the page, create the 'map' element, which is where the map will appear.

<div id="map"></div>

Try It Now Try It On JSFiddle

Map with Geolocation

The following example shows how to use the the HTML geolocation API to center the map at the user's location.

 

The following JavaScript code creates a map and centers the map on the users lat/lng location.

var popup = L.popup();
var geolocationMap = L.map('map', {
    layers: MQ.mapLayer(),
    center: [40.731701, -73.993411],
    zoom: 12
});

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
        var latLng = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
        };

        popup.setLatLng(latLng);
        popup.setContent('This is your current location');
        popup.openOn(geolocationMap);

        geolocationMap.setView(latLng);
    }, function () {
        geolocationErrorOccurred(true, popup, geolocationMap.getCenter());
    });
} else {
    //No browser support geolocation service
    geolocationErrorOccurred(false, popup, geolocationMap.getCenter());
}

function geolocationErrorOccurred(geolocationSupported, popup, latLng) {
    popup.setLatLng(latLng);
    popup.setContent(geolocationSupported ?
            '<b>Error:</b> The Geolocation service failed.' :
            '<b>Error:</b> This browser doesn\'t support geolocation.');
    popup.openOn(geolocationMap);
}

In the body of the page, create the 'map' element, which is where the map will appear.

<div id="map"></div>

Try It Now Try It On JSFiddle