David Hall

Updated my previous Leaflet installation to the new "open-source JavaScript library for mobile-friendly interface map".

Implementation consists of a Leaflet Template and a geo Partial file, you could ude a link in the Article/Post code - such as:

<div class="code">&lt;a href="/leaflet/?@psn,14" title="view location on Leafletjs Map"&gt;&lt;img src="/images/opengeo.png" alt="" /&gt;&lt;/a&gt;</div>

Template - leaflet.html

Remember to delete [remove] from the code - it's there to stop Stacey doing it's stuff even when written as code.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="keywords" content="map, openstreetmap, leaflet, stamen" />
    <meta name="viewport" content="width=device-width" />
    <title>Leaflet Map</title>
    <link rel="alternate" type="application/atom+xml" href="../../atom.xml">
    <link rel="stylesheet" href="/leaflet.css" />
    <script src="/leaflet.js"></script>
    <script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js"></script>
</head>
<body>

<div id="map"></div>

<script>
    var landscapeUrl = 'http://{s}.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png',
        landscapeAttribution = 'Map data &copy; <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, <a href="http://www.thunderforest.com">Gravitystorm</a> Landscape Map.',
        landscapeOptions = {attribution: landscapeAttribution};
    var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
        osmAttribution = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
        osmOptions = {attribution: osmAttribution};

    var landscape = new L.TileLayer(landscapeUrl, landscapeOptions);
    var osm = new L.TileLayer(osmUrl, osmOptions);

    if (location.search.substring(1)) {
        var qs = location.search.substring(1);
        var url = qs.split(',',3);
        var lat = parseFloat(url[0]);
        var lng = parseFloat(url[1]);
        var zmn = parseFloat(url[2]);
    }
    else {
        var lat = 42.94033923363181;
        var lng = -2.8125;
        var zmn = 4;
    }

    var map = new L.Map('map', {
        center: new L.LatLng(lat,lng),
        zoom: zmn,
        layers: [landscape]
    });

    var baseMaps = {
        "Landscape": landscape,
        "Open Street Map": osm,
        "Watercolour": new L.StamenTileLayer("watercolor")
    };

    layersControl = new L.Control.Layers(baseMaps);

    map.addControl(layersControl);

    var LeafIcon = L.Icon.extend({
    options: {
            shadowUrl: '/images/pinsh.png',
            iconAnchor: [5, 21],
            shadowAnchor: [1, 22],
            popupAnchor: [0, -25]
    }
    });

    var redIcon = new LeafIcon({iconUrl: '/images/red.png'}),
        greenIcon = new LeafIcon({iconUrl: '/images/green.png'}),
        blueIcon = new LeafIcon({iconUrl: '/images/blue.png'}),
        yellowIcon = new LeafIcon({iconUrl: '/images/yellow.png'});

    :[remove]geoleaf

    unction onMapClick(e) {
        var latlngStr = '(' + e.latlng.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3) + ')';
        document.getElementById('message').innerHTML = e.latlng;
        displayMessage(latlngStr);
    }
    map.on('click', onMapClick);

    </script>

    <a href="/"><img src="/images/logos.png" alt="home" title="home" style="border:0; position: absolute; top: 0; left: 45px;" /></a>
    <div id="message" style="position:absolute; top: 32px; left: 50px;">Click = point</div>

</body>
</html>

Partial - geoleaf.html

Remove all these * as they are there to stop the code working here, and hence hiding itself!

for*each $root do
    i*f $children do
        for*each $children do
            i*f @psn do
                var marker@id = new L.Marker([@psn], {icon: redIcon}).addTo(map).bindPopup("<h2><a href='../@url'>@title</a><br /><img src='/@th' style='width:95px;height:95px' /></h2><h3><a href='/leaflet/?@psn,15'>zoom</a></h3>");
            endif
        endforeach
    endif
endforeach

There is a zoom function in the popup window, but you can pass whatever you like through.

2015-07-23

david hall

Template - leaflet.html

Partial - geoleaf.html