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/.
The MapLibre GL JS quickstart has you create an html file containing:
<html>
<head>
<script src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css" rel="stylesheet" />
</head>
<body>
<div id="map" style="width:100%;height:100%"></div>
<script>
var map = new maplibregl.Map({
container: 'map', // container id
style: 'https://demotiles.maplibre.org/style.json', // style URL
center: [0, 0], // starting position [lng, lat]
zoom: 1 // starting zoom
});
</script>
</body>
</html>To use one of the OpenHistoricalMap styles simply replace the style URL, https://demotiles.maplibre.org/style.json with one of ours:
Instead of specifying latest you can also pin your style to a particular version, e.g., 0.9.6
We use the hosted version of the Maputnik visual editor for style development although a local installation should work equally well. The recommended way to work with Maputnik is to:
- clone this repo to your computer or download the latest release.
git clone [email protected]:OpenHistoricalMap/map-styles.git - run
npm installfrom the root directory. - run
npm run startin the root directory; this will start the lightweight Nodehttp-serverand 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. - open the style file you wish to work on in Maputnik.; it will be
historical/historical.jsonor an equivalent path for a different style. - if you're submitting changes to OpenHistoricalMap please begin by creating an issue that describes them at our issues repository, which is different from where you'd submit your pull request.
- when you're satisfied with your local changes, repopulate the
distdirectory by runningnpm run build; the build step replaces references tolocalhostwith the production values of the OpenHistoricalMap servers forglyphandspriteserving; you may need to edit these for your own custom use. - use
control-cto end the browser session you started withnpm run start.
Miscellaneous notes:
- we use
nvmand provide an.nvmrcfile. If you use it, remember to begin your development withnvm use. - although this repository contains glyphs for many fonts, the
buildstep only packages the styles in use across all styles. - If you're creating a new style, please follow our naming conventions where, for a new_style, the expected file hierarchy is:
/new_style/new_style.json /new_style/new_style_spritesheet.json /new_style/new_style_spritesheet.png /new_style/[email protected] /new_style/[email protected] - the OpenHistoricalMap
timeslideris not yet incorporated; it, too, is being readied for npm packaging. - we recognize that it would be better if the local port number were configurable at the command line.
- increment the version in
package.json, e.g.,0.9.7 - create a corresponding release on GitHub, e.g.,
v0.9.7 - publish to npm using
npm publish - rebuild the OHM properties that depend on
map-styles, making sure the latest version of the module has been pulled.
- ensure your local
stagingbranch ofohm-websiteis current usinggit pull - create a release branch from
staging, e.g.,git checkout -b map-styles-0.9.7 - log in to the Docker container and start a bash shell
- run
yarn upgradeand verify, using the output, that the correct version has been installed. Note that themap-stylesversion is specified with the^operator so that ourpackage.jsonwill need to be updated for a major version release, e.g., to1.xfrom0.9.xRebuilding all packages... success Saved lockfile. success Saved 159 new dependencies. info Direct dependencies ├─ @mapbox/[email protected] ├─ @maplibre/[email protected] ├─ @openhistoricalmap/[email protected] … - from your IDE/host computer, commit
yarn.lockand push your branch to GitHub - open a pull request against
OpenHistoricalMap/ohm-website'sstagingbranch - confirm that the only changed file is
yarn.lock& merge to staging - pull the updated
stagingbranch to get the merge commit - ensure your local
stagingbranch ofohm-deployis current usinggit pull - create a release branch from
staging, e.g.,git checkout -b map-styles-0.9.7 - in
images/web/DockerfileupdateOPENHISTORICALMAP_WEBSITE_GITSHA& the reason string in the subsequentRUN echo - commit the
Dockerfileand push your branch to GitHub - open a pull request against
OpenHistoricalMap/ohm-deploy'sstagingbranch - confirm your changed files & merge to staging
- monitor the build output
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.
To see a specific year in history, change the target year in the URL:
- Main/Historical: https://embed.openhistoricalmap.org/#map=16/40.70486/-74.01313&date=1700&layer=O_staging
- Rail style: https://embed.openhistoricalmap.org/#map=16/40.70486/-74.01313&date=1700&layer=R_staging
- Woodblock: https://embed.openhistoricalmap.org/#map=16/40.70486/-74.01313&date=1700&layer=W_staging
- Japanese Scroll: https://embed.openhistoricalmap.org/#map=16/40.70486/-74.01313&date=1700&layer=J_staging