Micro.blog Map

micro.blog Micro.blog "is the blog you will actually use." I have adapted my method of linking articles to and from a map here within a subscription Micro.blog's pages that again uses Leaflet and tiles from Open Street Map/Mapbox.

This method will not be for everybody. I use the Title for the coordinates - it's the only variable open to you to - so I use h1 tags etc in the body of the post if I want a heading and the single page layout is used up for housing the map code.

As Micro.blog is based on Hugo, the passing of the location coordinates requires a couple of tweaks to the code to enable them to be formatted correctly - safeURL and safeURL - these are shown below in the templates.

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 and coordinates loaded.

It's worth noting that in the Micro.blog timeline, the Tiles (when shown) are not clickable links, see the Timeline display rules and this method doesn't work with just an imaage, as there's no link formed from the timeline to your page, so an image description won't go amiss. Fortunately, Micro.blog doesn't seem to treat coordinates as a number, so they do get displayed.

Within your Micro.blog Domain & Design section, create a new page, call it what you want i.e. Map! and leave it blank. Then go to the Design section and Edit Custom Themes. You will then see the explanation and a link to learn abou them, plus the option to create a new theme, if you haven't already. Compare your templates to what I've done with the corresponding templates below, obviously paste the relevant code to suit you design, I decided to put a link line within the "e-content" class of both templates. Grab a map marker to suit and posibly use an icon to represent the link in your post, but be aware that apps like Icro and Gluon treat icons which have links as images and just enlarge them when clicked rather than opening the link, as the "official" Micro.blog app does.

Templates

layouts/post/single.html

{{ define "main" }}
<div class="content post h-entry">
    {{ if .Title }}
    <h1 class="page-title">{{ .Title }}</h1>
    {{ end }}
    <div class="e-content">
{{ .Content }}
    {{ if .Title }}
    <p>Map: <a href="https://spotthehall.net/map/?{{ .Title | safeURL }},16">{{ .Title }}</a></p>
    {{ end }}
    </div>
    <div class="post-date">
        <time class="dt-published" datetime="{{ .Date.Format "2006-01-02 15:04:05 -0700" }}">{{ .Date.Format "Jan 2, 2006" }}</time>
        </div>
    </div>
{{ end }}

layouts/_default/list.html

{{ define "main" }}
<div class="content list h-feed">

    {{ $paginator := .Paginate (where .Data.Pages.ByDate.Reverse "Type" "post") (index .Site.Params "archive-paginate" | default 25) }}
    {{ range $paginator.Pages  }}

    <div class="list-item h-entry">
    {{ if .Title }}
    <h1 class="page-title">{{ .Title }}</h1>
    {{ end }}
<div class="content post e-content">
    {{ .Content }}
    {{ if .Title }}
    <p>Map: <a href="https://spotthehall.net/map/?{{ .Title | safeURL }},16">{{ .Title }}</a></p>
    {{ end }}
</div>
<div class="list-post-date">
  <a href="{{ .Permalink }}" class="u-url"><time class="dt-published" datetime="{{ .Date.Format "2006-01-02 15:04:05 -0700" }}">{{ .Date.Format "Jan 2, 2006" }}</time></a>
</div>
</div>

{{ end }}

</div>

{{ end }}

layouts/_default/single.html

{{ define "main" }}

<div class="content page">
<div id="map">
    <div id="message" style="position:absolute; bottom: 28px; left: 5px; z-index: 999">Click = point </div>
</div>
</div>

<script type="text/javascript">
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
    osmAttribution = '© <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-TOKEN-KEY',
    outdoorsAttribution = 'Map data © <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 pk.ey'
    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]);
    vars = url.vars
}
else {
    var lat = 51.98488;
    var lng = 0.3186;
    var zmn = 6
}

var map = 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(map);

var leafIcon = L.icon({
    iconUrl: '/images/blue.png',
    shadowUrl: '/images/pinsh.png',
    iconAnchor:   [12,20],
    shadowAnchor: [10,19],
    popupAnchor:  [-5,-20]
});
{{ $list := (where .Site.Pages "Type" "post") }} {{ range $list }}{{ if.Title }}
var marker = new L.Marker([{{ .Title  | safeJS  }}], {icon: leafIcon} ).addTo(map).bindPopup("<a href='{{ .Permalink }}'>{{ .Date.Format "2006-01-02" }}</a>");
{{ end}} {{ end }}

function 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>

{{ end }}

Hint: When posting from iOS, use the web interface to post. Show the Title box by pasting-in a lot of gibberish, enter the coordinates in the Title field, save it as a draft, then edit the draft. The Title field then remains when you take all the gibberish out and you are free to post as little or as much as you want and keep the Title.