JavaScript: Leaflet

Leaflet is a JavaScript library for embedding maps with a smaller footprint than embedding a GeoPlatform map. As a result, it is a good choice for those with typical (read: basic) embedding needs.

Leaflet’s primary focus is on simplicity, performance, and usability of online maps. The core library has only basic functionality, which is enough for most real-life use cases. The library can be extended with plugins that are easy to develop and add on top of the core library. Additionally, Leaflet was developed from scratch with mobile support in mind. Because of this, Leaflet has been one of the most popular API’s among mobile application developers.

Leaflet is easy to use and has a well-documented API, along with simple source code that is available on GitHub. As a result of its focus on performance, usability, simplicity, small size, and mobile support, it is significantly less complicated than embedding a GeoPlatform map.

Significant features of Leaflet

Lightweight: only around 34 KB of code
GeoJSON layers, markers (provision of custom markers), and pop-ups, CSS pop-ups and controls (easy designing and animation)
Use with other map providers such as Open Street Map.
Cross-browser support
Vector layers, raster layers, image layers, WMS layers, layer groups, scroll wheel zoom, double click zoom, zoom to area (shift-drag), keyboard navigation

Benefits of using Leaflet

Simple, fast, and reusable code
No external dependencies, tile layers and drag panning with inertia, and multi-touch support
Very nice default design for popups, markers, layers and other map controls, tile layers and markers are well supported with retina resolutions
Broadening our geospatial platforms/software

Criteria for using Leaflet over the Geoplatform

When you have limited geospatial knowledge
When you need to create a simple map to insert in a webpage
When you are displaying a single point on a map or a small collection of points (e.g. Events content type map showing the location of an event)
When you are displaying a small number of layers
When performance is critical especially on mobile devices
When you want to use additional Leaflet plugins that provide functionality not found in the GeoPlatform (e.g. Leaflet Time Slider)

How-To

Reference the Leaflet CSS and JavaScript Files

To make use of Leaflet we need to reference its CSS and JavaScript files in the page JavaScript.

Add Map Div and Style It

Leaflet requires a <div> element to contain the map and that that <div> element have a set height.

Add the following style in the page JavaScript to set the height and width

Add Leaflet JavaScript to the page

The script creates the 'map' variable, assigns it a new L.map object and passes it the id (map in this case) of the div element in which the map is to be contained. The script goes on to pass some options that set an initial center point and zoom level for the map. Essentially, this creates a map on the page that we can manipulate.

Next, the script creates a new L.tileLayer object, specifying a particular set of tiles to be loaded into the map container and passes in an 'attribution' option. In this case OpenStreetMap tiles are used but there are many map tile providers. Experiment with different sets and remember to always properly attribute the data and imagery used!

The addTo() method is used to add the tile layer to the map. This code creates a marker variable and assigns it a marker object with a particular point using L.marker():

var marker = L.marker([38.893253, -77.029447]).addTo(map);

The final code:

You should see a web map centered on the EPA HQ offices with a point indicating the location!