Getting started with Leaflet

Exclusive offer: get 50% off this eBook here
Instant Interactive Map designs with Leaflet JavaScript Library How-to [Instant]

Instant Interactive Map designs with Leaflet JavaScript Library How-to [Instant] — Save 50%

An intuitive guide to creating animated, interactive maps with the Leaflet JavaScript library in a series of straightforward recipes with this book and ebook

$9.99    $5.00
by Jonathan Derrough | June 2013 | Open Source

In this article, written by Jonathan Derrough, author of the book entitled Instant Interactive Map Designs with Leaflet Library How-to, we will learn about Leaflet. Leaflet is a JavaScript library so there are a few JavaScript things we will need before we get started, namely an Internet browser, a text editor, and a stable release of Leaflet. We will then be on our way to create our first map.

(For more resources related to this topic, see here.)

Getting ready

First, we need to get an Internet browser, if we don't have one already installed. Leaflet is tested with modern desktop browsers: Chrome, Firefox, Safari 5+, Opera 11.11+, and Internet Explorer 7-10. Internet Explorer 6 support is stated as not perfect but accessible. We can pick one of them, or all of them if we want to be thorough.

Then, we need an editor. Editors come in many shapes and flavors: free or not free, with or without syntax highlighting, or remote file editing. A quick search on the Internet will provide thousands of capable editors. Notepad++ (http://notepad-plus-plus.org/) for Windows, Komodo Edit (http://www.activestate.com/komodo-edit) for Mac OS, or Vim (http://www.vim.org/) for Linux are among them.

We can download Leaflet's latest stable release (v0.5.1 at the time of writing) and extract the content of the ZIP file somewhere appropriate. The ZIP file contains the sources as well as a prebuilt version of the library that can be found in the dist directory.

Optionally, we can build from the sources included in the ZIP file; see this article's Building Leaflet from source section.

Finally, let's create a new project directory on our hard drive and copy the dist folder from the extracted Leaflet package to it, ensuring we rename it to leaflet.

How to do it...

Note that the following code will constitute our code base throughout the rest of the article.

  1. Create a blank HTML file called index.html in the root of our project directory.

  2. Add the code given here and use the browser installed previously to execute it:

    <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="leaflet/ leaflet.css" /> <!--[if lte IE 8]> <link rel="stylesheet" type="text/css" href=" leaflet/ leaflet.ie.css" /> <![endif]--> <script src = "leaflet/leaflet.js"></script> <style> html, body, #map { height: 100%; } body { padding: 0; margin: 0; } </style> <title>Getting Started with Leaflet</title> </head> <body> <div id="map"></div> <script type="text/javascript"> var map = L.map('map', { center: [52.48626, -1.89042], zoom: 14 }); L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/ {x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); </script> </body> </html>

The following screenshot is of the first map we have created:

How it works...

The index.html file we created is a standardized file that all Internet browsers can read and display the contents. Our file is based on the HTML doctype standard produced by the World Wide Web Consortium (W3C), which is only one of many that can be used as seen at http://www.w3.org/QA/2002/04/valid-dtd-list.html. Our index file specifies the doctype on the first line of code as required by the W3C, using the <!DOCTYPE HTML> markup.

We added a link to Leaflet's main CSS file in the head section of our code:

<link rel="stylesheet" type="text/css" href="leaflet/leaflet.css" />

We also added a conditional statement to link an Internet Explorer 8 or lower only stylesheet when these browsers interpret the HTML code:

<!--[if lte IE 8]> <link rel="stylesheet" type="text/css" href="leaflet/leaflet.ie.css" /> <![endif]-->

This stylesheet mainly addresses Internet Explorer specific issues with borders and margins.

Leaflet's JavaScript file is then referred to using a script tag:

<script src = "leaflet/leaflet.js"></script>

We are using the compressed JavaScript file that is appropriate for production but very inefficient for debugging. In the compressed version, every white space character has been removed, as shown in the following bullet list, which is a straight copy-paste from the source of both files for the function onMouseClick:

  • compressed:

    _onMouseClick:function(t){!this._loaded||this.dragging&& this.dragging.moved()||(this.fire("preclick"),this._ fireMouseEvent(t))},

  • uncompressed:

    _onMouseClick: function (e) { if (!this._loaded || (this.dragging && this.dragging.moved())) { return; } this.fire('preclick'); this._fireMouseEvent(e); },

To make things easier, we can replace leaflet.js with leaflet-src.js—an uncompressed version of the library.

We also added styles to our document to make the map fit nicely in our browser window:

html, body, #map { height: 100%; } body { padding: 0; margin: 0; }

The <div> tag with the id attribute map in the document's body is the container of our map. It must be given a height otherwise the map won't be displayed:

<div id="map" style="height: 100%;" ></div>

Finally, we added a script section enclosing the map's initialization code, instantiating a Map object using the L.map(…) constructor and a TileLayer object using the L.tileLayer(…) constructor. The script section must be placed after the map container declaration otherwise Leaflet will be referencing an element that does not yet exist when the page loads.

When instantiating a Map object, we pass the id of the container of our map and an array of Map options:

var map = L.map('map', { center: [52.48626, -1.89042], zoom: 14 });

There are a number of Map options affecting the state, the interactions, the navigation, and the controls of the map. See the documentation to explore those in detail at http://leafletjs.com/reference.html#map-options.

Next, we instantiated a TileLayer object using the L.tileLayer(…) constructor and added to the map using the TileLayer.addTo(…) method:

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map);

