jQuery Leaflet Plugin

by NOVUSIDEA

HTML

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

CSS

html, body {
    height: 100%;
    width: 100%;
}
body {
    margin: 0;
}
#map {
    width: 100%;
    height: 100%;
}

JavaScript

$(function () {
	$.fn.leaflet = function (options, markers) {

		var settings = $.extend({
			apiKey: options.apiKey,
			styleId: 997,
			mapCenter: options.mapCenter,
			minZoom: 0,
			maxZoom: 18,
			zoom: 14,
			markers: [],
			layers: []
		}, options);

		var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/' + settings.apiKey + '/{styleId}/256/{z}/{x}/{y}.png';
		var cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade';

		var map = L.map($(this).attr('id'), {
			center: new L.LatLng(settings.mapCenter[0], settings.mapCenter[1]),
			zoom: settings.zoom
		});

		// Add Markers
		for(i = 0; i < settings.markers.length; i++) {
		
			if (settings.markers[i].latLng) {
                
                var customIcon = L.icon(settings.markers[i].customIcon);
				var marker = L.marker(settings.markers[i].latLng, {icon: customIcon}).addTo(map);
                
                console.log();
				
				if (settings.markers[i].popUpContent) {
					marker.bindPopup(settings.markers[i].popUpContent)
				}
			}
			
		}

		L.tileLayer(cloudmadeUrl, {
			minZoom: settings.minZoom,
			maxZoom: settings.maxZoom,
			styleId: settings.styleId,
			attribution: cloudmadeAttribution
		}).addTo(map);

	};

	$('#map').leaflet({
		apiKey: 'd48db924a3a14b5c9452e930cc8997cd',
		mapCenter: [52.519564, 13.407226],
		zoom: 10,
		markers: [{
			latLng: [52.520608,13.406013],
			popUpContent: 'Berlin Mitte',
            customIcon: {
                iconUrl: 'http://strawberry.novusidea.de/95.png',
                shadowUrl: false,
                iconSize: [32, 32],
                shadowSize: [0, 0],
                iconAnchor: [0, 0],
                shadowAnchor: [0, 0],
                popupAnchor: [16, 8]
            }
		}, {
			latLng: [52.570925,13.40596],
			popUpContent: 'Berlin Pankow',
            customIcon: {
                iconUrl: 'http://strawberry.novusidea.de/10.png',
                shadowUrl: false,
               ...