Skip to content

Commit 5ffb45c

Browse files
author
Andy Townsend
committed
Added debug and nondebug lang switch html files.
1 parent e621086 commit 5ffb45c

File tree

2 files changed

+338
-0
lines changed

2 files changed

+338
-0
lines changed

‎resources/svwd01_index_debug_langswitch.html‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset='utf-8' />
5+
<title>SPEC_NAME</title>
6+
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
7+
<script src='https://unpkg.com/[email protected]/dist/maplibre-gl.js'></script>
8+
<link href='https://unpkg.com/[email protected]/dist/maplibre-gl.css' rel='stylesheet' />
9+
<script src='https://unpkg.com/@maplibre/maplibre-gl-inspect@latest/dist/maplibre-gl-inspect.js'></script>
10+
<link href='https://unpkg.com/@maplibre/maplibre-gl-inspect@latest/dist/maplibre-gl-inspect.css' rel='stylesheet' />
11+
<style>
12+
body { margin:0; padding:0; }
13+
#map { position:absolute; top:50px; bottom:0; width:100%; }
14+
#refresh { position: absolute; top: 15px; left: 15px; background-color: white; padding: 5px;
15+
border: 1px solid black; font-family: Avenir; cursor: pointer; }
16+
</style>
17+
</head>
18+
<body>
19+
<div id="rest" style="font-size:100%; padding: 8px">
20+
<button id="button1" onclick="show_about();" >about</button>
21+
<button id="button2" onclick="show_schema_changelog();" >schema</button>
22+
<button id="button3" onclick="show_style_changelog();" >style</button>
23+
<button id="button4" onclick="show_mkgmap();" >mkgmap</button>
24+
<button id="button5" onclick="show_raster();" >raster</button>
25+
<button id="button5" onclick="show_osm();" >OSM</button>
26+
<button id="button5" onclick="show_whatpub();" >Camra pubs</button>
27+
<button id="button5" onclick="show_bustimes();" >Bus</button>
28+
<select id="styles" class="dropdownSelect">
29+
<option value="">Default</option>
30+
<option value="cy">Welsh</option>
31+
<option value="en">English</option>
32+
<option value="ga">Irish</option>
33+
<option value="gd">Scots Gaelic</option>
34+
</select>
35+
</div>
36+
<div id='map'></div>
37+
<!-- <div id='refresh' onclick='reload()'>Reload</div> -->
38+
<script>
39+
var map;
40+
var osmAttrib='Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>';
41+
42+
/* -------------------------------------------------------------------------
43+
* Obtain the currect vector zoom level and location.
44+
* Add 1 to the vector zoom level to get the equivalent raster zoom level
45+
* Browse to the current location on the raster map.
46+
* Raster zooms are whole numbers, so any fractional part of the vector
47+
* zoom level is trunctated.
48+
* ------------------------------------------------------------------------- */
49+
function show_raster()
50+
{
51+
let zoom = map.getZoom() + 1;
52+
let {lng, lat} = map.getCenter();
53+
window.open ( '../maps/map/map.html'+'#'+zoom+'/'+lat+'/'+lng,'_self',false )
54+
}
55+
56+
function show_osm()
57+
{
58+
let zoom = map.getZoom() + 1;
59+
let {lng, lat} = map.getCenter();
60+
window.open ( 'https://osm.org/#map='+zoom+'/'+lat+'/'+lng,'_self',false )
61+
}
62+
63+
function show_whatpub()
64+
{
65+
let {lng, lat} = map.getCenter();
66+
window.open ( 'https://camra.org.uk/pubs/location/'+lat+'/'+lng+'?sort=nearest&hide_closed=false&venue_types[0]=P', '_blank' )
67+
}
68+
69+
function show_bustimes()
70+
{
71+
let zoom = map.getZoom();
72+
73+
if ( zoom > 18 )
74+
{
75+
zoom = 18;
76+
}
77+
78+
let {lng, lat} = map.getCenter();
79+
window.open ( 'https://bustimes.org/map#'+zoom+'/'+lat+'/'+lng,false )
80+
}
81+
82+
/* -------------------------------------------------------------------------
83+
* A button to display an about screen.
84+
* ------------------------------------------------------------------------- */
85+
function show_about()
86+
{
87+
window.open ( '../maps/map/vector.html','_self',false )
88+
}
89+
90+
function show_schema_changelog()
91+
{
92+
window.open ( '../maps/map/changelog_sve01.html','_self',false )
93+
}
94+
95+
function show_style_changelog()
96+
{
97+
window.open ( '../maps/map/changelog_svwd01.html','_self',false )
98+
}
99+
100+
function show_mkgmap()
101+
{
102+
window.open ( '../maps/map/mkgmap.html','_self',false )
103+
}
104+
105+
fetch("/metadata")
106+
.then(response => response.json())
107+
.then(data => {
108+
var styleURL = window.location.protocol+'//'+window.location.host+'/style.json';
109+
var bounds = data['bounds'].split(',');
110+
map = new maplibregl.Map({
111+
container: 'map', // container id
112+
style: styleURL, // stylesheet location
113+
center: [(Number(bounds[0])+Number(bounds[2]))/2,
114+
(Number(bounds[1])+Number(bounds[3]))/2], // starting position [lng, lat]
115+
hash: true,
116+
zoom: 13, // starting zoom
117+
maxZoom: 25,
118+
attributionControl: false
119+
});
120+
121+
var styleList = document.getElementById('styles');
122+
styleList.addEventListener('change', function(e) {
123+
var langId = e.target.value;
124+
map.setStyle( window.location.protocol+'//'+window.location.host+'/vector/style_svwd01' + langId + '.json' );
125+
var url = new URL(window.location.href);
126+
url.searchParams.set('style', langId);
127+
window.history.replaceState(null, null, url);
128+
});
129+
130+
// Add default OSM attribution
131+
map.addControl(new maplibregl.AttributionControl({ customAttribution: osmAttrib }), 'bottom-right');
132+
133+
// Add zoom control
134+
map.addControl(new maplibregl.NavigationControl());
135+
136+
map.dragRotate.disable();
137+
map.keyboard.disableRotation();
138+
map.touchZoomRotate.disableRotation();
139+
140+
// Add geolocate control
141+
map.addControl(
142+
new maplibregl.GeolocateControl({
143+
positionOptions: { enableHighAccuracy: true },
144+
trackUserLocation: true
145+
})
146+
);
147+
148+
// Add scale control at bottom-left
149+
map.addControl(
150+
new maplibregl.ScaleControl({
151+
unit: 'metric'
152+
})
153+
);
154+
155+
// -- Comment the following lines out to remove debug UI --
156+
map.showTileBoundaries=true;
157+
158+
map.addControl(new MaplibreInspect({
159+
showInspectMap: true,
160+
showInspectButton: false
161+
}));
162+
163+
// -- --
164+
}
165+
)
166+
</script>
167+
168+
</body>
169+
</html>

