leaflet 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 |
Implementing Leaflet.js with HTML and JavaScript
To use Leaflet, load its stylesheet and JavaScript file to your page:
<link rel="stylesheet" href="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3B%2Fcss%2Fleaflet.css%26quot%3B%2520%2F%26gt%3B%26lt%3Bscript%2520src%3D%26quot%3B%2Fjs%2Fleaflet.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%253C%2Fcode"> 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="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttps%3A%2F%2Funpkg.com%2F%253Ca%2520href%3D"/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c00090d0a0009182c5d425c425f">[email protected]/dist/leaflet.css" />
<script src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttps%3A%2F%2Funpkg.com%2F%253Ca%2520href%3D"/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="28444d494e444d5c68190618061b">[email protected]/dist/leaflet.js" ></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 Leaflet.map(mapContainerId) method. In the below example, a latitude and longitude are set as a default with a default zoom level of 13.
var map = L.map('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:
"http://{s}.domain.com/foo/{z}/{x}/{y}.png"
We can now add our tilelayer, along with attribution info and maximum possible zoom level, and add it to the map:
L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
{
attribution: 'Tiles by <a href="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttp%3A%2F%2Fmapc.org%26quot%3B%26gt%3BMAPC%26lt%3B%2Fa%26gt%3B%2C%2520Data%2520by%2520%26lt%3Ba%2520href%3D%26quot%3Bhttp%3A%2F%2Fmass.gov%2Fmgis%26quot%3B%26gt%3BMassGIS%26lt%3B%2Fa%26gt%3B",
maxZoom: 17,
minZoom: 5
}).addTo(map);
Note: Map initialization and loading the tile layer need to occur after the inclusion of leaflet.js and the map container div element.
Leaflet Quick Start
<!DOCTYPE html>
<html>
<head>
<title>My Leaflet Map</title>
<link rel="stylesheet" href="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3B%2F%2Funpkg.com%2F%253Ca%2520href%3D"/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="573b3236313b3223176679677965">[email protected]/dist/leaflet.css" />
<style type="text/css">
#map {
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3B%2F%2Funpkg.com%2F%253Ca%2520href%3D"/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff939a9e99939a8bbfced1cfd1cd">[email protected]/dist/leaflet.js"></script>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttp%3A%2F%2Fosm.org%2Fcopyright%26quot%3B%26gt%3BOpenStreetMap%26lt%3B%2Fa%26gt%3B%2520contributors"
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
</script>
</body>
</html>
