Leaflet.label

by aidankirrane

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">
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.label/leaflet.label.css">
<script src="http://leaflet.github.io/Leaflet.label/leaflet.label.js"></script>
	<div id="wrapper">
	
		<div id="header">
			<div class="title">Collision Diagram Report</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
   }
];


//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>' )
       .bindLabel ( crashes[i].CrashID + '\n' +
                    crashes[i].CrashDateTime + ' ' + 
                    crashes[i].CrashMovementCode + ' ' + 
                    crashes[i].Light + ' '
                   , { noHide: true }
                  )
      .addTo(map);
}


//.icon({'marker-symbol': 'a','marker-color': '#009CEC'},{ draggable: true})

/*
var popup = L.popup();

function onMapClick(e) {
    popup
    .setLatLng(e.latlng)
    .setContent("You clicked the map at " +...