leaflet
#leaflet
Table of Contents
About 1
Chapter 1: Getting started with leaflet 2
Remarks 2
Versions 2
Examples 2
Implementing [Link] with HTML and JavaScript 2
Leaflet Quick Start 3
Credits 5
About
You can share this PDF with anyone you feel could benefit from it, downloaded the latest version
from: leaflet
It is an unofficial and free leaflet ebook created for educational purposes. All the content is
extracted from Stack Overflow Documentation, which is written by many hardworking individuals at
Stack Overflow. It is neither affiliated with Stack Overflow nor official leaflet.
The content is released under Creative Commons BY-SA, and the list of contributors to each
chapter are provided in the credits section at the end of this book. Images may be copyright of
their respective owners unless otherwise specified. All trademarks and registered trademarks are
the property of their respective company owners.
Use the content presented in this book at your own risk; it is not guaranteed to be correct nor
accurate, please send your feedback and corrections to info@[Link]
[Link] 1
Chapter 1: Getting started with leaflet
Remarks
Leaflet is an open-source JavaScript library for creating interactive maps.
Versions
Version Release Date
1.0.3 2017-01-23
1.0.2 2016-11-21
1.0.1 2016-09-30
1.0 2016-09-27
0.7 2013-11-18
0.6 2013-06-26
0.5 2013-01-17
0.4 2012-07-30
0.3 2012-02-13
0.2 2011-06-17
0.1 2011-05-16
Examples
Implementing [Link] with HTML and JavaScript
To use Leaflet, load its stylesheet and JavaScript file to your page:
<link rel="stylesheet" href="/css/[Link]" />
<script src="/js/[Link]"></script>
[Link] 2
These resources can be downloaded from a variety of locations such as Leaflet's homepage or
the Leaflet Github repository, or you can directly use CDN as,
<link rel="stylesheet" href="[Link] />
<script src="[Link] ></script>
You need a container for your map. It is common for developers to use a div with an id of "map"
for this. Make sure to give your map div a height as well or the map might not show up.
<div id="map" style="height: 200px;"></div>
Initializing the map is done by creating a map object using the [Link](mapContainerId)
method. In the below example, a latitude and longitude are set as a default with a default zoom
level of 13.
var map = [Link]('map').setView([42.35, -71.08], 13);
This creates our empty map, we should now provide a tile layer to act as our base map. A tilelayer
is a service that provides map images in tiles, small images that are accessed by x, y and z
parameters in a particular order (see below).
A tile layer URL might look like this, where {s}, {z}, {x} and {y} are placeholders that Leaflet will
automatically change during operation:
"[Link]
We can now add our tilelayer, along with attribution info and maximum possible zoom level, and
add it to the map:
[Link]('[Link]
{
attribution: 'Tiles by <a href="[Link] Data by <a
href="[Link]
maxZoom: 17,
minZoom: 5
}).addTo(map);
Note: Map initialization and loading the tile layer need to occur after the inclusion of [Link]
and the map container div element.
Leaflet Quick Start
<!DOCTYPE html>
<html>
<head>
<title>My Leaflet Map</title>
<link rel="stylesheet" href="//[Link]/[email protected]/dist/[Link]" />
<style type="text/css">
#map {
[Link] 3
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="//[Link]/[email protected]/dist/[Link]"></script>
<script>
var map = [Link]('map').setView([51.505, -0.09], 13);
[Link]('[Link] {
attribution: '© <a href="[Link]
contributors'
}).addTo(map);
[Link]([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
</script>
</body>
</html>
Read Getting started with leaflet online: [Link]
with-leaflet
[Link] 4
Credits
S.
Chapters Contributors
No
Getting started with chrki, Community, Gaurav Gandhi, ghybs, Jake Wilson,
1
leaflet Ju66ernaut, Sidney Gijzen, user2441511
[Link] 5
