@openhistoricalmap/map-styles 0.9.8 → 0.9.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.nvmrc +1 -1
- package/CODE_OF_CONDUCT.md +94 -94
- package/LICENSE.md +121 -121
- package/README.md +115 -115
- package/demo.html +79 -79
- package/dist/fonts/OpenHistorical/README.md +42 -42
- package/dist/historical/historical.json +12938 -12730
- package/dist/historical/historical_spritesheet.json +1149 -1149
- package/dist/historical/historical_spritesheet@2x.json +1149 -1149
- package/dist/japanese_scroll/japanese_scroll.json +4077 -4076
- package/dist/japanese_scroll/japanese_scroll_spritesheet.json +38 -38
- package/dist/japanese_scroll/japanese_scroll_spritesheet@2x.json +38 -38
- package/dist/ohm.styles.js +35216 -35005
- package/dist/railway/railway.json +13933 -13932
- package/dist/railway/railway_spritesheet.json +1135 -1135
- package/dist/railway/railway_spritesheet@2x.json +1135 -1135
- package/dist/woodblock/woodblock.json +4261 -4260
- package/dist/woodblock/woodblock_spritesheet.json +72 -72
- package/dist/woodblock/woodblock_spritesheet@2x.json +72 -72
- package/docs/historical.md +34 -34
- package/docs/japanese_scroll.md +40 -40
- package/docs/railway.md +60 -60
- package/docs/woodblock.md +29 -29
- package/glyphicons/fonts/glyphicons-regular.svg +827 -827
- package/glyphicons/index.html +857 -857
- package/glyphicons/license.txt +63 -63
- package/historical/historical.json +7014 -6883
- package/historical/historical_spritesheet.json +1149 -1149
- package/historical/historical_spritesheet@2x.json +1149 -1149
- package/historical/poi/bell_tower-18.svg +68 -68
- package/historical/poi/border_control-12.svg +10 -10
- package/historical/poi/border_control-18.svg +4 -4
- package/historical/poi/bucket-18.svg +4 -4
- package/historical/poi/grave_yard-18.svg +6 -6
- package/historical/poi/updated_POI.json +1149 -1149
- package/img/README.md +1 -1
- package/index.html +73 -54
- package/japanese_scroll/japanese_scroll.json +2286 -2285
- package/japanese_scroll/japanese_scroll_spritesheet.json +38 -38
- package/japanese_scroll/japanese_scroll_spritesheet@2x.json +38 -38
- package/package.json +34 -32
- package/railway/railway.json +6889 -6888
- package/railway/railway_demo.html +144 -144
- package/railway/railway_spritesheet.json +1135 -1135
- package/railway/railway_spritesheet@2x.json +1135 -1135
- package/scripts/prepare.js +84 -84
- package/ssl/cert.pem +23 -23
- package/ssl/csr.pem +18 -18
- package/ssl/key.pem +28 -28
- package/wkg/index.html +18 -0
- package/woodblock/woodblock.json +2424 -2423
- package/woodblock/woodblock_spritesheet.json +72 -72
- package/woodblock/woodblock_spritesheet@2x.json +72 -72
|
@@ -1,144 +1,144 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8" />
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
-
|
|
7
|
-
<title>OpenHistoricalMap :: Leaflet MBGL TimeSlider Control Demo</title>
|
|
8
|
-
|
|
9
|
-
<!-- Leaflet and Mapbox GL JS API, the the adapter for using MB within L -->
|
|
10
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>
|
|
11
|
-
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.css" rel="stylesheet" />
|
|
12
|
-
|
|
13
|
-
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js"></script>
|
|
14
|
-
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css" rel="stylesheet" />
|
|
15
|
-
|
|
16
|
-
<script src="https://unpkg.com/mapbox-gl-leaflet@0.0.15/leaflet-mapbox-gl.js"></script>
|
|
17
|
-
|
|
18
|
-
<!-- the timeslider control and suporting DecimalDate library -->
|
|
19
|
-
<!-- pick either the minified or full-length version -->
|
|
20
|
-
<script src="https://openhistoricalmap.github.io/leaflet-ohm-timeslider-v2/decimaldate.js"></script>
|
|
21
|
-
<script src="https://openhistoricalmap.github.io/leaflet-ohm-timeslider-v2/leaflet-ohm-timeslider.js"></script>
|
|
22
|
-
<link href="https://openhistoricalmap.github.io/leaflet-ohm-timeslider-v2/leaflet-ohm-timeslider.css" rel="stylesheet" />
|
|
23
|
-
<!--
|
|
24
|
-
<script src="decimaldate.min.js"></script>
|
|
25
|
-
<script src="leaflet-ohm-timeslider.min.js"></script>
|
|
26
|
-
<link href="leaflet-ohm-timeslider.min.css" rel="stylesheet" />
|
|
27
|
-
-->
|
|
28
|
-
|
|
29
|
-
<script src="rail.js"></script>
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
</head>
|
|
33
|
-
<body>
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
<div id="map"></div>
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
<div id="languagepicker"></div>
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
<style>
|
|
43
|
-
body, html {
|
|
44
|
-
margin: 0;
|
|
45
|
-
padding: 0;
|
|
46
|
-
}
|
|
47
|
-
#map {
|
|
48
|
-
background-color: #ccc;
|
|
49
|
-
width: 100vw;
|
|
50
|
-
height: 100vh;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
#languagepicker {
|
|
54
|
-
position: absolute;
|
|
55
|
-
top: 0;
|
|
56
|
-
right: 0;
|
|
57
|
-
border-bottom-left-radius: 5px;
|
|
58
|
-
background: white;
|
|
59
|
-
color: black;
|
|
60
|
-
|
|
61
|
-
z-index: 1000;
|
|
62
|
-
|
|
63
|
-
padding: 0 0 0.5em 0.5em;
|
|
64
|
-
}
|
|
65
|
-
#languagepicker label {
|
|
66
|
-
display: block;
|
|
67
|
-
}
|
|
68
|
-
</style>
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
<script>
|
|
72
|
-
const START_ZOOM = 7.0;
|
|
73
|
-
const START_CENTER = [ 42.423457,-87.110596 ];
|
|
74
|
-
|
|
75
|
-
let MAP, TIMESLIDER, OHMLAYER;
|
|
76
|
-
|
|
77
|
-
document.addEventListener('DOMContentLoaded', function () {
|
|
78
|
-
MAP = L.map('map', {
|
|
79
|
-
zoomSnap: 0.1,
|
|
80
|
-
})
|
|
81
|
-
.setView(START_CENTER, START_ZOOM);
|
|
82
|
-
|
|
83
|
-
L.control.scale().addTo(MAP);
|
|
84
|
-
|
|
85
|
-
OHMLAYER = new L.MapboxGL({
|
|
86
|
-
attribution: "<a href='http://wiki.openstreetmap.org/wiki/OHM'>OHM</a>",
|
|
87
|
-
style: OHM_RAIL_STYLE,
|
|
88
|
-
accessToken: "no-token",
|
|
89
|
-
});
|
|
90
|
-
OHMLAYER.addTo(MAP);
|
|
91
|
-
|
|
92
|
-
const tsoptions = {
|
|
93
|
-
vectorLayer: OHMLAYER,
|
|
94
|
-
vectorSourceName: 'osm',
|
|
95
|
-
range: ['1850-01-01', '2020-12-31'],
|
|
96
|
-
date: '1900-01-01',
|
|
97
|
-
stepInterval: 1,
|
|
98
|
-
stepAmount: '10year',
|
|
99
|
-
onDateChange: function (date) {
|
|
100
|
-
console.debug(['timeslider.js onDateChange', date, this]);
|
|
101
|
-
},
|
|
102
|
-
onRangeChange: function (range) {
|
|
103
|
-
console.debug(['timeslider.js onRangeChange', range, this]);
|
|
104
|
-
},
|
|
105
|
-
onReady: function () {
|
|
106
|
-
console.debug(['timeslider.js onReady', this]);
|
|
107
|
-
},
|
|
108
|
-
};
|
|
109
|
-
const selectedlanguage = (new URLSearchParams(document.location.search)).get('lang');
|
|
110
|
-
if (selectedlanguage) {
|
|
111
|
-
tsoptions.language = selectedlanguage;
|
|
112
|
-
}
|
|
113
|
-
TIMESLIDER = new L.Control.OHMTimeSlider(tsoptions).addTo(MAP);
|
|
114
|
-
|
|
115
|
-
// add the list of languages to the language picker display
|
|
116
|
-
const languageoptions = TIMESLIDER.listLanguages().slice();
|
|
117
|
-
languageoptions.splice(0, 0, 'auto');
|
|
118
|
-
|
|
119
|
-
languageoptions.forEach(function (language) {
|
|
120
|
-
const div = document.createElement('label');
|
|
121
|
-
|
|
122
|
-
const txt = document.createElement('span');
|
|
123
|
-
txt.innerText = language;
|
|
124
|
-
|
|
125
|
-
const cb = document.createElement('input');
|
|
126
|
-
cb.type = 'radio';
|
|
127
|
-
cb.name = 'language';
|
|
128
|
-
cb.value = language;
|
|
129
|
-
if (language == selectedlanguage || (!selectedlanguage && language == 'auto')) cb.checked = true;
|
|
130
|
-
|
|
131
|
-
div.appendChild(txt);
|
|
132
|
-
div.appendChild(cb);
|
|
133
|
-
document.getElementById('languagepicker').appendChild(div);
|
|
134
|
-
|
|
135
|
-
cb.addEventListener('change', function () {
|
|
136
|
-
const newlanguage = this.value;
|
|
137
|
-
document.location.search = '?lang=' + newlanguage;
|
|
138
|
-
});
|
|
139
|
-
});
|
|
140
|
-
});
|
|
141
|
-
</script>
|
|
142
|
-
|
|
143
|
-
</body>
|
|
144
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
|
|
7
|
+
<title>OpenHistoricalMap :: Leaflet MBGL TimeSlider Control Demo</title>
|
|
8
|
+
|
|
9
|
+
<!-- Leaflet and Mapbox GL JS API, the the adapter for using MB within L -->
|
|
10
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>
|
|
11
|
+
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.css" rel="stylesheet" />
|
|
12
|
+
|
|
13
|
+
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js"></script>
|
|
14
|
+
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css" rel="stylesheet" />
|
|
15
|
+
|
|
16
|
+
<script src="https://unpkg.com/mapbox-gl-leaflet@0.0.15/leaflet-mapbox-gl.js"></script>
|
|
17
|
+
|
|
18
|
+
<!-- the timeslider control and suporting DecimalDate library -->
|
|
19
|
+
<!-- pick either the minified or full-length version -->
|
|
20
|
+
<script src="https://openhistoricalmap.github.io/leaflet-ohm-timeslider-v2/decimaldate.js"></script>
|
|
21
|
+
<script src="https://openhistoricalmap.github.io/leaflet-ohm-timeslider-v2/leaflet-ohm-timeslider.js"></script>
|
|
22
|
+
<link href="https://openhistoricalmap.github.io/leaflet-ohm-timeslider-v2/leaflet-ohm-timeslider.css" rel="stylesheet" />
|
|
23
|
+
<!--
|
|
24
|
+
<script src="decimaldate.min.js"></script>
|
|
25
|
+
<script src="leaflet-ohm-timeslider.min.js"></script>
|
|
26
|
+
<link href="leaflet-ohm-timeslider.min.css" rel="stylesheet" />
|
|
27
|
+
-->
|
|
28
|
+
|
|
29
|
+
<script src="rail.js"></script>
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
</head>
|
|
33
|
+
<body>
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
<div id="map"></div>
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
<div id="languagepicker"></div>
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
<style>
|
|
43
|
+
body, html {
|
|
44
|
+
margin: 0;
|
|
45
|
+
padding: 0;
|
|
46
|
+
}
|
|
47
|
+
#map {
|
|
48
|
+
background-color: #ccc;
|
|
49
|
+
width: 100vw;
|
|
50
|
+
height: 100vh;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
#languagepicker {
|
|
54
|
+
position: absolute;
|
|
55
|
+
top: 0;
|
|
56
|
+
right: 0;
|
|
57
|
+
border-bottom-left-radius: 5px;
|
|
58
|
+
background: white;
|
|
59
|
+
color: black;
|
|
60
|
+
|
|
61
|
+
z-index: 1000;
|
|
62
|
+
|
|
63
|
+
padding: 0 0 0.5em 0.5em;
|
|
64
|
+
}
|
|
65
|
+
#languagepicker label {
|
|
66
|
+
display: block;
|
|
67
|
+
}
|
|
68
|
+
</style>
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
<script>
|
|
72
|
+
const START_ZOOM = 7.0;
|
|
73
|
+
const START_CENTER = [ 42.423457,-87.110596 ];
|
|
74
|
+
|
|
75
|
+
let MAP, TIMESLIDER, OHMLAYER;
|
|
76
|
+
|
|
77
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
78
|
+
MAP = L.map('map', {
|
|
79
|
+
zoomSnap: 0.1,
|
|
80
|
+
})
|
|
81
|
+
.setView(START_CENTER, START_ZOOM);
|
|
82
|
+
|
|
83
|
+
L.control.scale().addTo(MAP);
|
|
84
|
+
|
|
85
|
+
OHMLAYER = new L.MapboxGL({
|
|
86
|
+
attribution: "<a href='http://wiki.openstreetmap.org/wiki/OHM'>OHM</a>",
|
|
87
|
+
style: OHM_RAIL_STYLE,
|
|
88
|
+
accessToken: "no-token",
|
|
89
|
+
});
|
|
90
|
+
OHMLAYER.addTo(MAP);
|
|
91
|
+
|
|
92
|
+
const tsoptions = {
|
|
93
|
+
vectorLayer: OHMLAYER,
|
|
94
|
+
vectorSourceName: 'osm',
|
|
95
|
+
range: ['1850-01-01', '2020-12-31'],
|
|
96
|
+
date: '1900-01-01',
|
|
97
|
+
stepInterval: 1,
|
|
98
|
+
stepAmount: '10year',
|
|
99
|
+
onDateChange: function (date) {
|
|
100
|
+
console.debug(['timeslider.js onDateChange', date, this]);
|
|
101
|
+
},
|
|
102
|
+
onRangeChange: function (range) {
|
|
103
|
+
console.debug(['timeslider.js onRangeChange', range, this]);
|
|
104
|
+
},
|
|
105
|
+
onReady: function () {
|
|
106
|
+
console.debug(['timeslider.js onReady', this]);
|
|
107
|
+
},
|
|
108
|
+
};
|
|
109
|
+
const selectedlanguage = (new URLSearchParams(document.location.search)).get('lang');
|
|
110
|
+
if (selectedlanguage) {
|
|
111
|
+
tsoptions.language = selectedlanguage;
|
|
112
|
+
}
|
|
113
|
+
TIMESLIDER = new L.Control.OHMTimeSlider(tsoptions).addTo(MAP);
|
|
114
|
+
|
|
115
|
+
// add the list of languages to the language picker display
|
|
116
|
+
const languageoptions = TIMESLIDER.listLanguages().slice();
|
|
117
|
+
languageoptions.splice(0, 0, 'auto');
|
|
118
|
+
|
|
119
|
+
languageoptions.forEach(function (language) {
|
|
120
|
+
const div = document.createElement('label');
|
|
121
|
+
|
|
122
|
+
const txt = document.createElement('span');
|
|
123
|
+
txt.innerText = language;
|
|
124
|
+
|
|
125
|
+
const cb = document.createElement('input');
|
|
126
|
+
cb.type = 'radio';
|
|
127
|
+
cb.name = 'language';
|
|
128
|
+
cb.value = language;
|
|
129
|
+
if (language == selectedlanguage || (!selectedlanguage && language == 'auto')) cb.checked = true;
|
|
130
|
+
|
|
131
|
+
div.appendChild(txt);
|
|
132
|
+
div.appendChild(cb);
|
|
133
|
+
document.getElementById('languagepicker').appendChild(div);
|
|
134
|
+
|
|
135
|
+
cb.addEventListener('change', function () {
|
|
136
|
+
const newlanguage = this.value;
|
|
137
|
+
document.location.search = '?lang=' + newlanguage;
|
|
138
|
+
});
|
|
139
|
+
});
|
|
140
|
+
});
|
|
141
|
+
</script>
|
|
142
|
+
|
|
143
|
+
</body>
|
|
144
|
+
</html>
|