To Marple by train for the start/end of the Macclesfield canal.
The canal is notable for its lack of locks. Apart from a cluster of twelve between Congleton and Macclesfield, there is a single lock on the canal (lock 13); a stop lock at the junction between the Macclesfield canal and what was then the Hall Green Branch of the Trent and Mersey. The canal was built relatively late (1830) and by then the practice was to cluster locks, which was thought more efficient for travel than having to navigate isolated locks.
Sources: The Macclesfield Canal Society website; Julian Glover, Man of Iron: Thomas Telford and the Building of Britain, (2016), Bloomsbury.
Creating the Map
The map above was created by downloading the canal centre lines Shapefile from data.gov.uk and extracting the Macclesfield canal polylines using attribute values in QGIS. There is no attribute in the locks dataset that links a lock to a canal so the locks for the Macclesfiled canal were extracted by drawing a 20m buffer around the canal and selecting only those locks within the buffer.
The topo background map was selected from the Leaflet Provider demo.
I have also attempted a mobile version of the above map that attempts to plot your current location as you traverse the canal.
The script first attempts to determine your location:
Two listeners are set up for the locationfound event and the locationerror (lines 37 & 38). The locate method of the map object is then called (line 39). The setView option of this method will change the map view to the current location, with the specified maximum zoom. The default timeout for the returning the user’s location before firing the locationerror event is 10 seconds, which proved too short.
The following code shows the two event handlers:
The onLocationFound function removes the location marker (if we have one) and adds a new one at the current location. The popup for the marker shows the accuracy of the reading using the value determined by the location call (line 67):
Why the need for the error handling? Well, the map works well using Firefox and IE but there are problems in other browsers. Firefox and IE will request permission to hand over your location:
However, other browsers, such as Safari and Chrome no longer allow for geolocation from non-secure origins. , as the error message makes clear:
Geolocation error: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV)..
This means I need to upgrade my hosting to SSL if I want my map to work with a wider range of browsers. Now, my hosting is on a shared server, rather than a virtual server, but it seems I can add SSL to my hosting package (it works by providing me with a folder on an SSL server) but the cost is prohibitive.
Adding a locate button
You will note that the mobile version of the map has a locate button (bottom-right). This is to reset the map so that it is centred on the user’s location. The code was adapted from some found on stackoverflow. The div for the button is embedded in the div for the map:
The button calls a simple function, reset, which calls the locate method of the map again: