Skip to content

Commit e083694

Browse files
author
Andy Townsend
committed
Added svwd09 - "on a globe" version of svwd03.
1 parent 53e7307 commit e083694

File tree

6 files changed

+118
-0
lines changed

6 files changed

+118
-0
lines changed

‎changelog.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
# Changes made to the [SVWD scripts](https://github.com/SomeoneElseOSM/SomeoneElse-vector-web-display/blob/main/README.md).
22
See also the [changelog](https://github.com/SomeoneElseOSM/SomeoneElse-vector-web-display/blob/main/resources/changelog_svwd01.md) for the example display style here.
33

4+
## 23/08/2025
5+
Added a map style "svwd09" - the same as "svwd03", but displaying on a globe.
6+
47
## 28/07/2025
58
Made the default number of icons in each row of the sprite fewer, so that it is within the defaults for `convert`.
69

‎resources/README_svwd09.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Display style for use with shortbread schema
2+
3+
See the schema [documentation](https://shortbread-tiles.org/schema/1.0/).
4+
5+
This is a globe variant of the [svwd03](https://github.com/SomeoneElseOSM/SomeoneElse-vector-web-display/blob/main/resources/README_svwd03.md) map style. See that readme for technical detail. See also [this](https://maplibre.org/maplibre-gl-js/docs/examples/display-a-globe-with-a-vector-map/) MapLibre example.
6+
7+
## Credits
8+
9+
The [Shortbread](https://shortbread-tiles.org/) vector tile schema.
10+
11+
The [OSMF minutely updated vector tiles demo](https://community.openstreetmap.org/t/minutely-updated-vector-tiles-demo/110121), which the "spec" file here uses as a source.
12+
13+
Cartography is based on [svwd01](https://github.com/SomeoneElseOSM/SomeoneElse-vector-extract/blob/main/resources/README_sve01.md), in turn based on [this](https://map.atownsend.org.uk/maps/map/map.html) which in turn was developed from that found in [OSM Carto](https://wiki.openstreetmap.org/wiki/OpenStreetMap_Carto#Forks_and_independent_deployments) circa 2014, based in turn on the "[Mapnik style](https://github.com/openstreetmap/mapnik-stylesheets)" from considerably earlier.
14+
15+
The fonts used are from [Klokantech](https://github.com/klokantech/klokantech-gl-fonts), in turn based on Google's [noto](https://fonts.google.com/noto).

‎resources/changelog_svwd09.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Changes made to the [SVWD09 web display style](https://github.com/SomeoneElseOSM/SomeoneElse-vector-web-display/blob/main/resources/README_svwd09.md).
2+
See also the [changelog](https://github.com/SomeoneElseOSM/SomeoneElse-vector-web-display/blob/main/changelog.md) for the scripts here.
3+
4+
## 23/08/2025
5+
Initial release.
6+
Functionally equivalent to the [SVWD03 web display style](https://github.com/SomeoneElseOSM/SomeoneElse-vector-web-display/blob/main/resources/README_svwd03.md); only the HTML page differs, so this will incorporate all style changes to that.

‎resources/svwd03sprite.png‎

-54 Bytes
Loading

‎resources/[email protected]‎

-54 Bytes
Loading

‎resources/svwd09_index.html‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
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:0; 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+
20+
<div id='map'></div>
21+
<!-- <div id='refresh' onclick='reload()'>Reload</div> -->
22+
<script>
23+
var map;
24+
var osmAttrib='Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>';
25+
26+
fetch("/metadata")
27+
.then(response => response.json())
28+
.then(data => {
29+
var styleURL = window.location.protocol+'//'+window.location.host+'/style.json';
30+
var bounds = data['bounds'].split(',');
31+
32+
// Currently RTL support isn't native in MapLibre GL, but a MapBox plugin does support it.
33+
// See https://maplibre.org/maplibre-gl-js/docs/examples/mapbox-gl-rtl-text/
34+
maplibregl.setRTLTextPlugin(
35+
'https://unpkg.com/@mapbox/[email protected]/dist/mapbox-gl-rtl-text.js',
36+
true // Lazy load the plugin
37+
);
38+
39+
map = new maplibregl.Map({
40+
container: 'map', // container id
41+
style: styleURL, // stylesheet location
42+
center: [ -1.5, 53 ], // starting position [lng, lat]
43+
hash: true,
44+
zoom: 8, // starting zoom
45+
maxZoom: 25,
46+
attributionControl: true
47+
});
48+
49+
map.on('style.load', () => {
50+
map.setProjection({
51+
type: 'globe', // Set projection to globe
52+
});
53+
});
54+
55+
// Add default OSM attribution
56+
// map.addControl(new maplibregl.AttributionControl({ customAttribution: osmAttrib }), 'bottom-right');
57+
58+
// Add zoom control
59+
map.addControl(new maplibregl.NavigationControl());
60+
61+
map.dragRotate.disable();
62+
map.keyboard.disableRotation();
63+
map.touchZoomRotate.disableRotation();
64+
65+
// Add geolocate control
66+
map.addControl(
67+
new maplibregl.GeolocateControl({
68+
positionOptions: { enableHighAccuracy: true },
69+
trackUserLocation: true
70+
})
71+
);
72+
73+
// Add scale control at bottom-left
74+
map.addControl(
75+
new maplibregl.ScaleControl({
76+
unit: 'metric'
77+
})
78+
);
79+
80+
// -- Comment the following lines out to remove debug UI --
81+
map.showTileBoundaries=false;
82+
83+
// map.addControl(new MaplibreInspect({
84+
// showInspectMap: true,
85+
// showInspectButton: false
86+
// }));
87+
88+
// -- --
89+
}
90+
)
91+
</script>
92+
93+
</body>
94+
</html>

0 commit comments

Comments
 (0)