Alternative Map Overlays for Trig Point App

Having used Leaflet.js as the mapping component for my Trig Point App project I now see it cropping up everywhere. Two rather neat features that I see on many websites are the ability to switch between different map layers and to be able to filter which icons are being displayed. I was especially interested in the first feature as I seem to be having trouble with the availability of OpenTopoMap so I wanted to offer OpenStreetMap as an alternative option.

Leaflet.js Layers Control

The solution is to be found in the Leaflet.js layers control options, described rather neatly in this documentation page. The steps are:

1. Create an array of the different map base layers using the Leaflet tileLayer() function
2. Create an array of the different filtering groups using the Leaflet layerGroup() function. In my case I wanted three groups: “available”, “not available” and “destroyed”.
3. Create the map as normal but with an extra parameter called layers: [ … ] which defines which base layer and ( optionally ) which filtering groups to show on startup.
4. Add a filtering control to the map with the control.layers() function.
5. Place the icons on the map by adding them to the relevant group rather than directly to the map.

This was remarkably straightforward and needed only a small amount of code refactoring. Now when the map is displayed there is an extra control as follows:

Selection Icon

Mouse Over Icon

Ordnance Survey Maps Overlay

The other reason for exploring the map layers options was that I had recently come across this project to add an OS overlay to a Leaflet.js map. I’d investigated OS overlays before but come to the conclusion that it was not possible to get the extremely informative Landranger ( 1:50000 ) or Explorer ( 1:25000 ) scale maps without paying a great deal of money. However the example page ( right ) clearly shows the Landranger zoom to be available so I got quite enthused, especially as my friend Richard had managed to get this to work as well.

But ( you knew this wasn’t going to end well 🙂 ) when I tried to get an API key to test an OS map overlay things went a bit pear shaped. It appears that the API that’s required by the “os-leaflet” project is no longer supported even though it still works for existing keys. Further digging reveals:

1. OpenSpace is no longer being developed. See https://www.ordnancesurvey.co.uk/forums/discussion/1010339/is-this-forum-active
2. The page at https://www.ordnancesurvey.co.uk/business-government/tools-support/openspace-support states: “Existing customers can continue to use OS OpenSpace Free but the product is now closed to new users. If you’re looking for a web map, please take a look at our new Zoomstack product.” ( There seems to be no information as to how long it will continue working for existing users either )
   
3. The Zoomstack product doesn’t appear to have an API and you have to download the tiles and manage them yourself. Could be interesting but it’s a fairly major project in itself not to mention finding web hosting for it.
4. There seems to be a new product called OS Maps API for Enterprise but unsurprisingly it doesn’t have a free plan. From a quick check you can’t even get a trial key if you’re not a company.

( The full gory details can be found in this GitHub issue. )

The Ordnance Survey is quite rightly regarded as a British institution and its paper maps are excellent. However its digital strategy seems to be completely random with products being setup and then dropped some time later. Its Android app doesn’t escape criticism either as per this rather sorry tale from The Register. At the time of writing the app is still borked as I can’t view my offline maps unless I’m online 😦 Even the most rudimentary testing should have caught that.

Postscript

As a result of the previous posts on the Trig Point App a reader of this blog contacted me and we had a good discussion about mapping libraries. His website at http://www.mainjoin.eu/ has got quite a few examples but I particularly like the weather app. There are plenty of interesting options to investigate.

 

OpenVPN

Son no 2 and I share a login to an on-line sports streaming service. While the service allows multiple simultaneous logins they all have to come from the same IP. As we live some distance apart then I needed a cunning plan to enable us to watch it at the same time. We both have sufficiently fast internet connections so the obvious answer was a VPN which actually proved to be surprisingly simple to set up.

Hardware

The hardware of choice for this sort if thing is the Raspberry Pi and, having 3D printed a case, added a network cable and a old mobile phone charger as a power supply we were good to go.

Software

Operating System

The standard Raspbian OS does the job just fine but I used the Raspbian Buster Lite which has no GUI. The only small tweak was to add a blank “ssh” file in the root partition so that I could do the rest of the install without having to attach a monitor and keyboard. I also set it up with a static IP address although I suspect that this isn’t really necessary. In my experience most routers will serve the same IP address to a particular MAC address each time.

openVPN Server

openVPN has a reputation for not being the easiest thing to install. Fortunately there’s a project called PiVPN which is a set of packages and scripts to simplify the installation on a Raspberry Pi. I also found a very good guide online which takes you though each of the steps in the setup script.

I followed the settings from that guide, also enabling openVPN 2.4. Once the installation was complete then I copied the .ovpn config file off the server to use with the VPN clients.

openVPN Clients

openVPN has a number of clients suitable for most operating systems downloadable from its website. Some of these are marked as beta but I found no problems with the ones I tried.

The only slight oddity that I found was with the Linux client. The Android and Windows clients routed all the network traffic via the VPN which is what I would expect. The Linux client however didn’t route the local network traffic ( 192.168.0.x ) addresses via the VPN but rather kept them on the local network. I’m not entirely sure why it does this because I suspect that’s a possible security problem as the two networks are now bridged. It was also annoying because I couldn’t SSH to the Pi over the VPN which I needed at one point to do some small config changes. There are a number of forum threads about how to fix this but as they involve messing around with routes and iptables then I took the easier option and connected via my wife’s Windows laptop.

Dynamic DNS

As we would be using domestic internet connections whose public facing IP addresses could change then I decided to use a Dynamic DNS provider. There are a number of these around but I picked no-ip who offer a free plan with one domain and three host names. They also provide a client to run on the Pi which can automatically update the IP address if it changes. This wasn’t the easiest thing to get working but that may have just been finger trouble on my part.

( So far no-ip have proven to be completely reliable and I should probably upgrade to their paid plan at $25 / year )

Other

The only other setup that I had to do was to add a firewall rule to the router to forward the incoming VPN connections to the Pi.

Testing

To test I installed the openVPN client on my Android phone and connected to the internet via my mobile data connection rather than the Wi-Fi.

Initially I couldn’t connect but PiVPN has a debugging mode, initiated via “pivpn -d“. When I ran this it reported a couple of problems with the iptables and, even more helpfully, offered to fix them. Naturally I accepted and, once it had done its thing, I could connect with no problem. ( I seem to recall seeing some iptables warnings when I ran the PiVPN scripts but as everything seemed to working I ignored them. )

The easiest way to test the connection is to visit a website that reports your public facing IP address and check that it changes when you connect to the VPN. Once connected you can also run “pivpn -c” on the server and get an output that looks something like:

pi@raspberrypi:/usr/local $ pivpn -c

: NOTE : The output below is NOT real-time!
:      : It may be off by a few minutes.

::: Client Status List :::
							Bytes		Bytes	
Name		Remote IP		Virtual IP	Received	Sent		Connected Since 
john		xxx.xxx.xxx.xxx:65363	10.8.0.2	2.0KiB		2.3KiB		Sep 23 2019 - 16:43:40

We then tested with two video streams, one locally and one via the VPN and everything worked fine resulting in two happy sports fans 🙂