tl;dr: slightly less than an hour.

This was prompted initially by a forum comment (I can’t actually remember exactly where or by whom) that creating maps based on OSM was for “developers” and not “normal people” (not in those exact words), and by the thread here. The “slightly less than an hour” actually includes setting up a development environment from scratch on a new PC.

On that new PC I’ve already installed a text editor and a web server (“apache2”).

cd ~/src
git clone https://github.com/SomeoneElseOSM/SomeoneElse-vector-web-display
git clone https://github.com/systemed/tilemaker

In the first of those repositories there are a selection of map styles, including one that uses the OSMF demo vector tiles. Let’s first test that that works:

sudo /home/myuseraccount/src/SomeoneElse-vector-web-display/svwd_into_apache.sh NONE svwd03 http://127.0.0.1 /home/myuseraccount/src/SomeoneElse-vector-web-display/resources/svwd03_spec.json /home/myuseraccount/src/SomeoneElse-vector-web-display/resources/svwd03_metadata.json /home/myuseraccount/src/tilemaker/server/static/fonts /home/myuseraccount/src/SomeoneElse-vector-web-display/resources/svwd03_style.json /home/myuseraccount/src/SomeoneElse-vector-web-display/resources/svwd03_index.html svwd03sprite /home/myuseraccount/src/SomeoneElse-vector-web-display/resources

That script installs below a “vector” directory on the local website, so the URL to access it locally is http://127.0.0.1/vector/index_svwd03.html . The “svwd03” on it’s own in that command line is used to create a unique index page. For details about the other parameters to that shell script, have a look at the comments at the top of it.

That webpage works, so let’s look at the changes we need to make. The code of this MapLibre example shows the one things that we need to do in the code after creating the map, so let’s take a copy of our previous index page svwd03_index.html as svwd09_index.html and make that edit in there. FWIW, “svwd” stands for “SomeoneElse Vector Web Display” and the number is just different for each style; it’s just a way of keeping style names unique.

So let’s create that:

sudo /home/myuseraccount/src/SomeoneElse-vector-web-display/svwd_into_apache.sh NONE svwd09 http://127.0.0.1 /home/myuseraccount/src/SomeoneElse-vector-web-display/resources/svwd03_spec.json /home/myuseraccount/src/SomeoneElse-vector-web-display/resources/svwd03_metadata.json /home/myuseraccount/src/tilemaker/server/static/fonts /home/myuseraccount/src/SomeoneElse-vector-web-display/resources/svwd03_style.json /home/myuseraccount/src/SomeoneElse-vector-web-display/resources/svwd09_index.html svwd03sprite /home/myuseraccount/src/SomeoneElse-vector-web-display/resources

and test it - the URL is 127.0.0.1/vector/index_svwd09.html . That works, so let’s create a changelog and a readme for the style, and update the main readme to say that it exists.

Checking it all in was the most time-consuming part, as I needed to add a new ssh key to github for it.

Once that was done I could get it on the target web server and deploy it using the same command as above, but with the real web server name (“https://map.atownsend.org.uk”) in place of “http://127.0.0.1”. The scripts used in the deployment handle that automatically and everything (apart from the OSMF vector tiles) is hosted locally so there are no CORS errors.

The link to access the site is this.

Obviously other mechanisms for doing this sort of thing exist, and some involve installing some software you’ve probably never heard of, but it really doesn’t need to be that complicated.