An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps.
Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of HTML5 and CSS3 on modern browsers while still being accessible on older ones. - leafletjs.com
If you've not already completed the OpenLayers 3 exercise then change to the root of the repository and start a local webserver:
python -m SimpleHTTPServer
Navigating to http://localhost:8000/leaflet/leaflet.html you should see a blank map ready for us to get started.
To get started coding open leaflet/leaflet.js in a text editor then move on to building a basic map with OSM tiles. The other supporting files include:
The HTML file leaflet.html will remain the same throughout the workshop, it provides the basic page structure of a full page map and includes the required CSS and JavaScript including leaflet.js which you will be working on.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Leaflet</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="lib/leaflet-0.7.3/leaflet.css" />
<link rel="stylesheet" href="leaflet.css" />
</head>
<body>
<div id="map"></div>
<script src="../common/lib/reqwest.min.js"></script>
<script src="lib/leaflet-0.7.3/leaflet.js"></script>
<script src="lib/proj4-compressed.js"></script>
<script src="lib/proj4leaflet.js"></script>
<script src="leaflet.js"></script>
</body>
</html>
The CSS file leaflet.css will also remain unchanged, it defines some basic page style and ensures the map takes up the full page.
html, body {
height: 100%;
padding: 0;
margin: 0;
font-family: sans-serif;
font-size: small;
}
#map {
width: 100%;
height: 100%;
}
Next step: build a basic map with OSM tiles.