GeoTemporum

Tidying some stuff up for the ship!

I mainly fixed a bunch of little things here.

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.

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.

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.

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.

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.

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.

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.

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.

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!

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.

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.

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.

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:

1. fix the display above the slider, currently it’s not positioned right but it’s 10:00 and I’m too tired to fix it
2. implement saving the current map view as a png or other format
3. mess with map layers to get what I want perfectly, including fixing the fact that some country names don’t show up at all
4. add a menu where you can select what features you want to show on the map, beyond the current toggles at the top (need to fix bug that they’re inverted)
5. once style is locked in generate vector map tiles to use that are less weighty with somthing like tippecanoe

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.

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.

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.

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.