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 mp = [{
    "type": "FeatureCollection",
        "features": [{
        "type": "Feature",
            "properties": {
            "OBJECTID": 1,
                "FeederSect": "SPU123-S1",
                "SHAPE_Leng": 60442.688424799998756,
                "SHAPE_Area": 84870599.2078
        },
            "geometry": {
            "type": "Polygon",
                "coordinates": [
                [
                    [-117.204457636502596, 46.706983004048823],
                    [-117.203387410336177, 46.723058105821238],
                    [-117.190683205818672, 46.727136053090355],
                    [-117.190023942970271, 46.728291653401776],
                    [-117.187030152123285, 46.72856850066389],
                    [-117.186528516884323, 46.729925238069974],
                    [-117.183091885624933, 46.730714228669392],
                    [-117.183864147521803, 46.728935473781384],
                    [-117.183300658383502, 46.728069787070851],
                    [-117.182871408515624, 46.727874588026992],
                    [-117.184333784686629, 46.726569398532817],
                    [-117.184962172595974, 46.724115770039035],
                    [-117.183957826988021, 46.722808092672203],
                    [-117.18396431791605, 46.721828160120623],
                    [-117.181947340588252, 46.720970296257732],
                    [-117.18088016813779, 46.721279156641323],
                    [-117.180440655449061, 46.720032627367189],
                    [-117.17404811966253, 46.719524327844276],
                    [-117.169522176129306, 46.718877150404829],
                   ...