Chroropleth Leaflet example

by Neeraj

HTML

<script src="http://leafletjs.com/dist/leaflet.js"></script>
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div id="map"></div>

CSS

#map {
    width: 800px;
    height: 500px;
}

JavaScript

var map = L.map('map', {
    zoomControl: true
}).setView([51.505, -0.05], 13);

//map.panTo(new L.LatLng(40.737, -73.923));

var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
var osmAttrib = 'Map data © <a href="http://osm.org">OpenStreetMap</a> contributors';
var osm = new L.tileLayer(osmUrl, {
    attribution: osmAttrib
});
map.addLayer(osm);

var greenIcon = L.icon({
    iconUrl: 'http://leafletjs.com/docs/images/leaf-green.png',
    shadowUrl: 'http://leafletjs.com/docs/images/leaf-red.png',
    iconSize: [38, 95], // size of the icon
    shadowSize: [50, 64], // size of the shadow
    iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62], // the same for the shadow
    popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});

L.marker([51.51184, -0.08875], {
    icon: greenIcon
}).addTo(map);

var marker = L.marker([51.5, -0.09]).addTo(map);
var circle = L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(map);
var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(map);
var rectangle = L.rectangle([
    [51.50639, -0.04223],
    [51.505, -0.04],
    [51.505, -0.02]

]).addTo(map);

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
//circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");
rectangle.bindPopup("I am a rectangle.");

circle.bindPopup($('<a href="#" class="speciallink">TestLink</a>').click(function () {
    alert("test");
})[0]);

/*var popup = L.popup()
    .setLatLng([51.5, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(map);
    */

var popup = L.popup();

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

map.on('click', onMapClick);

var littleton = L.marker([51.4878, -0.08823]).bindPopup('This...