<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>OpenStreetMap - Mapnik</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.ie.css" /><![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<style type="text/css">
/*http://andrewpeace.com/css-full-screen-div.html*/
/*give the body height:100% so that its child
elements can have percentage heights*/
body{ height:100%; margin:0px }
/*this is what we want the div to look like*/
div.fullscreen{
display:block;
/*set the div in the top-left corner of the screen*/
position:absolute;
top:0;
left:0;
/*set the width and height to 100% of the screen*/
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="map" class="fullscreen"></div>
<script>
//Set map centre
var map = new L.Map('map', {
center: new L.LatLng(52.39006, -1.54207),
zoom: 16
});
//Add a base tile layer
//var tilesUrl = 'http://tile.openstreetmap.org/{z}/{x}/{y}.png',
var tilesUrl = 'http://tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
tiles = new L.TileLayer(tilesUrl, {attribution:'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});
map.addLayer(tiles);
</script>
</body>
</html>