pune_07-12-17_sync.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pune prabhag (electoral ward) maps : Pre-2012, 2012-17, 2017 onwards</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js" alt='lib/leaflet-omnivore.min.js'></script>
<script src="https://jieter.github.io/Leaflet.Sync/L.Map.Sync.js"></script>

<style type="text/css">
html, body { width: 100%; height: 100%; margin: 10; font-family: Arial }
#map, #container { width: 50%; height: 90%;  
}
#map { float: left; }
#container { float: right; }
#container .halfmap { width: 90%; height: 50%; }
	
#map { border-style: solid; border-width: 2px; border-color: black 
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
#mapA { border-style: solid; border-width: 2px; border-color: black 
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
#mapB { border-style: solid; border-width: 2px; border-color: black 
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}

/* Corner ribbon code, from http://www.cssportal.com/blog/create-corner-ribbon/ */
.box {
   width:200px;height:300px;
   position:relative;
   border:1px solid #BBB;
   background:#eee;
}
.ribbon {
   position: absolute;
   right: -5px; top: -5px;
   z-index: 1000;
   overflow: hidden;
   width: 80px; height: 80px; 
   text-align: right;
   position: fixed;
}
.ribbon span {
   font-size: 10px;
   color: #fff; 
   text-transform: uppercase; 
   text-align: center;
   font-weight: bold; line-height: 24px;
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg); /* Needed for Safari */
   width: 150px; display: block;
   background: #79A70A;
   background: linear-gradient(#9BC90D 0%, #79A70A 100%);
   box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
   position: absolute;
   top: 23px; right: -42px;
}
.ribbon a {
    color: #FFFFFF;
    text-decoration: none;
}

</style>
</head>

<body>
<h2>Pune Prabhag boundaries : three layouts over 15 years, synchronized maps.</h2>

<div id="map"></div>
<div id="container">
<div id="mapA" class="halfmap"></div>
<div id="mapB" class="halfmap"></div>
</div>

<br>&nbsp;<br>
<p>Instructions: Click/touch and drag to move the map around. Use the zoom control on top left or +/- keys to zoom in or out. All three maps will move together, and mouse cursor position will be copied.</p>
<p>Click on links to download the shape files.: Green : <a href="maps/pune.2017.wards.geojson">2017-present</a> (41 prahags) | Blue: <a href="maps/pune.2012-17.wards.geojson">2012-17</a> (76 prabhags) | Red: <a href="maps/pune.pre-2012.wards.geojson:">Pre-2012</a> (144 Prabhags). <br>The 2011 Census data for Pune is as per the pre-2012 144 prabhags.</p>
<p>Map prepared by <a href="https://answerquest.github.io">Nikhil VJ</a>, <a href="https://datameet-pune.github.io">DataMeet Pune Chapter</a>, India. Contact : nikhil.js [at] gmail.com. 

<p><a href="https://www.instamojo.com/@nikhilvj/">Please contribute</a> if you appreciate this work and would like to see more of it!</p>

<p>Using Leaflet, <a href="http://leafletjs.com/plugins.html#minimaps--synced-maps">Leaflet.Sync</a> plugin and Scenic tileset from Mapbox. <a href="https://github.com/answerquest/answerquest.github.io/blob/master/pune_07-12-17_sync.html" target="_blank">See the code on github</a>.

<p><- Back to <a href="https://answerquest.github.io/">answerquest.github.io</a></p>
<br>

<div class="ribbon"><span><a href="https://www.instamojo.com/@nikhilvj/">Contribute</a></span></div>


<script type="text/javascript">
var DATAPATH = "maps/"
var center = [18.53, 73.85]; //Pune

var osmLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
var MBAttrib = '&copy; ' + osmLink + ' Contributors & <a href="https://www.mapbox.com/about/maps/">Mapbox</a>';
var mapboxUrl = 'https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmlraGlsc2hldGgiLCJhIjoiQTREVlJuOCJ9.YpMpVVbkxOFZW-bEq1_LIw'; // from Mapbox account

var scenic = 'https://api.mapbox.com/styles/v1/nikhilsheth/cj8rdd7wu45nl2sps9teusbbr/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmlraGlsc2hldGgiLCJhIjoiQTREVlJuOCJ9.YpMpVVbkxOFZW-bEq1_LIw' ; 

var MBstreets = L.tileLayer(scenic, {attribution: MBAttrib});
var MBstreetsA = L.tileLayer(scenic, {attribution: MBAttrib});
var MBstreetsB = L.tileLayer(mapboxUrl, {attribution: MBAttrib});

var map = L.map('map', {
layers: [MBstreets],
center: center,
scrollWheelZoom: false,
zoom: 12
});

var mapA = L.map('mapA', {
layers: [MBstreetsA],
center: center,
zoom: 12,
scrollWheelZoom: false,
zoomControl: false
});

