@openhistoricalmap/map-styles 0.9.6 → 0.9.8
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 -50
- package/demo.html +79 -79
- package/dist/fonts/OpenHistorical/README.md +42 -42
- package/dist/historical/historical.json +12730 -12370
- package/dist/historical/historical_spritesheet.json +1149 -1149
- package/dist/historical/historical_spritesheet@2x.json +1149 -1149
- package/dist/japanese_scroll/japanese_scroll.json +4076 -4062
- 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 +35005 -34454
- package/dist/railway/railway.json +13932 -13755
- package/dist/railway/railway_spritesheet.json +1135 -1135
- package/dist/railway/railway_spritesheet@2x.json +1135 -1135
- package/dist/woodblock/woodblock.json +4260 -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 +6883 -6708
- 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 +54 -54
- package/japanese_scroll/japanese_scroll.json +2285 -2284
- package/japanese_scroll/japanese_scroll_spritesheet.json +38 -38
- package/japanese_scroll/japanese_scroll_spritesheet@2x.json +38 -38
- package/package.json +32 -32
- package/railway/railway.json +6888 -6837
- 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/woodblock/woodblock.json +2423 -2423
- package/woodblock/woodblock_spritesheet.json +72 -72
- package/woodblock/woodblock_spritesheet@2x.json +72 -72
package/demo.html
CHANGED
|
@@ -1,79 +1,79 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8" />
|
|
5
|
-
<title>Style demo, no timeslider</title>
|
|
6
|
-
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
|
|
7
|
-
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js"></script>
|
|
8
|
-
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css" rel="stylesheet" />
|
|
9
|
-
<style>
|
|
10
|
-
body { margin: 0; padding: 0; }
|
|
11
|
-
#map { height: 90vh; bottom: 0; width: calc(100% - 350px); float: left; }
|
|
12
|
-
#map canvas {
|
|
13
|
-
cursor: crosshair;
|
|
14
|
-
}
|
|
15
|
-
.intro {margin: 10px; font-family: sans-serif}
|
|
16
|
-
#features {
|
|
17
|
-
top: 0;
|
|
18
|
-
left: 0;
|
|
19
|
-
float: right;
|
|
20
|
-
bottom: 0;
|
|
21
|
-
width: 350px;
|
|
22
|
-
overflow-y: scroll;
|
|
23
|
-
height: 90vh;
|
|
24
|
-
background: rgba(255, 255, 255, 0.8);
|
|
25
|
-
}
|
|
26
|
-
</style>
|
|
27
|
-
</head>
|
|
28
|
-
<body>
|
|
29
|
-
<div class="intro">
|
|
30
|
-
<h1>Style demo, no timeslider</h1>
|
|
31
|
-
<p>This is the simplest demo of a map style. Unlike the demo in the <a href="https://github.com/OpenHistoricalMap/mbgl-timeslider">Mapbox GL timeslider</a> and <a href="https://github.com/OpenHistoricalMap/mbgltimeslider-leaflet-control">Leaflet timeslider</a> repos, this will show you everything on the map regardless of strt and end dates. It is useful for initial testing of cartography without worrying about the completeness of data data or proper functioning of filters.</p>
|
|
32
|
-
</div>
|
|
33
|
-
<pre id="features">Click the map to see a readout of rendered features</pre>
|
|
34
|
-
<div id="map"></div>
|
|
35
|
-
<script>
|
|
36
|
-
var map = new mapboxgl.Map({
|
|
37
|
-
container: 'map', // container id
|
|
38
|
-
style: 'main/main.json', // stylesheet location
|
|
39
|
-
center: [-42.3115,70.0012], // starting position [lng, lat]
|
|
40
|
-
zoom: 13 // starting zoom
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
// Add zoom and rotation controls to the map.
|
|
44
|
-
map.addControl(new mapboxgl.NavigationControl());
|
|
45
|
-
|
|
46
|
-
//show features rendered on the map
|
|
47
|
-
map.on('click', function(e) {
|
|
48
|
-
var features = map.queryRenderedFeatures(e.point);
|
|
49
|
-
|
|
50
|
-
// Limit the number of properties we're displaying for
|
|
51
|
-
// legibility and performance
|
|
52
|
-
var displayProperties = [
|
|
53
|
-
'type',
|
|
54
|
-
'properties',
|
|
55
|
-
'id',
|
|
56
|
-
'layer',
|
|
57
|
-
'source',
|
|
58
|
-
'sourceLayer',
|
|
59
|
-
'state'
|
|
60
|
-
];
|
|
61
|
-
|
|
62
|
-
var displayFeatures = features.map(function(feat) {
|
|
63
|
-
var displayFeat = {};
|
|
64
|
-
displayProperties.forEach(function(prop) {
|
|
65
|
-
displayFeat[prop] = feat[prop];
|
|
66
|
-
});
|
|
67
|
-
return displayFeat;
|
|
68
|
-
});
|
|
69
|
-
|
|
70
|
-
document.getElementById('features').innerHTML = JSON.stringify(
|
|
71
|
-
displayFeatures,
|
|
72
|
-
null,
|
|
73
|
-
2
|
|
74
|
-
);
|
|
75
|
-
});
|
|
76
|
-
</script>
|
|
77
|
-
|
|
78
|
-
</body>
|
|
79
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Style demo, no timeslider</title>
|
|
6
|
+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
|
|
7
|
+
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js"></script>
|
|
8
|
+
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css" rel="stylesheet" />
|
|
9
|
+
<style>
|
|
10
|
+
body { margin: 0; padding: 0; }
|
|
11
|
+
#map { height: 90vh; bottom: 0; width: calc(100% - 350px); float: left; }
|
|
12
|
+
#map canvas {
|
|
13
|
+
cursor: crosshair;
|
|
14
|
+
}
|
|
15
|
+
.intro {margin: 10px; font-family: sans-serif}
|
|
16
|
+
#features {
|
|
17
|
+
top: 0;
|
|
18
|
+
left: 0;
|
|
19
|
+
float: right;
|
|
20
|
+
bottom: 0;
|
|
21
|
+
width: 350px;
|
|
22
|
+
overflow-y: scroll;
|
|
23
|
+
height: 90vh;
|
|
24
|
+
background: rgba(255, 255, 255, 0.8);
|
|
25
|
+
}
|
|
26
|
+
</style>
|
|
27
|
+
</head>
|
|
28
|
+
<body>
|
|
29
|
+
<div class="intro">
|
|
30
|
+
<h1>Style demo, no timeslider</h1>
|
|
31
|
+
<p>This is the simplest demo of a map style. Unlike the demo in the <a href="https://github.com/OpenHistoricalMap/mbgl-timeslider">Mapbox GL timeslider</a> and <a href="https://github.com/OpenHistoricalMap/mbgltimeslider-leaflet-control">Leaflet timeslider</a> repos, this will show you everything on the map regardless of strt and end dates. It is useful for initial testing of cartography without worrying about the completeness of data data or proper functioning of filters.</p>
|
|
32
|
+
</div>
|
|
33
|
+
<pre id="features">Click the map to see a readout of rendered features</pre>
|
|
34
|
+
<div id="map"></div>
|
|
35
|
+
<script>
|
|
36
|
+
var map = new mapboxgl.Map({
|
|
37
|
+
container: 'map', // container id
|
|
38
|
+
style: 'main/main.json', // stylesheet location
|
|
39
|
+
center: [-42.3115,70.0012], // starting position [lng, lat]
|
|
40
|
+
zoom: 13 // starting zoom
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
// Add zoom and rotation controls to the map.
|
|
44
|
+
map.addControl(new mapboxgl.NavigationControl());
|
|
45
|
+
|
|
46
|
+
//show features rendered on the map
|
|
47
|
+
map.on('click', function(e) {
|
|
48
|
+
var features = map.queryRenderedFeatures(e.point);
|
|
49
|
+
|
|
50
|
+
// Limit the number of properties we're displaying for
|
|
51
|
+
// legibility and performance
|
|
52
|
+
var displayProperties = [
|
|
53
|
+
'type',
|
|
54
|
+
'properties',
|
|
55
|
+
'id',
|
|
56
|
+
'layer',
|
|
57
|
+
'source',
|
|
58
|
+
'sourceLayer',
|
|
59
|
+
'state'
|
|
60
|
+
];
|
|
61
|
+
|
|
62
|
+
var displayFeatures = features.map(function(feat) {
|
|
63
|
+
var displayFeat = {};
|
|
64
|
+
displayProperties.forEach(function(prop) {
|
|
65
|
+
displayFeat[prop] = feat[prop];
|
|
66
|
+
});
|
|
67
|
+
return displayFeat;
|
|
68
|
+
});
|
|
69
|
+
|
|
70
|
+
document.getElementById('features').innerHTML = JSON.stringify(
|
|
71
|
+
displayFeatures,
|
|
72
|
+
null,
|
|
73
|
+
2
|
|
74
|
+
);
|
|
75
|
+
});
|
|
76
|
+
</script>
|
|
77
|
+
|
|
78
|
+
</body>
|
|
79
|
+
</html>
|
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
# OpenHistorical font
|
|
2
|
-
|
|
3
|
-
This font is a combination of open source fonts, since no single font provided all the glyphs needed for the variety of the world's languages AND ALSO had the smooth look we wanted.
|
|
4
|
-
|
|
5
|
-
Our goal:
|
|
6
|
-
* Open Sans, smooth and clean... but does not support Arabic, Hebrew, and other character sets
|
|
7
|
-
* Unifont, provides glyphs for a whole lot of languages including RTL Hebrew and Arabic... but does not have that smooth, clean look
|
|
8
|
-
* Combine the glyphs from Unifont into Open Sans to get the best of both where we have it.
|
|
9
|
-
|
|
10
|
-
## Combining Process
|
|
11
|
-
|
|
12
|
-
I used Font Lab, though FontForge may also be able to do this.
|
|
13
|
-
|
|
14
|
-
Open FontLab, use File / Open Fonts and open the font files.
|
|
15
|
-
* Unifont
|
|
16
|
-
* Open Sans Regular
|
|
17
|
-
|
|
18
|
-
Go into the Unifont window.
|
|
19
|
-
* Use ctrl-A to select all glyphs *but then* de-select the first several which do not have useful glyphs. You'll see them: basically everything before "!".
|
|
20
|
-
* Hit ctrl-C to copy these glyphs.
|
|
21
|
-
|
|
22
|
-
Go into the Open Sans window.
|
|
23
|
-
* Use ctrl-V to paste those Unifont glyphs into this Open Sans font.
|
|
24
|
-
* You'll receive a warning about conflicting glyphs. Select append & keep unchanged.
|
|
25
|
-
* This will take some time.
|
|
26
|
-
|
|
27
|
-
Edit the Font Info, and set the font name and family to "OpenHistorical"
|
|
28
|
-
|
|
29
|
-
Export the font with File / Export to TTF.
|
|
30
|
-
* This will take some time.
|
|
31
|
-
* It may save as the name of the font you used as the base e.g. *Open Sans Regular.ttf* so rename it to *Historical.ttf*
|
|
32
|
-
|
|
33
|
-
Use fontnik to build the PBF version for use with vector tile maps:
|
|
34
|
-
|
|
35
|
-
```
|
|
36
|
-
npm install fontnik
|
|
37
|
-
|
|
38
|
-
cd map-styles/fonts
|
|
39
|
-
~/node_modules/fontnik/bin/build-glyphs ./OpenHistorical/OpenHistorical.ttf ./OpenHistorical
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
I then repeated the process with Open Sans Bold and Open Sans Italic, creating *OpenHistorical Bold.ttf* and *OpenHistoricalItalic.ttf* and then using fontnik on them.
|
|
1
|
+
# OpenHistorical font
|
|
2
|
+
|
|
3
|
+
This font is a combination of open source fonts, since no single font provided all the glyphs needed for the variety of the world's languages AND ALSO had the smooth look we wanted.
|
|
4
|
+
|
|
5
|
+
Our goal:
|
|
6
|
+
* Open Sans, smooth and clean... but does not support Arabic, Hebrew, and other character sets
|
|
7
|
+
* Unifont, provides glyphs for a whole lot of languages including RTL Hebrew and Arabic... but does not have that smooth, clean look
|
|
8
|
+
* Combine the glyphs from Unifont into Open Sans to get the best of both where we have it.
|
|
9
|
+
|
|
10
|
+
## Combining Process
|
|
11
|
+
|
|
12
|
+
I used Font Lab, though FontForge may also be able to do this.
|
|
13
|
+
|
|
14
|
+
Open FontLab, use File / Open Fonts and open the font files.
|
|
15
|
+
* Unifont
|
|
16
|
+
* Open Sans Regular
|
|
17
|
+
|
|
18
|
+
Go into the Unifont window.
|
|
19
|
+
* Use ctrl-A to select all glyphs *but then* de-select the first several which do not have useful glyphs. You'll see them: basically everything before "!".
|
|
20
|
+
* Hit ctrl-C to copy these glyphs.
|
|
21
|
+
|
|
22
|
+
Go into the Open Sans window.
|
|
23
|
+
* Use ctrl-V to paste those Unifont glyphs into this Open Sans font.
|
|
24
|
+
* You'll receive a warning about conflicting glyphs. Select append & keep unchanged.
|
|
25
|
+
* This will take some time.
|
|
26
|
+
|
|
27
|
+
Edit the Font Info, and set the font name and family to "OpenHistorical"
|
|
28
|
+
|
|
29
|
+
Export the font with File / Export to TTF.
|
|
30
|
+
* This will take some time.
|
|
31
|
+
* It may save as the name of the font you used as the base e.g. *Open Sans Regular.ttf* so rename it to *Historical.ttf*
|
|
32
|
+
|
|
33
|
+
Use fontnik to build the PBF version for use with vector tile maps:
|
|
34
|
+
|
|
35
|
+
```
|
|
36
|
+
npm install fontnik
|
|
37
|
+
|
|
38
|
+
cd map-styles/fonts
|
|
39
|
+
~/node_modules/fontnik/bin/build-glyphs ./OpenHistorical/OpenHistorical.ttf ./OpenHistorical
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
I then repeated the process with Open Sans Bold and Open Sans Italic, creating *OpenHistorical Bold.ttf* and *OpenHistoricalItalic.ttf* and then using fontnik on them.
|