Skip to content

Commit 1ae69d5

Browse files
answerquestanswerquest
authored
Add files via upload
1 parent 9e1c51d commit 1ae69d5

File tree

2 files changed

+532
-0
lines changed

2 files changed

+532
-0
lines changed

‎overlap-nagpur.html

+246
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,246 @@
1+
<html>
2+
<head>
3+
<meta charset="utf-8" />
4+
<title>Nagpur various maps overlapping</title>
5+
6+
<link rel="stylesheet" href="lib/leaflet.css" />
7+
8+
<link rel="stylesheet" href="lib/Control.Opacity.css" />
9+
<link rel="stylesheet" href="lib/jquery-ui-1.10.3.custom.min.css" />
10+
11+
<link rel="stylesheet" href="lib/Control.FullScreen.css" />
12+
13+
<style type="text/css">
14+
body, html {
15+
height: 100%;
16+
width: 100%;
17+
margin: 0;
18+
font-family: Sans-serif;
19+
}
20+
21+
#map {
22+
width: 100%;
23+
height: 95%;
24+
}
25+
26+
</style>
27+
</head>
28+
<body>
29+
<div align="center">
30+
<input type="button" value="previous" onClick="nextTiles(-1)">
31+
<select id="overlaySelector" onChange="changeTiles()">
32+
<option value="15155" selected="selected">Nagpur 2012 wards</option>
33+
</select>
34+
<input type="button" value="next" onClick="nextTiles(1)">
35+
<div style="display:inline-block; visibility:hidden" id="overlayInfo">Hello</div>
36+
</div>
37+
<div id="map"></div>
38+
39+
<!-- <script src="lib/leaflet.js"></script>-->
40+
<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
41+
<script src="lib/Control.Opacity.js"></script>
42+
<script src="lib/jquery-1.9.1.js"></script>
43+
<script src="lib/jquery-ui-1.10.3.custom.min.js"></script>
44+
45+
<script src='lib/leaflet-omnivore.min.js'></script>
46+
<script src="lib/leaflet.functionaltilelayer.js"></script>
47+
<script src="lib/Control.FullScreen.js"></script> <!-- From https://github.com/brunob/leaflet.fullscreen -->
48+
49+
50+
<script type="text/JavaScript">
51+
var DATAPATH = "nagpur/";
52+
53+
var osmLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>',
54+
mapboxUrl = 'https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png',
55+
MBAttrib = '&copy; ' + osmLink + ' Contributors & <a href="https://www.mapbox.com/about/maps/">Mapbox</a>',
56+
osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
57+
osmAttrib = '&copy; ' + osmLink + ' Contributors';
58+
PMCAttrib = '<a href="http://www.punecorporation.org/">Pune Municipal Corporation</a>',
59+
60+
cycleOverlay = '<br>Load overlay: <button onclick="nextTiles(-1)">Previous</button> | <button onclick="nextTiles(1)">Next</button>' +
61+
'<br><span id="wardNum"></span>' ;
62+
63+
MBAttrib += cycleOverlay;
64+
osmAttrib += cycleOverlay;
65+
66+
var MBstreets = L.tileLayer(mapboxUrl, {id: 'nikhilsheth.m0mlpl2d', attribution: MBAttrib, maxZoom: 20}),
67+
MBsatlabel = L.tileLayer(mapboxUrl, {id: 'nikhilsheth.m0mmaa87', attribution: MBAttrib}),
68+
MBsat = L.tileLayer(mapboxUrl, {id: 'nikhilsheth.m0mni8e7', attribution: MBAttrib}),
69+
MBemerald = L.tileLayer(mapboxUrl, {id: 'nikhilsheth.m0mmebk6', attribution: MBAttrib}),
70+
MBrun = L.tileLayer(mapboxUrl, {id: 'nikhilsheth.m0mmicn2', attribution: MBAttrib}),
71+
MBlight = L.tileLayer(mapboxUrl, {id: 'nikhilsheth.m0mmobne', attribution: MBAttrib}),
72+
MBbw = L.tileLayer(mapboxUrl, {id: 'nikhilsheth.m0mn13df', attribution: MBAttrib}),
73+
MBdark = L.tileLayer(mapboxUrl, {id: 'nikhilsheth.jme9hi44', attribution: MBAttrib}),
74+
MBpencil = L.tileLayer(mapboxUrl, {id: 'nikhilsheth.m0mn5lf5', attribution: MBAttrib}),
75+
MBpirates = L.tileLayer(mapboxUrl, {id: 'nikhilsheth.m0mn8b72', attribution: MBAttrib}),
76+
MBwheatpaste = L.tileLayer(mapboxUrl, {id: 'nikhilsheth.m0mnld61', attribution: MBAttrib}),
77+
MBcomic = L.tileLayer(mapboxUrl, {id: 'nikhilsheth.m0mo16hg', attribution: MBAttrib}),
78+
79+
OsmIndia = L.tileLayer(mapboxUrl, {id: 'openstreetmap.1b68f018', attribution: MBAttrib, maxZoom: 20}),
80+
osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib, maxZoom: 20});
81+
82+
83+
//var PMCwards = L.tileLayer('http://mapwarper.net/maps/tile/9881/{z}/{x}/{y}.png', {attribution: PMCAttrib});
84+
85+
86+
// var googleLayer = new L.Google('ROADMAP'); // google maps layer initiation
87+
88+
var baseLayers = {
89+
"OpenStreetMap.IN": OsmIndia,
90+
"OpenStreetMap": osmMap,
91+
"Mapbox Streets": MBstreets,
92+
"Mapbox Satellite w/labels": MBsatlabel ,
93+
"Mapbox Light": MBlight,
94+
"Mapbox Dark" : MBdark
95+
// "Google Maps": googleLayer
96+
};
97+
98+
99+
var map = L.map('map', {
100+
layers: [MBsatlabel],
101+
zoomControl: false,
102+
fullscreenControl: true,
103+
fullscreenControlOptions: {
104+
position: 'topleft'
105+
},
106+
minZoom: 11, maxZoom: 20
107+
})
108+
.setView([21.145800, 79.088155], 13);
109+
110+
var overlays = { };
111+
var layerControl = L.control.layers(baseLayers, overlays, {collapsed: true}).addTo(map);
112+
map.addControl(L.control.zoom({position:'bottomright'}));
113+
// ###################################################################
114+
// CUSTOM TILES SOURCE
115+
var tileSource = '';
116+
117+
var funcLayer = new L.TileLayer.Functional(function (view) {
118+
var url = 'http://mapwarper.net/maps/tile/{i}/{0}/{1}/{2}.png'
119+
.replace('{0}', view.zoom)
120+
.replace('{2}', view.tile.row)
121+
.replace('{1}', view.tile.column)
122+
.replace('{3}', view.subdomain)
123+
.replace('{i}', tileSource);
124+
return url;
125+
},
126+
{ maxZoom: 20 }
127+
);
128+
layerControl.addOverlay(funcLayer , "Overlay Layer");
129+
130+
function changeTiles() {
131+
var e = document.getElementById("overlaySelector");
132+
var id = e.options[e.selectedIndex].value;
133+
tileSource = id;
134+
funcLayer.redraw();
135+
document.getElementById("overlayInfo").innerHTML = '<small>See on <a href="http://mapwarper.net/maps/' + id + '#Preview_Map_tab" target="_blank">http://mapwarper.net/maps/' + id + '#Preview_Map_tab</a></small>';
136+
console.log("Changed tile source to " + tileSource );
137+
}
138+
139+
changeTiles();
140+
141+
142+
//###############################
143+
// Adding other layers
144+
var wards = L.geoJson(null, {
145+
//onEachFeature: function (feature, layer) { defaultOnEachFeature(feature, layer, title, fields); },
146+
style: {weight: 2, opacity: 1, color: 'orange', dashArray: '4', fillOpacity: 0 },
147+
onEachFeature: function(feature, layer) {
148+
layer.on({
149+
//click: onMapClick,
150+
click: function (e) {
151+
var loc = '<br>Located in Prabhag : ' + feature.properties.wardnum;
152+
url = getTileURL(e.latlng.lat, e.latlng.lng, map.getZoom()); //integrated the tile solution from http://jsfiddle.net/84P9r/ with this popup.
153+
popup
154+
.setLatLng(e.latlng)
155+
.setContent(e.latlng.toString() + loc)
156+
.openOn(map);
157+
},
158+
mouseover: function (e) {
159+
$('#wardNum').html('Mouse currently over Prabhag <b>' + feature.properties.wardnum + '</b>');
160+
},
161+
mouseout: function (e) {
162+
$('#wardNum').html('');
163+
}
164+
}); // end of layer.on
165+
} // end of onEachFeature
166+
}).addTo(map);
167+
omnivore.geojson(DATAPATH+'nagpur-wards.geojson', null, wards);
168+
layerControl.addOverlay(wards , "Electoral Ward Boundaries");
169+
170+
/*
171+
var adminlayer = L.geoJson(null, {
172+
//onEachFeature: function (feature, layer) { defaultOnEachFeature(feature, layer, title, fields); },
173+
style: {weight: 2, opacity: 1, color: 'yellow', dashArray: '4', fillOpacity: 0 },
174+
onEachFeature: function(feature, layer) {
175+
layer.on({
176+
//click: onMapClick,
177+
click: function (e) {
178+
var loc = '<br>Located in ' + feature.properties.name;
179+
url = getTileURL(e.latlng.lat, e.latlng.lng, map.getZoom()); //integrated the tile solution from http://jsfiddle.net/84P9r/ with this popup.
180+
popup
181+
.setLatLng(e.latlng)
182+
.setContent(e.latlng.toString() + loc)
183+
.openOn(map);
184+
},
185+
mouseover: function (e) {
186+
$('#wardNum').html('Mouse currently over ' + feature.properties.name);
187+
},
188+
mouseout: function (e) {
189+
$('#wardNum').html('');
190+
}
191+
}); // end of layer.on
192+
} // end of onEachFeature
193+
});
194+
omnivore.geojson(DATAPATH+'nagpur-zones.geojson', null, adminlayer);
195+
layerControl.addOverlay(adminlayer , "Zone Boundaries");
196+
197+
*/
198+
199+
//######################################################
200+
// OPACITY CONTROL:
201+
202+
//Create the opacity controls
203+
var opacitySlider = new L.Control.opacitySlider({position: 'topright'});
204+
map.addControl(opacitySlider);
205+
//Specify the layer for which you want to modify the opacity. Note that the setOpacityLayer() method applies to all the controls.
206+
//You only need to call it once.
207+
opacitySlider.setOpacityLayer(funcLayer);
208+
209+
funcLayer.setOpacity(0.8).addTo(map);
210+
//funcLayer.bringToFront();
211+
212+
// popup giving lat-long + tile, zoom level
213+
var popup = L.popup();
214+
function onMapClick(e) {
215+
url = getTileURL(e.latlng.lat, e.latlng.lng, map.getZoom()); //integrated the tile solution from http://jsfiddle.net/84P9r/ with this popup.
216+
popup
217+
.setLatLng(e.latlng)
218+
.setContent(e.latlng.toString() /*+ url*/)
219+
.openOn(map);
220+
}
221+
map.on('click', onMapClick);
222+
function getTileURL(lat, lon, zoom) {
223+
// From http://jsfiddle.net/84P9r/ : To get tile on clicking
224+
var xtile = parseInt(Math.floor( (lon + 180) / 360 * (1<<zoom) ));
225+
var ytile = parseInt(Math.floor( (1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat* Math.PI / 180)) / Math.PI) / 2 * (1<<zoom) ));
226+
return "<br>Tile " + zoom + "/" + xtile + "/" + ytile;
227+
//modifying this to directly show mapwarper tile
228+
229+
//Commenting this out, use for debugging / development:
230+
//var mapwarperURL = 'http://mapwarper.net/maps/tile/'+tileSource+ '/' +zoom+ '/' +xtile+ '/' +ytile+ '.png';
231+
//return '<br>Tile <a href="'+mapwarperURL+'" target="_blank">'+mapwarperURL+'</a>';
232+
}
233+
234+
function nextTiles(i) {
235+
var e = document.getElementById("overlaySelector");
236+
e.selectedIndex +=i ;
237+
//loop-around from the top or bottom depending on increment/decrement
238+
if(e.selectedIndex == -1) {
239+
if(i>0) e.selectedIndex = 0;
240+
else e.selectedIndex = e.length - 1;
241+
}
242+
changeTiles();
243+
}
244+
</script>
245+
</body>
246+
</html>

0 commit comments

Comments
 (0)