Open Plugins for Leaflet

Open Maps Plugin

The Open Maps Plugin for Leaflet makes it easy to use MapQuest map tiles in applications built with Leaflet and OpenStreetMap. If you are new to the MapQuest Plugins to Leaflet, view the Getting Started section in the Leaflet Plugins documentation. In order to use the Open Maps Plugin, include the Open Maps Plugin library as well as the Leaflet library and associated CSS files.

Most features available in our Leaflet plugins are also available in our Open Leaflet plugins, so this page will only guide you through a few basic Open Plugin features: Maps, Basic Geocoding, and Basic Routing.

For complete documentation, visit: https://developer.mapquest.com/documentation/leaflet-plugins

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 Open Maps Plugin for Leaflet and replace KEY with your AppKey.

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

Basic Map

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

 

The following JavaScript code creates a map that uses the default MapQuest OpenStreetMap 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

Advanced Map Types using the Layers Control

The following example shows how to use the layers control within Leaflet to toggle between the default Open 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>

Open Routing Plugin

The Open Routing Plugin for Leaflet makes it easy to send requests to the MapQuest Open Directions API Web Service, receive the results, and display the result on a map.

Next, load the MapQuest Open Maps plugin for Leaflet and MapQuest Open Routing plugin for Leaflet and replace KEY with your AppKey.

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

Basic routing with single-line addresses

The following example shows how to easily create a route between locations that are formatted as single-line addresses and display the route on the map.

 

The following JavaScript code creates a map, generates a route between the specified locations, and displays the route on the map.

var map,
  dir;

map = L.map('map', {
  layers: MQ.mapLayer(),
  center: [ 38.895345, -77.030101 ],
  zoom: 15
});

dir = MQ.routing.directions();

dir.route({
  locations: [
    'Boulder, CO',
    'Denver, CO'
  ]
});

map.addLayer(MQ.routing.routeLayer({
  directions: dir,
  fitBounds: true
}));

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

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

Try It Now

Open Geocoding Plugin

The Open Geocoding Plugin for Leaflet makes it easy to send requests to the MapQuest Open Geocoding API Web Service, receive the results, and display the result on a map.

Getting Started

Load the MapQuest Open Maps plugin for Leaflet and MapQuest Open Geocoding plugin for Leaflet and replace KEY with your AppKey.

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

Basic geocoding with single-line addresses

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 addresses, 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>

Try It Now