Demos ~ Leaflet Plugins

Leaflet Plugins - Demos

This page is intended to help developers get started with MapQuest's Leaflet plugins with a little push in the right direction. Like other sample pages, this will show basic samples with code that's easy to grab using your browser's view source function. Samples below are intended to add to the samples in the user guide, not replace them. For the basics you can refer back to the Leaflet plugin user guide. Speaking of reference, here is the plugin reference. The user guide, reference, FAQ, and these samples should help answer most questions. But if there are more, you can ask directly in the forum.

As simple as it gets. This shows the very basic map that just loads tiles with no frills. I generally use this to start any new project.

This shows the very basic map that just loads tiles with no frills but with two of the most often used features: a layer control and markers. This sample adds the satellite layer along with the basic map layer to a layer control. It also adds a basic marker and customized marker to an additional layer which is also added to the layer control. This is also a good jumping point for fresh pages.


Draw shapes on the map. Using the Leaflet.draw plugin that Vladimir recommends, this sample shows how to get it going along with the MapQuest tiles.

Edit an existing shape. No, not edit withdrawl, silly. Once you draw shapes you can get the shape points and save them. This sample shows how to start with that saved shape and run with it.

make large numbers of markers far more visible. Vladimir's other recommended plugin makes putting large numbers of markers on the map easy to do, see, and interact with.

This plugin is another method to display a larger data set in an easily understandable visual format.

Beautiful animations. Use this pluginfor the Raphael sdk on your maps to animate stuff.

Map a route allowing the user to encourage the route toward or away from user controlled points. Click on the map to create points then modify the radius and how much the point should attract or detract the route. Control points are an advanced function of the Directions API.

If the users allows it, show their location on the map.

There are several events tied to the map that can be used for more interactive maps. This sample grabs and displays the lat/lng as the mouse moves across the map.

Here is a slightly less simple but far more functional sample allowing a user to search around an origin for types of businesses in a default Search api table. Then the user can route from the origin to any of the search results. It's ready to use with some nice new logos and style slapped on.

After you've created a fantastic map, post it in the forum so we can all see your mapping skills. Then check out this mashup with the awesome Untappd thepub search that finds checkin events close to any location. See who drinks what and, most importantly, where. Search follows map panning. Go share your feeling of accomplishment, your coding pride, and a few cold(ish) hoppy drinks with other happy people! Check in your beers. Then take a cab home.