Improving the maps on Londinium.com Improving the maps on Londinium.com

December 22, 2021

laravel londinium openstreetmap

I recently relaunch londinium.com with a number of the mapping features I have been working on.

The frontpage of londinium.com now has a number of different styles of maps with links to airports and main stations alongside postcodes. You can access these in the top right corner menu. I have added all the mapbox ones, but there are a lot more.

This is on top of showing the Openstreetmap tags / map features (eg, supermarkets)

The features are extracted using overpass-api which is an frontend for the data held in the OSM system.

It is built using laravel which is the php framework i have used most over the past few years

The maps use leaflet js. You can see the range of base maps available on http://leaflet-extras.github.io/leaflet-providers/preview/index.html

Useful Leaflet JS links

Here are a number of links i found useful in developing the website.

tomik23/leaflet-examples

Harry Wood map examples

Devdocs LeafletJS

github.com/plepe/overpass-layer

Ideas and notes

  • The current site uses the data from overpass turbo, and can be a bit slow to load. Also it times out sometimes. Interested in hosting this locally.
  • Also would like to add a loading message to show the data is loading. If it fails, perhaps it could show an error message
  • There is some inconsistency with the data in the OSM system. For example, there most twitter links include the full url, whilst others are @twitter links and others are just the twitter account. Need to address this in someway.

If you would like to contact me you can either use this form on londinium.com or via Twitter @andylondon