Setup

Before we can get Leaflet to work we have to set things up1.

Include Leaflet CSS (cascading style sheet) file in the head section of your document. CSS is a way of specifying everything about the look and feel of a web page in a single location so that styles can be referred to by name and changes made in the style sheet affect everything that points to them. The "cascading" part means that you can have a series of style definitions starting from those that govern everything (e.g., font style and color on a website) down to how some specific element should look (a sidebar is tiny font with a box around it and a shadow).

You can look at the leaflet style sheet here. To be fully conversant in CSS can take some time, but we'll get a feel for the basics as we go along.

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />

Include Leaflet JavaScript file. This is the actual code that does all the mapping work for us. You can have a look here (unfortunately not formatted with CRLF so very hard to actually read).

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

Put a div element with a certain id where you want your map to be. "Element" is the generic name for an object in a web page. It could be a table, a table row, a table cell, a heading, a paragraph, or in this case a "div," which, in HTML-speak just refers to a place holder with particular characteristics (including, for example, an identifier, a size, a color).

<div id="map"></div>

Make sure the map container has a defined size by setting it in CSS. We'll also make it black so we can see it. We will put this code in the STYLE block in our page HEAD section. The pound sign (aka "hash") in front of the word "map" means that this name is an element's ID (and note above we said 'id="map"' to identify the div we just created). Thus, this CSS statement says "if there are any elements with ID "map" then they should be set with height 180, width 400, and color black."

#map { height: 180px; width: 400px;  background-color: black;}
++++ My Leaflet GIS Work
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style>
#map { height: 180px; width: 800px;  background-color: black; margin: auto;}
</style>
</head>

<body>
<h3>Version 0.6.1</h3>

<div id="map"></div>
<script>

</script>

</body>

My Leaflet GIS Work

Now you’re ready to initialize the map and do some stuff with it.

++++ My Leaflet GIS Work
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style>
#mapdiv { height: 180px; width: 800px;  background-color: black; margin: auto;}
</style>
</head>

<body>
<h3>Version 0.6.2</h3>

<div id="map"></div>
<script>
var map = L.map('mapdiv').setView([51.505, -0.09], 13);

 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     attribution: 'Map data &copy; <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://openstreetmap.org"> OpenStreetMap </a> contributors',
     maxZoom: 18
 }).addTo(map);

</script>

</body>

My Leaflet GIS Work

Decoding the Code

var map = L.map('mapdiv').setView([51.505, -0.09], 13);

The L stands for the Leaflet "system." One of the things the system can do is create a "map object" in a designated div element. A subfunction (aka method) of this action specifies the initial view in terms of where it is centered (latitude and then longitude) and what the zoom level is (these run from 1 to 18 with 1 being zoomed out to the whole world).

This line of Javascript creates a variable named "map" and stores in it the map object created by Leaflet. It's still an empty map because we haven't downloaded any "tiles" yet.

The next command will do this. Another method in Leaflet sets up the way our code will ask for tiles and how they will be presented. L.tileLayer requires us to specify a URL string that points to the tile server and has variables for the tiles we will ask for. Then, in curly brackets it has some optional parameters. Here we see a bit of HTML markup that will appear as the attribution on our map and a specification of the maximum zoom level.

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     attribution: 'Map data &copy; <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://openstreetmap.org"> 
     OpenStreetMap </a> contributors',
     maxZoom: 18
    }).addTo(map);

Finally, we tag on a Leaflet command about what to do with this tile layer - add it to the map object named "map."