Here, the first parameter is the URL template of our tile provider—that is OpenStreetMap— and the second a noncompulsory array of TileLayer options including the recommended attribution text for our map tile's source.

The TileLayer options are also numerous. Refer to the documentation for the exhaustive list at http://leafletjs.com/reference.html#tilelayer-options.

There's more...

Let's have a look at some of the Map options, as well as how to build Leaflet from source or use different tile providers.

More on Map options

We have encountered a few Map options in the code for this recipe, namely center and zoom. We could have instantiated our OpenStreetMap TileLayer object before our Map object and passed it as a Map option using the layers option. We also could have specified a minimum and maximum zoom or bounds to our map, using minZoom and maxZoom (integers) and maxBounds, respectively. The latter must be an instance of LatLngBounds:

var bounds = L.latLngBounds([ L.latLng([52.312, -2.186]), L.latLng([52.663, -1.594]) ]);

We also came across the TileLayer URL template that will be used to fetch the tile images, replacing { s} by a subdomain and { x}, {y}, and {z} by the tiles coordinate and zoom. The subdomains can be configured by setting the subdomains property of a TileLayer object instance.

Finally, the attribution property was set to display the owner of the copyright of the data and/or a description.

Building Leaflet from source

A Leaflet release comes with the source code that we can build using Node.js. This will be a necessity if we want to fix annoying bugs or add awesome new features.

The source code itself can be found in the src directory of the extracted release ZIP file. Feel free to explore and look at how things get done within a Leaflet.

First things first, go to http://nodejs.org and get the install file for your platform. It will install Node.js along with npm, a command line utility that will download and install Node Packaged Modules and resolve their dependencies for us. Following is the list of modules we are going to install:

  • Jake: A JavaScript build program similar to make

  • JSHint: It will detect potential problems and errors in JavaScript code

  • UglifyJS: A mangler and compressor library for JavaScript

Hopefully, we won't need to delve into the specifics of these tools to build Leaflet from source.

So let's open a command line interpreter— cmd.exe on Windows, or a terminal on Mac OSX or Linux—and navigate to the Leaflet's src directory using the cd command, then use npm to install Jake, JSHint and UglifyJS:

cd leaflet/src npm install –g jake npm install jshint npm install uglify-js

We can now run Jake in Leaflet's directory:

jake

What about tile providers?

We could have chosen a different tile provider as OpenStreetMap is free of charge but has its limitations in regard of a production environment. A number of web services provide tiles but might come at a price depending on your usage: CloudMade, MapQuest.

These three providers serve tiles use the OpenStreetMap tile scheme described at http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames.

Remember the way we added the OpenStreetMap layer to the map?

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map);

Remember the way we added the OpenStreetMap layer to the map?

  • Cloudmade:

    L.tileLayer(' http://{s}.tile.cloudmade.com/API-key/997/256/{z}/ {x}/{y}.png', { attribution: ' Map data © <a href="http://openstreetmap. org">OpenStreetMap</a> contributors, <a href="http:// creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>' }).addTo(map);

  • MapQuest:

    L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}. png', { attribution: ' Tiles Courtesy of <a href="http://www.mapquest. com/" target="_blank">MapQuest</a> <img src = "http://developer. mapquest.com/content/osm/mq_logo.png">', subdomains: ['otile1', 'otile2', 'otile3', 'otile4'] }).addTo(map);

You will learn more about the Layer URL template and subdomains option in the documentation at http://leafletjs.com/reference.html#tilelayer.

Leaflet also supports Web Map Service (WMS) tile layers—read more about it at http://leafletjs.com/reference.html#tilelayer-wms—and GeoJSON layers in the documentation at http://leafletjs.com/reference.html#geojson.

Summary

In this article we have learned how to create map using Leaflet and created our first map. We learned about different map options and also how to build a leaflet from source.

Resources for Article :


Further resources on this subject:


Instant Interactive Map designs with Leaflet JavaScript Library How-to [Instant] An intuitive guide to creating animated, interactive maps with the Leaflet JavaScript library in a series of straightforward recipes with this book and ebook
Published: May 2013
eBook Price: $9.99
See more
Select your format and quantity:

About the Author :


Jonathan Derrough

Jonathan Derrough has been working with Leaflet to build backend applications for location-based mobile video games and travel and tourism apps for several years. He is also a minor contributor to Leaflet on GitHub.

Jonathan is employed by companies big and small to build great applications with maps, from data mining, spatial database integration, tile rendering, and caching to displaying on various client platforms, desktop, and mobiles.

Books From Packt


Instant PhpStorm Starter [Instant]
Instant PhpStorm Starter [Instant]

 Ext JS 4 Web Application Development Cookbook
Ext JS 4 Web Application Development Cookbook

 Ext JS 3.0 Cookbook
Ext JS 3.0 Cookbook

Instant Galleria How-to [Instant]
Instant Galleria How-to [Instant]

Python Geospatial Development - Second Edition
Python Geospatial Development - Second Edition

 Instant Heat Maps in R: How-to [Instant]
Instant Heat Maps in R: How-to [Instant]

OpenStreetMap
OpenStreetMap

Instant Google Map Maker Starter [Instant]
Instant Google Map Maker Starter [Instant]


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software