logo david hall

email bluesky fediverse feed

yellow Datenstrom Yellow "is for people who make websites" and I happen to have made this site using Yellow, so here is my method of linking articles to a map that uses Leaflet and tiles from Open Street Map/Mapbox.

Implementation consists of a Leaflet Map Template and a geo-location passed through the Settings of the Yellow article (using psn). You will have to choose how you get the location reference - I tend to use an Editorial template with a custom workflow to form my Article with pre-formed Settings.

Article File

---
Date: 2008-09-26
Template: blog
psn: 54.029582,-2.113986
---

Page Template

I use our Geotagicon to signify the link to the map somewhere within the article, which is diplayed using the following code:

<p><?php if($yellow->page->isExisting("psn")): ?><a href="https://yourdomain.com/maps?q=<?php echo $yellow->page->getHtml("psn") ?>,16" title="position on map"><img src="/media/images/geotag.png" alt="geotag" /></a><?php endif ?></p>

Alternatively, you can send the link to Apple/Google maps using this:

<p><?php if($yellow->page->isExisting("psn")): ?><a href="http://maps.apple.com/maps?q=<?php echo $yellow->page->getHtml("psn") ?>,16" title="position on map"><img src="/media/images/geotag.png" alt="geotag" /></a><?php endif ?></p>

Leaflet Map Template

The code contains the option of the location to be displayed through the url location.search.substring, or if no specific link, the map to be displayed at a default zoom setting. Also, there is a onMapClick function to show the position of a click on the map.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width" />
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" type="text/css" media="all" href="/leaflet.css" />
<script src="/leaflet.js"></script>
<?php echo $yellow->page->getExtra("header") ?>
<title>Example Domain - map</title>
</head>
<body>
<div id="map"></div>
<script>
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
    osmAttribution = '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
    osmOptions = {attribution: osmAttribution};

var outdoorsUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=YOUR ACCESS TOKEN',
    outdoorsAttribution = '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>',
    outdoorsMaxZoom = 18,
    outdoorsId = 'mapbox.outdoors',
    outdoorsAccessToken = 'YOUR ACCESS TOKEN'
    outdoorsOptions = {attribution: outdoorsAttribution, MaxZoom: outdoorsMaxZoom, id: outdoorsId, accessToken: outdoorsAccessToken};

var osm = new L.TileLayer(osmUrl, osmOptions),
    outdoors = new L.TileLayer(outdoorsUrl, outdoorsOptions);

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]);
    var vars = url.vars
}
else {
    var lat = 55;
    var lng = -4;
    var zmn = 7
}

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

var baseLayers = {
    "Open Street Map": osm,
    "Outdoors": outdoors
};

L.control.layers(baseLayers).addTo(mymap);

<?php $pages = $yellow->pages->index(true, true) ?>
<?php foreach($pages as $page): ?>
    <?php if($page->isExisting("psn")): ?>
        var leafIcon = L.icon({
            iconUrl: '/images/marker-icon.png',
            shadowUrl: '/images/marker-shadow.png',
            iconAnchor:   [12,40],
            shadowAnchor: [10,39],
            popupAnchor:  [2,-42]
        });
        var marker<?php echo $page->getHtml("id") ?> = new L.Marker([ <?php echo $page->getHtml("psn") ?> ], {icon: leafIcon}).addTo(mymap).bindPopup("<a href='<?php echo $page->getLocation(true) ?>'><?php echo $page->getDateHtml("Published") ?></a>");
    <?php endif ?>
<?php endforeach ?>

function onMapClick(e) {
    var latlngStr = '(' + e.latlng.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3) + ')';
    document.getElementById('message').innerHTML = e.latlng;
    displayMessage(latlngStr);
}
mymap.on('click', onMapClick);
</script>

<div id="message" style="position:absolute; bottom: 5px; left: 5px; z-index: 999">Click = point</div>
</body>
</html>

If your site uses thumbnail images, they can easily be passed through to the map via the Article Settings and bound to the popup. Also, you can duplicate the if($page->isExisting("psn")): section (all within <foreach($pages as $page): and use something else like geo instead of psn to link other sections/types of article and use another colour/type of pin on the map.

2019-05-15