Leaflet_example

Simple leflet map with a marker with a custom icon.

by CristianCantoro

HTML

<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">
<script src="http://img689.imageshack.us/img689/3476/9s4a.png"></script>
<body>
    <link rel="stylesheet" href="leaflet.css"/>
	<!-- copy-pasted from: 
		 * http://leafletjs.com/examples/quick-start.html
		 * http://leafletjs.com/examples/custom-icons.html
	-->
	<div id="map" style="width: 600px; height: 400px"></div>

	<script src="leaflet.js"></script>
	<script>

		// Tux icon by: Larry Ewing, Simon Budig, Anja Gerwinski
		// see https://commons.wikimedia.org/wiki/Image:Tux.svg

		var map = L.map('map').setView([45.70, 9.64], 13);

		L.tileLayer('http://{s}.tile.cloudmade.com/74f3f6ca3f714d4ab3aab495f7d9e6e9/997/256/{z}/{x}/{y}.png', {
			maxZoom: 18,
			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://cloudmade.com">CloudMade</a>'
		}).addTo(map);

		var TuxIcon = L.icon({
		    iconUrl: 'http://img689.imageshack.us/img689/3476/9s4a.png',

		    iconSize:     [44, 54], // size of the icon
		    iconAnchor:   [22, 40], // point of the icon which will correspond to marker's location
		    popupAnchor:  [10, -38] // point from which the popup should open relative to the iconAnchor
		});

		L.marker([45.6907079, 9.6336869], {icon: TuxIcon}).addTo(map)
			.bindPopup("<b>Linux Day 2013 a Bergamo</b><br />BGLUG - ecc. ecc. .").openPopup();


		var popup = L.popup();

	</script>
</body>
</html>