david hall

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. See on Github

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 safeJS - 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 now use Apple Maps and copy the coords from there.

It's worth noting that in the Micro.blog timeline, the Titles (when shown) are not clickable links, see the Timeline display rules and this method doesn't work with just an image, 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 paste in:

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

Then go to the Design section and Edit Custom Themes. You will then see the explanation and a link to learn about 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 possibly use an icon .

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://www.yoursite.com/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">
  <h1 class="page-title">{{ .Title }}</h1>
  {{ .Content }}
</div>

<script type="text/javascript">
var osmUrl = 'https://{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="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://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: 'https://yourdomain.com/images/blue.png',
    shadowUrl: 'https://yourdomain.com/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, I recommend using Gluon app to post. It shows the (optional) Title field by default, so enter the coordinates here.