The Macclesfield Canal

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 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 canal dataset only covers those canals and waterways that are managed by the Canal and River Trust and therefore some major canals such as the Bridgewater Canal are not in the dataset.

The topo background map was selected from the Leaflet Provider demo.

Mobile map

I have also attempted a mobile version of the above map that attempts to plot your current location as you traverse the canal.

Mobile canal map screenshot

The script first attempts to determine your location:

Location JavaScript

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:

Location events JavaScript

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):

Location accuracy

The onLocationError function writes the error to the JavaScript console (for debugging) and then centres the map on the canal.

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:

Location permission

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:

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:

HTML to include button

The button calls a simple function, reset, which calls the locate method of the map again:

Recentering the map

Leave a Reply

Your email address will not be published. Required fields are marked *