My first finished Leaflet project was done in July of 2017, for the “Web map development” class of the International Master’s degree in Geomatics at Hochschule Karlsruhe. Having recently moved to Germany, I was enamoured by the centuries of history embodied in the various castles and ruins in Baden-Württemberg. Naturally there are more castles all over Germany, but I was limited in what was feasibly able to be drawn in a Leaflet map in a web browser. Baden-Württemberg seemed appropriate given that I live there (at least at the time of writing). Click here to see it.
The data used for the castles and ruins comes from OpenStreetMap. specifically, I downloaded the Baden-Württemberg OSM data from Geofabrik, and parsed the .osm file into a PostGIS database using osm2pgsql. I could have used the Overpass API (specifically the web interface, Overpass Turbo), but I wanted to get all the data to see what was really in there to play with. It took quite a long time to parse it. Germany is shockingly dense with OSM data – Germans seem to LOVE open source and crowdsourced data. I do, too. OSM is a treasure trove of useful information for geospatial data and companies like Geofabrik provide an amazing service in making this information available to the public.
Once the data was downloaded and loaded into my PostGIS database, I did some finnicking around to figure out what was really there for castles. It turns out that there the definitions for “Castle” and “Ruin” can be rather blurry in OpenStreetMap, which is not surprising for crowdsourced data. This brings up an important pitfall to be aware of when it comes to using free data – you get what you pay for. That isn’t a knock at OpenStreetMap. Like I said, I love it and what it provides to geospatial research & development. But you always have to make sure to examine through your data very thoroughly and perform cleaning as necessary.
After I had my castles and ruins picked out, I saved them to GeoJSON format and plunked them into a Leaflet map with a CSS template frame. I modified the frame to show the information I wanted and Also added some functionality for saving bookmarked locations. Try clicking on maps and ruins and see how they get added to the sidebar. You can click on their names later to return to that location.
I’m also happy to report that I passed the class. I think it would be neat to implement some functionality to auto-generate Google image search results for the castle name when clicked on. Maybe I’ll come back to this one someday. I like castles.
If you want to have a look at the source code, go ahead.