Leaflet Basics

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<!-- the 'map' div is where the map content is going -->
<div id="map"></div>

CSS

/* check out 'external resources' in the sidebar - there is a css file there: */

/*     -leaflet: this is all the styling leaflet uses to make the map */

/* this tells the page that we want no space around the map */
 body {
    padding: 0;
    margin: 0;
}
/* this tells the page that the map should take up the whole page */
 html, body, #map {
    height: 100%;
}

JavaScript

// check out 'external resources' in the sidebar - there are 2 javascript files there:
//    -jQuery: required for leaflet to work
//    -leaflet: the leaflet library

// create a map in the "map" div, set the view to a given place and zoom
var centerCoordinates = [49.9456608, 2.3076605]; // lat, long for map center
var zoomLevel = 7;
// tell leaflet we want the map to be in the #map div
var map = L.map('map') 
.setView(
    centerCoordinates,
    zoomLevel
);

// add an OpenStreetMap tile layer
var tileUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
L.tileLayer(
    tileUrl, 
    {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}
)
.addTo(map);

var test = L.circle([49.9456608, 2.3076605], {radius: 200}).addTo(map);

// add some popups to our marker and polygon
marker.bindPopup("<b>Hello world!</b><br>I am a brewpub!");
polygon.bindPopup("I am a lovely park.");