Leaflet.label

by Malik Rizwan

HTML

<script src="http://leaflet.github.com/Leaflet.draw/lib/leaflet/leaflet.js"></script>
<link rel="stylesheet" href="http://leaflet.github.com/Leaflet.draw/lib/leaflet/leaflet.css">
	<div id="wrapper">
	
		<div id="header">
			<div class="title">Collision Diagram Report</div>
            <div style='font-size:13px;color:white' id='points'></div>
		</div>
        
		<div id="content">
				<div id="map"></div>
    	</div>

		<div id="footer">&copy; 2013</div>

	</div><!-- /wrapper -->

CSS

html,body {
		margin:0 auto; 
		text-align:center;
		font: 100% Arial, Helvetica, sans-serif;
}

#wrapper{
	margin: 0 auto;
	padding: 0;
	background-color: #fff;
}

img{
	border: 0;
}

#header{
	height: 80px;
	color: #fff;
	text-align: center;
	background-color: #094787;
}


 #content { 
	width:995px; 
	height: 605px; 
	margin:0 auto; 
	border:0; 
	background-color: #fff;
 }

	#map { 
		width:990px; 
		height:600px;
		margin:0 auto; 
		border:1px; 
		border-style:dotted; 
		border-color: #C0C0C0;
		background-color:#FFF;
	 }

#footer{
	height: 20px;
	color: #fff;
	text-align: center;
	margin: 0 auto;
	padding: 0px 0px 0px 0px;
	width: 100%;
	background-color: #094787;
}


.title{
	margin: 10px 0px 0px 10%;
	color: #FBFDFF;
	font-size:2.0em; 
	font-weight:bold; 
	font-style:italic;
	float: left;
}

JavaScript

var mapProviderUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
var cloudmade = new L.TileLayer(mapProviderUrl, {
    maxZoom: 18
});
var map = new L.Map('map', {
    layers: [cloudmade],
    center: new L.LatLng(-37.78486, 175.24496),
    zoom: 16
});


//Dummy List of crashes
crashes = [{
    "CrashID": "P00000001",
        "CrashMovementCode": "MKAJ",
        "CrashDateTime": "20/01/2012 20:03:00",
        "Light": "XX",
        "lat": -37.78754,
        "lng": 175.23801
}, {
    "CrashID": "P00000002",
        "CrashMovementCode": "BBBB",
        "CrashDateTime": "01/10/2012 09:03:00",
        "Light": "XX",
        "lat": -37.78767,
        "lng": 175.23723
}, {
    "CrashID": "P00000003",
        "CrashMovementCode": "XXXX",
        "CrashDateTime": "03/09/2011 22:24:00",
        "Light": "XX",
        "lat": -37.7852,
        "lng": 175.24444
}, {
    "CrashID": "P00000004",
        "CrashMovementCode": "BBBB",
        "CrashDateTime": "15/09/2011 15:20:52",
        "Light": "XX",
        "lat": -37.78657,
        "lng": 175.24136
}, {
    "CrashID": "P00000005",
        "CrashMovementCode": "MKAJ",
        "CrashDateTime": "14/09/2012 13:40:47",
        "Light": "XX",
        "lat": -37.78516,
        "lng": 175.24462
}];
var LeafIcon = L.Icon.extend({
        options: {
            iconAnchor:   [19, 46],
            popupAnchor:  [0, -36]
        }
    });
var redIcon = new LeafIcon({iconUrl: 'http://harrywood.co.uk/maps/examples/leaflet/marker-icon-red.png'});


var crashLocation = new L.LatLng(-37.78516, 175.24495);

L.marker([-37.78516, 175.24495],{icon:redIcon}).addTo(map);
var currentLatLong = null;
var polyline = null;
var polyLineList = [];
var currentIndex = null;
//Build the crash markers & put them on the map
for (var i = 0; i < crashes.length; ++i) {
    L.marker([crashes[i].lat, crashes[i].lng], {
        draggable: true
    })
        .bindPopup('<a href="' + crashes[i].CrashID + '" target="_blank">' + crashes[i].CrashMovementCode + '</a>'...