Some years ago, I blogged about the power of customization. Back then I created a browser plugin to rearrange app icons in Google menu. These were the good old times when Google Reader was still around.
This time I would like to talk about inatur.no. It's a website that allows one to book cabins in Norway (and buy fishing and hunting licenses, but I am mostly interested in cabins in this post). The website has two pages:
search page where one searches for cabins by date, number of beds, e.t.c.
map page with shows all the cabins on a map.
These two pages are not connected. One can not search on a map page and one can not see cabins on a map after the search. Found cabins are presented as a list. To be fair, it is possible to search by Norwegian administrative districts - there are two drop-downs with names.
I contacted website owners in June 2020 pointing out that it will be helpful to show search results on a map. They replied that this would be indeed a useful feature, something they will consider in the future. Here we are in July 2023 and I built it myself.
From a technical perspective, it was educational to research how inatur is developed. Here are a couple of things I found interesting in no particular order:
Geo-information is stored in ArcGIS, but it looks like it only contains the bare minimum about the cabins, so one couldn't use it for searching.
Every page with a detailed view of a cabin (example) contains an image like this
It is a static image. When clicked - it opens like a popup window with a map that shows that single cabin. There are no coordinates written anywhere on the details page.
The map view shows all the cabins and there is a popup window attached to each of them. It looks like the content of this popup is fetched from an API endpoint on every click.
How to show search results on a map
I wanted the functionality to be at hand, so I wanted it to be available online. This means I need some sort of website. One option here is to code everything in javascript: call inatur website and post-process the results. However, this is a no-go as this requires Cross-origin resource sharing (CORS). Due to security considerations, CORS is generally not allowed on the browser level.
Another option is to fire up a back-end server and do requests from there. So, the back-end will be a proxy between the client and inatur website. This is the route I chose.
I used Azure Functions for hosting. This allows me not to worry about wasted resources when I am not searching for a stay. The processing logic is fairly straightforward:
obtain a list of cabins with geo-data.
proxy search requests to inatur.
fetch search results and only show the cabins that are present in the search results.
To conclude
It was a fun little project. Using GitHub Copilot and ChatGPT makes such projects even easier (at least for me as I am not a web developer).
Don't walk away when you think something may be improved. And don't give up if the initial attempt to fix things fails (my email back in 2020).