<style type="text/css">
<!--
#map {
	height: 400px;
	width: 400px;
	margin-right: auto;
	margin-left: auto;
}
-->
</style>

<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" />
<![endif]-->
<script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>

 <div id="map"></div>

<script>
// Création de la carte
var map = new L.Map('map', {
    center: new L.LatLng(48.560058073,-3.1502330 ),
    zoom: 17
});
// appel du serveur de "tuiles" de cloudmade (on peut aussi utiliser d'autre serveurs voir l'article du blog pour plus d'infos)
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/[votretoken]/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Données de la carte &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> et contributeurs, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Images &copy; <a href="http://cloudmade.com">CloudMade</a>',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
map.addLayer(cloudmade);

//creation du marqueur
var iconechateau = L.Icon.extend({
//image de l'icone personalisée
iconUrl: 'castle-2.png',
//taille de l'icone
iconSize: new L.Point(32, 37),
//point de la fleche de l'icone
iconAnchor: new L.Point(16, 37)
			
		});
var iconechateaurouge = new iconechateau();
//positionement de l'icone
var marker1 = new L.Marker(new L.LatLng(48.560058073,-3.1502330 ), {icon: iconechateaurouge});
//affichage
map.addLayer(marker1);
		</script>