‎resources/svwd01_index_nodebug_langswitch.html‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset='utf-8' />
5+
<title>SPEC_NAME</title>
6+
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
7+
<script src='https://unpkg.com/[email protected]/dist/maplibre-gl.js'></script>
8+
<link href='https://unpkg.com/[email protected]/dist/maplibre-gl.css' rel='stylesheet' />
9+
<script src='https://unpkg.com/@maplibre/maplibre-gl-inspect@latest/dist/maplibre-gl-inspect.js'></script>
10+
<link href='https://unpkg.com/@maplibre/maplibre-gl-inspect@latest/dist/maplibre-gl-inspect.css' rel='stylesheet' />
11+
<style>
12+
body { margin:0; padding:0; }
13+
#map { position:absolute; top:50px; bottom:0; width:100%; }
14+
#refresh { position: absolute; top: 15px; left: 15px; background-color: white; padding: 5px;
15+
border: 1px solid black; font-family: Avenir; cursor: pointer; }
16+
</style>
17+
</head>
18+
<body>
19+
<div id="rest" style="font-size:100%; padding: 8px">
20+
<button id="button1" onclick="show_about();" >about</button>
21+
<button id="button2" onclick="show_schema_changelog();" >schema</button>
22+
<button id="button3" onclick="show_style_changelog();" >style</button>
23+
<button id="button4" onclick="show_mkgmap();" >mkgmap</button>
24+
<button id="button5" onclick="show_raster();" >raster</button>
25+
<button id="button5" onclick="show_osm();" >OSM</button>
26+
<button id="button5" onclick="show_whatpub();" >Camra pubs</button>
27+
<button id="button5" onclick="show_bustimes();" >Bus</button>
28+
<select id="styles" class="dropdownSelect">
29+
<option value="">Default</option>
30+
<option value="cy">Welsh</option>
31+
<option value="en">English</option>
32+
<option value="ga">Irish</option>
33+
<option value="gd">Scots Gaelic</option>
34+
</select>
35+
</div>
36+
<div id='map'></div>
37+
<!-- <div id='refresh' onclick='reload()'>Reload</div> -->
38+
<script>
39+
var map;
40+
var osmAttrib='Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>';
41+
42+
/* -------------------------------------------------------------------------
43+
* Obtain the currect vector zoom level and location.
44+
* Add 1 to the vector zoom level to get the equivalent raster zoom level
45+
* Browse to the current location on the raster map.
46+
* Raster zooms are whole numbers, so any fractional part of the vector
47+
* zoom level is trunctated.
48+
* ------------------------------------------------------------------------- */
49+
function show_raster()
50+
{
51+
let zoom = map.getZoom() + 1;
52+
let {lng, lat} = map.getCenter();
53+
window.open ( '../maps/map/map.html'+'#'+zoom+'/'+lat+'/'+lng,'_self',false )
54+
}
55+
56+
function show_osm()
57+
{
58+
let zoom = map.getZoom() + 1;
59+
let {lng, lat} = map.getCenter();
60+
window.open ( 'https://osm.org/#map='+zoom+'/'+lat+'/'+lng,'_self',false )
61+
}
62+
63+
function show_whatpub()
64+
{
65+
let {lng, lat} = map.getCenter();
66+
window.open ( 'https://camra.org.uk/pubs/location/'+lat+'/'+lng+'?sort=nearest&hide_closed=false&venue_types[0]=P', '_blank' )
67+
}
68+
69+
function show_bustimes()
70+
{
71+
let zoom = map.getZoom();
72+
73+
if ( zoom > 18 )
74+
{
75+
zoom = 18;
76+
}
77+
78+
let {lng, lat} = map.getCenter();
79+
window.open ( 'https://bustimes.org/map#'+zoom+'/'+lat+'/'+lng,false )
80+
}
81+
82+
/* -------------------------------------------------------------------------
83+
* A button to display an about screen.
84+
* ------------------------------------------------------------------------- */
85+
function show_about()
86+
{
87+
window.open ( '../maps/map/vector.html','_self',false )
88+
}
89+
90+
function show_schema_changelog()
91+
{
92+
window.open ( '../maps/map/changelog_sve01.html','_self',false )
93+
}
94+
95+
function show_style_changelog()
96+
{
97+
window.open ( '../maps/map/changelog_svwd01.html','_self',false )
98+
}
99+
100+
function show_mkgmap()
101+
{
102+
window.open ( '../maps/map/mkgmap.html','_self',false )
103+
}
104+
105+
fetch("/metadata")
106+
.then(response => response.json())
107+
.then(data => {
108+
var styleURL = window.location.protocol+'//'+window.location.host+'/style.json';
109+
var bounds = data['bounds'].split(',');
110+
map = new maplibregl.Map({
111+
container: 'map', // container id
112+
style: styleURL, // stylesheet location
113+
center: [(Number(bounds[0])+Number(bounds[2]))/2,
114+
(Number(bounds[1])+Number(bounds[3]))/2], // starting position [lng, lat]
115+
hash: true,
116+
zoom: 13, // starting zoom
117+
maxZoom: 25,
118+
attributionControl: false
119+
});
120+
121+
var styleList = document.getElementById('styles');
122+
styleList.addEventListener('change', function(e) {
123+
var langId = e.target.value;
124+
map.setStyle( window.location.protocol+'//'+window.location.host+'/vector/style_svwd01' + langId + '.json' );
125+
var url = new URL(window.location.href);
126+
url.searchParams.set('style', langId);
127+
window.history.replaceState(null, null, url);
128+
});
129+
130+
// Add default OSM attribution
131+
map.addControl(new maplibregl.AttributionControl({ customAttribution: osmAttrib }), 'bottom-right');
132+
133+
// Add zoom control
134+
map.addControl(new maplibregl.NavigationControl());
135+
136+
map.dragRotate.disable();
137+
map.keyboard.disableRotation();
138+
map.touchZoomRotate.disableRotation();
139+
140+
// Add geolocate control
141+
map.addControl(
142+
new maplibregl.GeolocateControl({
143+
positionOptions: { enableHighAccuracy: true },
144+
trackUserLocation: true
145+
})
146+
);
147+
148+
// Add scale control at bottom-left
149+
map.addControl(
150+
new maplibregl.ScaleControl({
151+
unit: 'metric'
152+
})
153+
);
154+
155+
// -- Comment the following lines out to remove debug UI --
156+
// map.showTileBoundaries=true;
157+
158+
// map.addControl(new MaplibreInspect({
159+
// showInspectMap: true,
160+
// showInspectButton: false
161+
// }));
162+
163+
// -- --
164+
}
165+
)
166+
</script>
167+
168+
</body>
169+
</html>

0 commit comments

Comments
 (0)