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>
<script src="http://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css">
<div id="map"></div>

CSS

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

JavaScript

/*jslint browser: true*/
/*global $, jQuery, alert, L*/

function displayMaps() {

    //Disables old ECMAScript 3 features
    'use strict';
    var map = L.map('map', {
        zoomControl: true
    }).setView([51.505, -0.05], 13),

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

        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
        }),

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



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

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

        ]).addTo(map),

        latlng = L.latLng(51.5, -0.09),
        c1 = L.circleMarker(latlng, {
            radius: 15,
            fillColor: "#ff7800",
            color: "red",
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8
        }).addTo(map);

    /*
L.circle([51.508, -0.11], 500, {
   ...