@openhistoricalmap/map-styles 0.9.8 → 0.9.10
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 +54 -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 +32 -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/woodblock/woodblock.json +2424 -2423
- package/woodblock/woodblock_spritesheet.json +72 -72
- package/woodblock/woodblock_spritesheet@2x.json +72 -72
package/README.md
CHANGED
|
@@ -1,115 +1,115 @@
|
|
|
1
|
-
## OpenHistoricalMap styles
|
|
2
|
-
|
|
3
|
-
This repository contains vector map styles that can be applied to OpenHistoricalMap vector tiles. There are a number of uses for these styles but common to them is the OpenHistoricalMap vector tile source: https://vtiles.openhistoricalmap.org/.
|
|
4
|
-
|
|
5
|
-
### CDN usage with MapLibre GL JS
|
|
6
|
-
The [MapLibre GL JS quickstart](https://maplibre.org/maplibre-gl-js/docs/) has you create an html file containing:
|
|
7
|
-
|
|
8
|
-
```html
|
|
9
|
-
<html>
|
|
10
|
-
<head>
|
|
11
|
-
<script src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"></script>
|
|
12
|
-
<link href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css" rel="stylesheet" />
|
|
13
|
-
</head>
|
|
14
|
-
<body>
|
|
15
|
-
<div id="map" style="width:100%;height:100%"></div>
|
|
16
|
-
<script>
|
|
17
|
-
var map = new maplibregl.Map({
|
|
18
|
-
container: 'map', // container id
|
|
19
|
-
style: 'https://demotiles.maplibre.org/style.json', // style URL
|
|
20
|
-
center: [0, 0], // starting position [lng, lat]
|
|
21
|
-
zoom: 1 // starting zoom
|
|
22
|
-
});
|
|
23
|
-
</script>
|
|
24
|
-
|
|
25
|
-
</body>
|
|
26
|
-
</html>
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
To use one of the OpenHistoricalMap styles simply replace the style URL, `https://demotiles.maplibre.org/style.json` with one of ours:
|
|
30
|
-
|
|
31
|
-
| Style | URL |
|
|
32
|
-
| --- | --- |
|
|
33
|
-
| historical | https://unpkg.com/@openhistoricalmap/map-styles@latest/dist/historical/historical.json |
|
|
34
|
-
| japanese_scroll | https://unpkg.com/@openhistoricalmap/map-styles@latest/dist/japanese_scroll/japanese_scroll.json |
|
|
35
|
-
| railway | https://unpkg.com/@openhistoricalmap/map-styles@latest/dist/railway/railway.json |
|
|
36
|
-
| woodblock | https://unpkg.com/@openhistoricalmap/map-styles@latest/dist/woodblock/woodblock.json |
|
|
37
|
-
|
|
38
|
-
Instead of specifying `latest` you can also pin your style to a particular version, e.g., `0.9.6`
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
### Style development using Maputnik
|
|
42
|
-
|
|
43
|
-
We use the hosted version of the [Maputnik visual editor](https://maputnik.github.io/editor/) for style development although a local installation should work equally well. The recommended way to work with Maputnik is to:
|
|
44
|
-
|
|
45
|
-
1. clone this repo to your computer or [download the latest release](https://github.com/OpenHistoricalMap/map-styles/releases).
|
|
46
|
-
`git clone git@github.com:OpenHistoricalMap/map-styles.git`
|
|
47
|
-
2. run `npm install` from the root directory.
|
|
48
|
-
3. run `npm run start` in the root directory; this will start the lightweight Node `http-server` and open a new tab or window in your browser. Everything except for the OHM vector tile sources (style files, glyphs, sprites) will be running locally on port 8888.
|
|
49
|
-
4. open the style file you wish to work on in Maputnik.; it will be `historical/historical.json` or an equivalent path for a different style.
|
|
50
|
-
5. if you're submitting changes to OpenHistoricalMap please begin by creating an issue that describes them at our [issues repository](https://github.com/OpenHistoricalMap/issues/), which is different from [where you'd submit your pull request](https://github.com/OpenHistoricalMap/map-styles).
|
|
51
|
-
6. when you're satisfied with your local changes, repopulate the `dist` directory by running `npm run build`; the build step replaces references to `localhost` with the production values of the OpenHistoricalMap servers for `glyph` and `sprite` serving; this is required prior to deploying to OHM's staging and production servers. If you're hosting your own fonts or icons you'll need to edit these for your custom use.
|
|
52
|
-
7. use `control-c` to end the browser session you started with `npm run start`.
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
Miscellaneous notes:
|
|
56
|
-
|
|
57
|
-
* we use [`nvm`](https://github.com/nvm-sh/nvm) and provide an `.nvmrc` file. If you use it, remember to begin your development with `nvm use`.
|
|
58
|
-
* although this repository contains glyphs for many fonts, the `build` step only packages the styles in use across all styles.
|
|
59
|
-
* If you're creating a new style, please follow our naming conventions where, for a _new_style_, the expected file hierarchy is:
|
|
60
|
-
```
|
|
61
|
-
/new_style/new_style.json
|
|
62
|
-
/new_style/new_style_spritesheet.json
|
|
63
|
-
/new_style/new_style_spritesheet.png
|
|
64
|
-
/new_style/new_style_spritesheet@2x.json
|
|
65
|
-
/new_style/new_style_spritesheet@2x.png
|
|
66
|
-
```
|
|
67
|
-
* the OpenHistoricalMap `timeslider` is not yet incorporated; it, too, is being readied for npm packaging.
|
|
68
|
-
* we recognize that it would be better if the local port number were configurable at the command line.
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
## Versioning and publishing to npm
|
|
72
|
-
|
|
73
|
-
1. increment the version in `package.json`, e.g., `0.9.7`
|
|
74
|
-
1. commit your style changes, including `/dist/*` & `package.json`, push to GitHub, and [create a corresponding release](https://github.com/OpenHistoricalMap/map-styles/releases/new), e.g., `v0.9.7`
|
|
75
|
-
1. publish to npm using `npm publish`
|
|
76
|
-
1. rebuild the OHM properties that depend on `map-styles`, making sure the latest version of the module has been pulled.
|
|
77
|
-
|
|
78
|
-
### ohm-website
|
|
79
|
-
|
|
80
|
-
1. ensure your local `staging` branch of `ohm-website` is current using `git pull`
|
|
81
|
-
1. create a release branch from `staging`, e.g., `git checkout -b map-styles-0.9.7`
|
|
82
|
-
1. log in to the Docker container and start a bash shell
|
|
83
|
-
1. run `yarn upgrade` and verify, using the output, that the correct version has been installed. Note that the `map-styles` version is specified with the `^` operator so that our `package.json` will need to be updated for a **major version release**, e.g., to `1.x` from `0.9.x`
|
|
84
|
-
```
|
|
85
|
-
Rebuilding all packages...
|
|
86
|
-
success Saved lockfile.
|
|
87
|
-
success Saved 159 new dependencies.
|
|
88
|
-
info Direct dependencies
|
|
89
|
-
├─ @mapbox/mapbox-gl-rtl-text@0.2.3
|
|
90
|
-
├─ @maplibre/maplibre-gl-leaflet@0.0.20
|
|
91
|
-
├─ @openhistoricalmap/map-styles@0.9.7
|
|
92
|
-
…
|
|
93
|
-
```
|
|
94
|
-
1. from your IDE/host computer, commit `yarn.lock` and push your branch to GitHub
|
|
95
|
-
1. open a pull request against `OpenHistoricalMap/ohm-website`'s `staging` branch
|
|
96
|
-
1. confirm that the only changed file is `yarn.lock` & merge to staging
|
|
97
|
-
1. pull the updated `staging` branch to get the merge commit
|
|
98
|
-
1. ensure your local `staging` branch of `ohm-deploy` is current using `git pull`
|
|
99
|
-
1. create a release branch from `staging`, e.g., `git checkout -b map-styles-0.9.7`
|
|
100
|
-
1. in `images/web/Dockerfile` update `OPENHISTORICALMAP_WEBSITE_GITSHA` & the reason string in the subsequent `RUN echo`
|
|
101
|
-
1. commit the `Dockerfile` and push your branch to GitHub
|
|
102
|
-
1. open a pull request against `OpenHistoricalMap/ohm-deploy`'s `staging` branch
|
|
103
|
-
1. confirm your changed files & merge to staging
|
|
104
|
-
1. monitor the build output
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
## Review styles while they are in staging
|
|
108
|
-
|
|
109
|
-
To review the styles with the latest updates to the map-styles repo before they are live, use the below links. These are pulled from the `staging` branch. The `staging` branch will reflect 1) recently made updates before they are merged into `main` and occasionally 2) iterative cartography testing.
|
|
110
|
-
|
|
111
|
-
To see a specific year in history, change the target year in the URL:
|
|
112
|
-
- Main/Historical: https://embed.openhistoricalmap.org/#map=16/40.70486/-74.01313&date=1700&layer=O_staging
|
|
113
|
-
- Rail style: https://embed.openhistoricalmap.org/#map=16/40.70486/-74.01313&date=1700&layer=R_staging
|
|
114
|
-
- Woodblock: https://embed.openhistoricalmap.org/#map=16/40.70486/-74.01313&date=1700&layer=W_staging
|
|
115
|
-
- Japanese Scroll: https://embed.openhistoricalmap.org/#map=16/40.70486/-74.01313&date=1700&layer=J_staging
|
|
1
|
+
## OpenHistoricalMap styles
|
|
2
|
+
|
|
3
|
+
This repository contains vector map styles that can be applied to OpenHistoricalMap vector tiles. There are a number of uses for these styles but common to them is the OpenHistoricalMap vector tile source: https://vtiles.openhistoricalmap.org/.
|
|
4
|
+
|
|
5
|
+
### CDN usage with MapLibre GL JS
|
|
6
|
+
The [MapLibre GL JS quickstart](https://maplibre.org/maplibre-gl-js/docs/) has you create an html file containing:
|
|
7
|
+
|
|
8
|
+
```html
|
|
9
|
+
<html>
|
|
10
|
+
<head>
|
|
11
|
+
<script src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"></script>
|
|
12
|
+
<link href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css" rel="stylesheet" />
|
|
13
|
+
</head>
|
|
14
|
+
<body>
|
|
15
|
+
<div id="map" style="width:100%;height:100%"></div>
|
|
16
|
+
<script>
|
|
17
|
+
var map = new maplibregl.Map({
|
|
18
|
+
container: 'map', // container id
|
|
19
|
+
style: 'https://demotiles.maplibre.org/style.json', // style URL
|
|
20
|
+
center: [0, 0], // starting position [lng, lat]
|
|
21
|
+
zoom: 1 // starting zoom
|
|
22
|
+
});
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
</body>
|
|
26
|
+
</html>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
To use one of the OpenHistoricalMap styles simply replace the style URL, `https://demotiles.maplibre.org/style.json` with one of ours:
|
|
30
|
+
|
|
31
|
+
| Style | URL |
|
|
32
|
+
| --- | --- |
|
|
33
|
+
| historical | https://unpkg.com/@openhistoricalmap/map-styles@latest/dist/historical/historical.json |
|
|
34
|
+
| japanese_scroll | https://unpkg.com/@openhistoricalmap/map-styles@latest/dist/japanese_scroll/japanese_scroll.json |
|
|
35
|
+
| railway | https://unpkg.com/@openhistoricalmap/map-styles@latest/dist/railway/railway.json |
|
|
36
|
+
| woodblock | https://unpkg.com/@openhistoricalmap/map-styles@latest/dist/woodblock/woodblock.json |
|
|
37
|
+
|
|
38
|
+
Instead of specifying `latest` you can also pin your style to a particular version, e.g., `0.9.6`
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
### Style development using Maputnik
|
|
42
|
+
|
|
43
|
+
We use the hosted version of the [Maputnik visual editor](https://maputnik.github.io/editor/) for style development although a local installation should work equally well. The recommended way to work with Maputnik is to:
|
|
44
|
+
|
|
45
|
+
1. clone this repo to your computer or [download the latest release](https://github.com/OpenHistoricalMap/map-styles/releases).
|
|
46
|
+
`git clone git@github.com:OpenHistoricalMap/map-styles.git`
|
|
47
|
+
2. run `npm install` from the root directory.
|
|
48
|
+
3. run `npm run start` in the root directory; this will start the lightweight Node `http-server` and open a new tab or window in your browser. Everything except for the OHM vector tile sources (style files, glyphs, sprites) will be running locally on port 8888.
|
|
49
|
+
4. open the style file you wish to work on in Maputnik.; it will be `historical/historical.json` or an equivalent path for a different style.
|
|
50
|
+
5. if you're submitting changes to OpenHistoricalMap please begin by creating an issue that describes them at our [issues repository](https://github.com/OpenHistoricalMap/issues/), which is different from [where you'd submit your pull request](https://github.com/OpenHistoricalMap/map-styles).
|
|
51
|
+
6. when you're satisfied with your local changes, repopulate the `dist` directory by running `npm run build`; the build step replaces references to `localhost` with the production values of the OpenHistoricalMap servers for `glyph` and `sprite` serving; this is required prior to deploying to OHM's staging and production servers. If you're hosting your own fonts or icons you'll need to edit these for your custom use.
|
|
52
|
+
7. use `control-c` to end the browser session you started with `npm run start`.
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
Miscellaneous notes:
|
|
56
|
+
|
|
57
|
+
* we use [`nvm`](https://github.com/nvm-sh/nvm) and provide an `.nvmrc` file. If you use it, remember to begin your development with `nvm use`.
|
|
58
|
+
* although this repository contains glyphs for many fonts, the `build` step only packages the styles in use across all styles.
|
|
59
|
+
* If you're creating a new style, please follow our naming conventions where, for a _new_style_, the expected file hierarchy is:
|
|
60
|
+
```
|
|
61
|
+
/new_style/new_style.json
|
|
62
|
+
/new_style/new_style_spritesheet.json
|
|
63
|
+
/new_style/new_style_spritesheet.png
|
|
64
|
+
/new_style/new_style_spritesheet@2x.json
|
|
65
|
+
/new_style/new_style_spritesheet@2x.png
|
|
66
|
+
```
|
|
67
|
+
* the OpenHistoricalMap `timeslider` is not yet incorporated; it, too, is being readied for npm packaging.
|
|
68
|
+
* we recognize that it would be better if the local port number were configurable at the command line.
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
## Versioning and publishing to npm
|
|
72
|
+
|
|
73
|
+
1. increment the version in `package.json`, e.g., `0.9.7`
|
|
74
|
+
1. commit your style changes, including `/dist/*` & `package.json`, push to GitHub, and [create a corresponding release](https://github.com/OpenHistoricalMap/map-styles/releases/new), e.g., `v0.9.7`
|
|
75
|
+
1. publish to npm using `npm publish`
|
|
76
|
+
1. rebuild the OHM properties that depend on `map-styles`, making sure the latest version of the module has been pulled.
|
|
77
|
+
|
|
78
|
+
### ohm-website
|
|
79
|
+
|
|
80
|
+
1. ensure your local `staging` branch of `ohm-website` is current using `git pull`
|
|
81
|
+
1. create a release branch from `staging`, e.g., `git checkout -b map-styles-0.9.7`
|
|
82
|
+
1. log in to the Docker container and start a bash shell
|
|
83
|
+
1. run `yarn upgrade` and verify, using the output, that the correct version has been installed. Note that the `map-styles` version is specified with the `^` operator so that our `package.json` will need to be updated for a **major version release**, e.g., to `1.x` from `0.9.x`
|
|
84
|
+
```
|
|
85
|
+
Rebuilding all packages...
|
|
86
|
+
success Saved lockfile.
|
|
87
|
+
success Saved 159 new dependencies.
|
|
88
|
+
info Direct dependencies
|
|
89
|
+
├─ @mapbox/mapbox-gl-rtl-text@0.2.3
|
|
90
|
+
├─ @maplibre/maplibre-gl-leaflet@0.0.20
|
|
91
|
+
├─ @openhistoricalmap/map-styles@0.9.7
|
|
92
|
+
…
|
|
93
|
+
```
|
|
94
|
+
1. from your IDE/host computer, commit `yarn.lock` and push your branch to GitHub
|
|
95
|
+
1. open a pull request against `OpenHistoricalMap/ohm-website`'s `staging` branch
|
|
96
|
+
1. confirm that the only changed file is `yarn.lock` & merge to staging
|
|
97
|
+
1. pull the updated `staging` branch to get the merge commit
|
|
98
|
+
1. ensure your local `staging` branch of `ohm-deploy` is current using `git pull`
|
|
99
|
+
1. create a release branch from `staging`, e.g., `git checkout -b map-styles-0.9.7`
|
|
100
|
+
1. in `images/web/Dockerfile` update `OPENHISTORICALMAP_WEBSITE_GITSHA` & the reason string in the subsequent `RUN echo`
|
|
101
|
+
1. commit the `Dockerfile` and push your branch to GitHub
|
|
102
|
+
1. open a pull request against `OpenHistoricalMap/ohm-deploy`'s `staging` branch
|
|
103
|
+
1. confirm your changed files & merge to staging
|
|
104
|
+
1. monitor the build output
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
## Review styles while they are in staging
|
|
108
|
+
|
|
109
|
+
To review the styles with the latest updates to the map-styles repo before they are live, use the below links. These are pulled from the `staging` branch. The `staging` branch will reflect 1) recently made updates before they are merged into `main` and occasionally 2) iterative cartography testing.
|
|
110
|
+
|
|
111
|
+
To see a specific year in history, change the target year in the URL:
|
|
112
|
+
- Main/Historical: https://embed.openhistoricalmap.org/#map=16/40.70486/-74.01313&date=1700&layer=O_staging
|
|
113
|
+
- Rail style: https://embed.openhistoricalmap.org/#map=16/40.70486/-74.01313&date=1700&layer=R_staging
|
|
114
|
+
- Woodblock: https://embed.openhistoricalmap.org/#map=16/40.70486/-74.01313&date=1700&layer=W_staging
|
|
115
|
+
- Japanese Scroll: https://embed.openhistoricalmap.org/#map=16/40.70486/-74.01313&date=1700&layer=J_staging
|
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.
|