Self Hosted Leaflet Photo

There is an excellent plugin for Leaflet called Leaflet.Photo.

The plugin was created by Bjørn Sandvik. See the full post:

The plugin has a number of examples that show usage with image hosting platforms, like Google Photos and Instagram, which have assicaited API’s for returning information about the image in question.

I was however keen to host the sollution completely myself, so simply have a folder of images that would populate on the map if they had exif GPS information.

I have created an example available on GitHub:

Simply download the full repo:

Copy the local_file_example folder. Replace the images in the Photos folder with your own photos. Load it onto any php supporting webhost.

Like: BlueHost

Or for more advanced users, the examples below are on: DigitalOcean

And link to the folder with the index.html



UK Rail Network by Agency and Parent

I created a post of the UK rail network some time ago and have been meaning to return to the subject.

This iteration is in Leaflet and will run weekly. The network is generated direcly from the UK rail network timetable file in GTFS format downloaded from:

The network is still generated using a station to station methodology, so the next step will be to incorporate an actual network and run it trough PGRouting. The logic for ownership can be found at:

If there are any issues or inconsistencies, please let me know, preferrably through the GitHub issues page: GitHub Issues

I am very happy with the overall result and all the hosting is done from scratch using a virtual server from: Digital Ocean

A good learning experience with NGINX and mobile forwarding.

As a final warning, the mobile version is not very good, if viewing on mobile and interested, please try on a desktop. Sincere appologies for that. Leaflet may not be the best mobile platform, although it is probably due to my inexperience with it.

Full Page Link

UK Rail Map by Operator and Owner:

Trans Siberian Leaflet

This was a great learning experience. Same as the GitHub example, but now with Leaflet.


Leaflet code:

In addition we have the following in the header:

So the route is being read directly from a .geojson file. Although it has been renamed to route.js, and “var route = [” has been added to the beginning of the file and “]” to the end.