OpenHistoricalMap has a lot of useful data for both teachers and students, however the current system is hard to use for school. I’m making a website that will act as that interface to make it easy to use, with features such as printing maps, study helpers, and more.
I started working on a custom map maker for it, with importing from JSON. I’m currently stuck on deciding whether I want to make a full server for map saving so users can access their maps and share them or just embedding the JSON in the url. The latter option is easier but I kinda want the experience of setting up a server.
P.S. sorry about the screenshot Win+Shift+S isn’t working on the computer I’m using.
Log in to leave a comment
I added a two custom layers to the map to enable hover effects for countries, which also changes what you’re selecting (states or countries) depending on zoom level and whether you have that layer visible. Also fixed images to switch to a dark image when they’re on a light background in the filter menu.
Log in to leave a comment
I rewrote my filter logic, then rewrote it again after designing a layout for it. I’m pretty happy with how the filter list turned out.
Log in to leave a comment
Working on a dark mode, not completely done but almost. I also added custom map controls because the default maplibre ones don’t have a dark mode.
Log in to leave a comment
I added dark mode functionality, so that it automatically changes with the browser’s mode. To do this I implemented an array of styles for the map, so I can another style pretty easily. I need to work changing the ui to dark mode now.
Log in to leave a comment
I spent wayyy to much time working with async functions and trying to figure out why deleting markers wasn’t working right. Apparently it was because
const i = data.features.findIndex(f => f.id = featureId)
needed to be
const i = data.features.findIndex(f => f.id == featureId)
welp.
Log in to leave a comment
I went down a huge rabbit trail of wikidata queries and added some requests to my code. still figuring out async requests and all that tho. too tired to do any more today.
.webp)
Log in to leave a comment
I added right click functionality so that a user can add a marker with custom text, and when right clicking a feature it gives you data about the feature. It was super fun to code all this and see it work and come to life.
.webp)
Log in to leave a comment
I added media queries and fixed a few bugs on mobile. Media queries were somewhat fun to figure out and somewhat a pain. I wanted to test on an actual phone so I ended up hooking up an old iphone to an old laptop for devtools. Now mobile version works!
Log in to leave a comment
Added functionality for save as where you can select resolution, filename, and extension. I also fixed a few bugs with the date filtering for the date selection.
.webp)
Log in to leave a comment
I added globe functionality after a lot of time spent confused about maplibregl versions. You can also now save the current view as an image (todo: add loading symbol while it’s fetching all the layers) I also started adding a filter popup.
.png)
.webp)
.webp)
Log in to leave a comment
I fixed the year display above the slider to position itself above the thumb and also edited the style JSON to fix the bug with country names. I changed the input fields for the year as well to be more sleek (design by my friend). I probably did some other things but I forget what.
.webp)
.png)
Log in to leave a comment
Woah, this project looks sick dude keep up the good work :D
I added language functionality, which was a pain. The npm module listed on the wiki for OHM under maplibre doesn’t work with maplibre because it’s a mapbox plugin. I pulled out my hair trying to get this to work and then I realized it was because the tag was name_en not name:en. code do be do dat. I also updated the style slightly to make countries stand out and fixed a bug with the eventListener of maxEra. After this you can actually kind of use it!
todo:
Log in to leave a comment
I added a top bar and then fixed all the bugs that came with the top bar ugh. Next up: filtering the vector tiles by date, if I don’t get distracted.
.png)
Log in to leave a comment
I worked on making a function to automatically add all the event listeners for the toggles automatically. That was a major pain. also spent a bunch of time figuring out what map layers I actually need. Currently the map tiles show all the data from all of time, and the slider doesn’t work. I’m going to work on that today. I figured out how to customize all the layers on the map too with the style JSON.
.png)
Log in to leave a comment
I added a function to upload the map layers and then used that to create a dropdown with a list that lets you select different features to show/hide. right now “background” and “land” are the only two ids that I know of so I’m going to do some research and find some more, maybe cities and country borders.
I hate javascript. It’s so tedious. One of the problems I ran into was that in order to delete an item from a list, you have to set that list to a filter of itself. I guess I’m so too used to python’s readability. I accidentally typed print instead of console.log lol.
Log in to leave a comment
I first tried using the leaflet library to display the map, then quickly realized it wasn’t compatible with the vector tiles supplied by OpenHistoricalMap. Then I switched to MapLibre to display the map, used the style found on OpenStreetMap’s wiki and now have a working website that displays OpenHistoricalMap. Yay!
Side note everything is in a different language. To be fixed once I learn why.
Log in to leave a comment