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);


var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

map.on('layeradd', function (e) {
    drawnItems.addLayer(e.layer);
    alert(JSON.stringify(e.layer.toGeoJSON()));
});

var circle = L.circle([51.508, -0.11], 500, {
    color: 'blue',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(map);

var latlng = L.latLng(51.5, -0.09);

var circle = L.circleMarker(latlng, {
    radius: 15,
    fillColor: "#ff7800",
    color: "red",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8

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