Skip to content

Commit 53c7c07

Browse files
answerquestanswerquest
authored
pune sync maps
1 parent 0bf6ae5 commit 53c7c07

5 files changed

+37
-20
lines changed

‎maps/pune.2012-17.wards.geojson

+1
Large diffs are not rendered by default.

‎maps/pune.2017.wards.geojson

+1
Large diffs are not rendered by default.

‎maps/pune.2017.wards.kml

+1
Large diffs are not rendered by default.

‎maps/pune.pre-2012.wards.geojson

+1
Large diffs are not rendered by default.

‎pune_07-12-17_sync.html

+33-20
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@
99
<script src="https://jieter.github.io/Leaflet.Sync/L.Map.Sync.js"></script>
1010

1111
<style type="text/css">
12-
html, body { width: 100%; height: 100%; margin: 0; }
13-
#map, #container { width: 50%; height: 100%;
12+
html, body { width: 100%; height: 100%; margin: 10; font-family: Arial }
13+
#map, #container { width: 50%; height: 90%;
1414
}
1515
#map { float: left; }
1616
#container { float: right; }
17-
#container .map { width: 100%; height: 50%; }
17+
#container .halfmap { width: 90%; height: 50%; }
1818

1919
#map { border-style: solid; border-width: 2px; border-color: black
2020
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
@@ -27,12 +27,22 @@
2727
</head>
2828

2929
<body>
30+
<h2>Pune Prabhag boundaries : three layouts over 15 years, synchronized maps.</h2>
31+
3032
<div id="map"></div>
3133
<div id="container">
32-
<div id="mapA" class="map"></div>
33-
<div id="mapB" class="map"></div>
34+
<div id="mapA" class="halfmap"></div>
35+
<div id="mapB" class="halfmap"></div>
3436
</div>
3537

38+
<br>&nbsp;<br>
39+
<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. The circles tell which area the mouse is currently hovering on.</p>
40+
<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>
41+
<p>Map prepared by Nikhil VJ, Pune. Contact : nikhil.js [at] gmail.com. 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>.
42+
<br><br><br>
43+
44+
45+
3646
<script type="text/javascript">
3747
var DATAPATH = "maps/"
3848
var center = [18.53, 73.85]; //Pune
@@ -41,27 +51,32 @@
4151
var MBAttrib = '&copy; ' + osmLink + ' Contributors & <a href="https://www.mapbox.com/about/maps/">Mapbox</a>';
4252
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
4353

44-
var MBstreets = L.tileLayer(mapboxUrl, {attribution: MBAttrib});
45-
var MBstreetsA = L.tileLayer(mapboxUrl, {attribution: MBAttrib});
54+
var scenic = 'https://api.mapbox.com/styles/v1/nikhilsheth/cj8rdd7wu45nl2sps9teusbbr/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmlraGlsc2hldGgiLCJhIjoiQTREVlJuOCJ9.YpMpVVbkxOFZW-bEq1_LIw' ;
55+
56+
var MBstreets = L.tileLayer(scenic, {attribution: MBAttrib});
57+
var MBstreetsA = L.tileLayer(scenic, {attribution: MBAttrib});
4658
var MBstreetsB = L.tileLayer(mapboxUrl, {attribution: MBAttrib});
4759

4860
var map = L.map('map', {
4961
layers: [MBstreets],
5062
center: center,
63+
scrollWheelZoom: false,
5164
zoom: 12
5265
});
5366

5467
var mapA = L.map('mapA', {
5568
layers: [MBstreetsA],
5669
center: center,
5770
zoom: 12,
71+
scrollWheelZoom: false,
5872
zoomControl: false
5973
});
6074

6175
var mapB = L.map('mapB', {
6276
layers: [MBstreetsB],
6377
center: center,
6478
zoom: 12,
79+
scrollWheelZoom: false,
6580
zoomControl: false
6681
});
6782

@@ -86,49 +101,47 @@
86101
style: {weight: 1.5, opacity: 1, color: 'green', dashArray: '0', fillOpacity: 0.0 },
87102
onEachFeature: onEachFeature
88103
}).addTo(map);
89-
omnivore.geojson(DATAPATH+'pune2017_22_wards_corporators.geojson', null, wards);
104+
omnivore.geojson(DATAPATH+'pune.2017.wards.geojson', null, wards);
90105
layerControl.addOverlay(wards , "2017 Prabhags (41)");
91106

92107

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

100115
var wardsB = L.geoJson(null, {
101116
style: {weight: 1.5, opacity: 1, color: '#d55d5d', dashArray: '0', fillOpacity: 0.0 },
102117
onEachFeature: onEachFeatureB
103118
}).addTo(mapB);
104-
omnivore.geojson(DATAPATH+'pune pre-2012 144prabhags.geojson', null, wardsB);
105-
layerControlB.addOverlay(wardsB , "2007-12 Prabhags (144)");
119+
omnivore.geojson(DATAPATH+'pune.pre-2012.wards.geojson', null, wardsB);
120+
layerControlB.addOverlay(wardsB , "pre-2012 Prabhags (144)");
106121

107122
function onEachFeature(feature, layer) {
108-
var popupText = feature.properties['prabhag_number'].toString() + ": " + feature.properties['prabhag_name'];
123+
var popupText = '<big><b>' + feature.properties['prabhag_number'].toString() + "</b>: " + feature.properties['prabhag_name'] +
124+
'</big>';
125+
109126
layer.bindTooltip(popupText,
110127
{ sticky: true }) // to follow the mouse
111128
.addTo(map);
112-
// https://gis.stackexchange.com/a/245183/44746
113-
// .toString() has to be added when taking only a numerical feature.properties.var as tooltip text, from https://gis.stackexchange.com/questions/241739/removing-tooltip-label-border-completely-in-leaflet-js-map
114129
}
130+
// tooltip syntax: https://gis.stackexchange.com/a/245183/44746
131+
// .toString() has to be added when taking only a numerical feature.properties.var as tooltip text, from
115132

116133
function onEachFeatureA(feature, layer) {
117-
var popupText = feature.properties['wardnum'].toString() + ": " + feature.properties['title'];
134+
var popupText = '<big><b>' + feature.properties['wardnum'].toString() + "</b>: " + feature.properties['title'] + '</big>';
118135
layer.bindTooltip(popupText,
119136
{ sticky: true }) // to follow the mouse
120137
.addTo(mapA);
121-
// https://gis.stackexchange.com/a/245183/44746
122-
// .toString() has to be added when taking only a numerical feature.properties.var as tooltip text, from https://gis.stackexchange.com/questions/241739/removing-tooltip-label-border-completely-in-leaflet-js-map
123138
}
124139

125140
function onEachFeatureB(feature, layer) {
126-
var popupText = feature.properties['wardnum'].toString();
141+
var popupText = '<big><b>' + feature.properties['wardnum'].toString() + '</b></big>';
127142
layer.bindTooltip(popupText,
128143
{ sticky: true }) // to follow the mouse
129144
.addTo(mapB);
130-
// https://gis.stackexchange.com/a/245183/44746
131-
// .toString() has to be added when taking only a numerical feature.properties.var as tooltip text, from https://gis.stackexchange.com/questions/241739/removing-tooltip-label-border-completely-in-leaflet-js-map
132145
}
133146

134147
</script>

0 commit comments

Comments
 (0)