Welcome to our interactive map of the area to help visualise the history of land, buildings, the charcters that lived here and activities that occurred over time. The map is below. This will be an ongoing effort.
Any information you would like to contribute would be most welcome, “what was there before it became…”, stories/memories, names of characters who you remember living somewhere, photos etc to give us some starting points (or you might want to be more involved in some way – always open to ideas).
Developers Notes
The example above uses OpenStreetMap data and Maplibre to render the map along with custom styling for the 3D buildings. It then automatically grabs data for the buildings we have historic infomration on and populates map popups with that info along with a read more link for further information.
Building an up-to-date 3D map (alone, without the interaction) is incredibly complex involving different protocols & ways to do things. The quickest (easiest?) method I found is here using MBTiles.
After following the steps in that tutorial, you’ll also need to refer to the MapLibre Specification and OpenMapTiles schema to understand the different features on a map. Another tool which is useful in understanding exactly what data is contained in the map is MapTiler Desktop, where the map file can be opened and inspected, Maputnik is another browser based inspector to see what’s going on in a map. These ‘inspectors’ will allow you to build up the style.json file which defines how things look on a map, whether they have a 3D extrusion (e.g. buildings), label, fonts, font sizes, colours of things etc.
This method still requires someone to manually update the source map, but in terms of progressing the project it has taken us a lot further and a large chuck of what’s going on can be automated.
Note: the program TileMaker has a config file that tells it what information from the OSM export should be included in the resultant PBF file. In that config-openmaptiles.json config file we’ll need to include_ids = true so we can reference a building back to WordPress by it’s OSM ID. We can also tell tilemaker to include other features that will be useful on our map, things like tree/tree rows/scrub and hedges and remove things we’ll never need, like oceans, glaciers and mountains!
Some commands that are useful:
-0.7072,51.8363,-0.6911,51.8292 – coords of a bounding box area to extract
osmium extract –bbox=-0.7072,51.8363,-0.6911,51.8292 –set-bounds –strategy=smart long-marston.osm –output long-marston.osm.pbf
./linux/tilemaker –input long-marston.osm.pbf –output long-marston.mbtiles –process resources/process-openmaptiles.lua –config resources/config-openmaptiles.json
Glossary
- OSM – OpenStreetMaps
- GeoFabrik – provides up-to-date raw downloads of OSM data
- GeoFabrik Calc – gives bounding box coordinates for a custom area from the GeoFabrik download
- osmium-tool (linux) or osmconvert (Windows) – extracts the above area from the GeoFabrik download
- Tilemaker – generates vector tiles form the extracted OSM data
- PBF / MBTiles – file formats for containng the vector data that makes up the OSM export data
- Tileserver – a tool for then serving the map file into little tiles, depending on the zoom level on the map
- MapLibre – a javascript library for actually displaying a map on a website. Styles things like colours, shaped and lines etc.
Process
- Add a building to OSM, make a note of the ID number (529260475 in this case)
- Add the building into the website, and link it to OSM by inserting the ID number into the editor
- There is a script on this website that runs everyday. It queries something called the Overpass API for our unique buildings, and grabs the OSM geographic and meta data for each into a file, that the map then uses to render the buildings.