var mapB = L.map('mapB', {
layers: [MBstreetsB],
center: center,
zoom: 12,
scrollWheelZoom: false,
zoomControl: false
});

// syncing
map.sync(mapA, {syncCursor: true});
map.sync(mapB, {syncCursor: true});

mapA.sync(map, {syncCursor: true});
mapA.sync(mapB, {syncCursor: true});

mapB.sync(map, {syncCursor: true});
mapB.sync(mapA, {syncCursor: true});

// Adding layer control
var layerControl = L.control.layers({ },{ }, {collapsed: false}).addTo(map); 
var  layerControlA = L.control.layers({ }, { }, {collapsed: false}).addTo(mapA); 
var  layerControlB = L.control.layers({ }, { }, {collapsed: false}).addTo(mapB); 


// Loading ward layers on the three maps
var wards = L.geoJson(null, { 
	style: {weight: 1.5, opacity: 1, color: 'green', dashArray: '0', fillOpacity: 0.0 },
	onEachFeature: onEachFeature
}).addTo(map);
omnivore.geojson(DATAPATH+'pune.2017.wards.geojson', null, wards);
layerControl.addOverlay(wards , "2017 onwards (41)");


var wardsA = L.geoJson(null, { 
	style: {weight: 1.5, opacity: 1, color: 'blue', dashArray: '0', fillOpacity: 0.0 },
	onEachFeature: onEachFeatureA
}).addTo(mapA);
omnivore.geojson(DATAPATH+'pune.2012-17.wards.geojson', null, wardsA);
layerControlA.addOverlay(wardsA , "2012-17 (76)");

var wardsB = L.geoJson(null, { 
	style: {weight: 1.5, opacity: 1, color: '#d55d5d', dashArray: '0', fillOpacity: 0.0 },
	onEachFeature: onEachFeatureB
}).addTo(mapB);
omnivore.geojson(DATAPATH+'pune.pre-2012.wards.geojson', null, wardsB);
layerControlB.addOverlay(wardsB , "pre-2012 (144)");

function onEachFeature(feature, layer) {
	var popupText = '<big><b>' + feature.properties['prabhag_number'].toString() + "</b>: " + feature.properties['prabhag_name'] + 
	'</big>';
	
	layer.bindTooltip(popupText, 
		{ sticky: true }) // to follow the mouse
		.addTo(map);
	
	// show all properties on clicking. From https://stackoverflow.com/a/33839514/4355695
    var popupcontent = [];
    for (var prop in feature.properties) {
        popupcontent.push(prop + ": " + feature.properties[prop]);
    }
    
    popupcontent.push('<a href="javascript:map.fitBounds('+bounds2string(layer.getBounds())+');">click here to zoom in</a>');
    layer.bindPopup(popupcontent.join("<br />"));
 
 /*   
    // mouse interactivity, from http://leafletjs.com/examples/choropleth/
    layer.on({
        click: function zoomToFeature(e) {
			map.fitBounds(e.target.getBounds());
		}
    });
*/

}
	// tooltip syntax: https://gis.stackexchange.com/a/245183/44746
	// .toString() has to be added when taking only a numerical feature.properties.var as tooltip text, from

function bounds2string(zObj) {
	return '[ [ ' + zObj._southWest.lat +','+ zObj._southWest.lng +'] , [ '+ zObj._northEast.lat +',' +  zObj._northEast.lng + ' ] ]';
}


function onEachFeatureA(feature, layer) {
	var popupText = '<big><b>' + feature.properties['wardnum'].toString() + "</b>: " + feature.properties['title'] + '</big>';
	layer.bindTooltip(popupText, 
		{ sticky: true }) // to follow the mouse
		.addTo(mapA);

    var popupcontent = [];
    for (var prop in feature.properties) {
        popupcontent.push(prop + ": " + feature.properties[prop]);
    }
    
    popupcontent.push('<a href="javascript:mapA.fitBounds('+bounds2string(layer.getBounds())+');">click here to zoom in</a>');

    layer.bindPopup(popupcontent.join("<br />"));

}

function onEachFeatureB(feature, layer) {
	var popupText = '<big><b>' + feature.properties['wardnum'].toString() + '</b></big>';
	layer.bindTooltip(popupText, 
		{ sticky: true }) // to follow the mouse
		.addTo(mapB);

    var popupcontent = [];
    for (var prop in feature.properties) {
        popupcontent.push(prop + ": " + feature.properties[prop]);
    }
    
    popupcontent.push('<a href="javascript:mapB.fitBounds('+bounds2string(layer.getBounds())+');">click here to zoom in</a>');

    layer.bindPopup(popupcontent.join("<br />"));


}


</script>
</body>
</html>