Interactive map

As a learning exercise we are going to try and reproduce our Urban Habitats walk using the Open Source  tools in the excellentLeaflet’ system.

Technical details: ‘Leaflet’ is an open source software platform (a set of free software tools and display systems that work together) which allows us to display interactive maps that we can overlay with routes, markers, popup information etc. You can view the map page separately at: http://www.livingmaps.org.uk/leaflet/urban-habitats-rough-01.php The source code is:

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Experiment</title>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="http://www.livingmaps.org.uk/leaflet/leaflet.css" />
</head>
<body>
    <div id="map" style="width: 580px; height: 600px"></div>

    <script src="http://www.livingmaps.org.uk/leaflet/leaflet.js"></script>

    <script>

        var map = L.map('map').setView([51.54206, -0.0094], 14);

        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ', {
            maxZoom: 18,
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
                '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                'Imagery © <a href="http://mapbox.com">Mapbox</a>',
            id: 'mapbox.streets'
        }).addTo(map);


        L.polyline([
            [51.54256, -0.00365],
            [51.54492, -0.00884],
            [51.54922, -0.00697],
            [51.54982, -0.00906],
            [51.54719, -0.01451],
            [51.54204, -0.00867],
            [51.54076, -0.01133],
            [51.54012, -0.01279],
            [51.54209, -0.01605],
            [51.53809, -0.02056],
            [51.5332, -0.0179],
            [51.53192, -0.01811],
            [51.52968, -0.01369],
            [51.52933, -0.01056],
            [51.52832, -0.01026],

            [51.52734, -0.00755]
        ]).addTo(map).bindPopup("Urban Habitats walk route.");


            L.circle([51.54256, -0.00365], 70, {
            color: 'orange',
            fillColor: '#f03',
            fillOpacity: 0.7
        }).addTo(map).bindPopup("<b>Starting point: </b><br />Stratford Bus Station.");


            L.circle([51.54492, -0.00884], 50, {
            color: 'orange',
            fillColor: '#FFFFFF',
            fillOpacity: 0.3
        }).addTo(map).bindPopup("Stratford International");


            L.circle([51.54919, -0.00781], 50, {
            color: 'orange',
            fillColor: '#FFFFFF',
            fillOpacity: 0.3
        }).addTo(map).bindPopup("Chobham Academy");


            L.circle([51.54719, -0.01451], 50, {
            color: 'orange',
            fillColor: '#FFFFFF',
            fillOpacity: 0.3
        }).addTo(map).bindPopup("Timber Lodge");


            L.circle([51.54076, -0.01133], 50, {
            color: 'orange',
            fillColor: '#FFFFFF',
            fillOpacity: 0.3
        }).addTo(map).bindPopup("Aquatic Centre");


            L.circle([51.5419, -0.01639], 50, {
            color: 'orange',
            fillColor: '#FFFFFF',
            fillOpacity: 0.3
        }).addTo(map).bindPopup("Carpenters Lock");


            L.circle([51.53857, -0.0204], 50, {
            color: 'orange',
            fillColor: '#FFFFFF',
            fillOpacity: 0.3
        }).addTo(map).bindPopup("Old Ford Lock");


            L.circle([51.52968, -0.01369], 50, {
            color: 'orange',
            fillColor: '#FFFFFF',
            fillOpacity: 0.3
        }).addTo(map).bindPopup("Bow Flyover");


        L.circle([51.52734, -0.00755], 70, {
            color: 'orange',
            fillColor: '#f03',
            fillOpacity: 0.7
        }).addTo(map).bindPopup("End point: Three Mills.");


        var popup = L.popup();

        function onMapClick(e) {
            popup
                .setLatLng(e.latlng)
                .setContent("You clicked the map at " + e.latlng.toString())
                .openOn(map);
        }

        map.on('click', onMapClick);

    </script>
</body>
</html>
Pages:
Edit