Chapter 1. Creating Maps with Leaflet
Web-based mapping has evolved rapidly over the last two decades, from MapQuest and Google to real-time location
information on our phones' mapping apps. There have been open source projects to develop web-based maps in the
past, such as MapServer, GeoServer, and OpenLayers. However, Environmental Systems Research Institute
(ESRI) includes the Flex and Silverlight APIs; these create web-based maps from their ArcServer services.
Over the last few years, JavaScript has taken the online mapping world by storm. In 2013, there was a JS.geo
conference. The library at the center of attention was Leaflet. This is a JavaScript library used to create interactive,
web-based maps. With it, you can create a simple map in as little as three lines of JavaScript, or you can create
complex, interactive, editable maps with hundreds of lines of code.
Note
You can find more information on Leaflet at http://leafletjs.com.
This book assumes that you have a basic understanding of HTML and CSS, primarily of how to link external .js and
.css files and how to name and size a <div> element. It also assumes that you have a working knowledge of
JavaScript.
In this chapter, we will cover the following topics:
Tile layers
Vector layers
Pop ups
Custom functions / Responding to events
Mobile mapping
Creating a simple basemap
To create a map with Leaflet, you need to do the following four things:
Reference the JavaScript and Cascading Style Sheet (CSS) files
Create a <div> element to hold the map
Create a map object
Add a tile layer (base layer)
Before we get into the details of building the map, let's set up an HTML file that we can use throughout the book.
Open a text editor and enter the following HTML:
<!DOCTYPE html><html>
<head><title>Leaflet Essentials</title>
</head>
<body>
</body>
</html>
Save the file as LeafletEssentials.html. We will add to this file throughout the rest of the book.
Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at
http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support
and register to have the files e-mailed directly to you.
Referencing the JavaScript and CSS files
There are two ways to load Leaflet into your code: you can either reference a hosted file or download a copy to your
我的内容管理
展开
