Pass Front Matter to create Map marker

This is really a “proof of concept” idea I am trying to do in micro.blog, but as I believe I am correct in thinking micro.blog uses Hugo, the question is probably best raised here.

Also, as I think this is probably a Go/javascript issue, having done this method successfully in Python and PHP based CMSs before.

Now(!) the issue I have is that when I try to pass the Front Matter: { .Title }} as coordinates to form the map link marker the coordinates appear in quotes (or string literals). In fact if I try to pass any variable in that position, the “quotes” appear. (Bear with me on using the title - it’s currently the only option in micro.blog - proof of concept as I said!)

My code is (I’m using Leaflet for the map) var marker = L.Marker([ {{ .Title }} ], {icon: leafIcon} ).addTo(map).bindPopup("<a href='{{ .Permalink }}'>{{ .Date.Format "2006-01-02" }}</a>");

which forms var marker = L.Marker([ "51.1441,0.37165" ], {icon: leafIcon} ).addTo(map).bindPopup("<a href='https:\/\/www.spotthehall.net\/2019\/05\/28\/182255.html'>2019-05-28</a>");
I have tried using {{ .Params.title }} with the same result.

My hard coded link is var marker = new L.Marker([ 51.1441,0.37165 ], {icon: leafIcon} ).addTo(map).bindPopup("<a href='https://www.spotthehall.net/2019/05/28/182255.html'>2019-05-28</a>"); which results in the marker that may be seen at https://www.spotthehall.net/map

I have experimented with .Scratch to no avail and suspect I need to use something like var latlng = JSON.stringify({{ .Title }}); latlng.replace (/"/g,'{{ .Title }}');
however, that is a s far as I have got so far, any help gratefully received :slight_smile:

.Page.Latitude should have the value for your frontmatter latitude value. Did you try that?

Hi, that throws the following error from micro.blog Theme error: Error building site: failed to render pages: render of "page" failed: "/hall_00979b/layouts/_default/single.html:71:32": execute of template failed: template: _default/single.html:71:32: executing "main" at <.Page.Latitude>: can't evaluate field Page in type *hugolib.Page

As I said, I think micro.blog will limit what variable I try, hence I’m trying to use the optional title at the moment.

Give this a try:

var marker = L.Marker([ {{ .Title | safeJS }} ], {icon: leafIcon} ).addTo(map).bindPopup('<a href="' + {{ .Permalink }} + '">{{ .Date.Format "2006-01-02" }}</a>');

That appears to be forming the correct link, but is actually not showing on the map - inspecting the page I’m getting “undefined is not an object” …

Sorry, my bad, I forgot the “new” before L.Marker - works perfectly. Thanks zwbetz :+1:

Sorry, one more thing!

You wouldn’t know why I’m getting the following link in my html would you(?), when using

<p><a href="https://spotthehall.net/map/?{{ .Title }},16">{{ .Title }}</p>

<p><a href="https://spotthehall.net/map/?51.1441%2c0.37165,16">51.1441,0.37165</p>

instead of

<p><a href="https://spotthehall.net/map/?51.1441,0.37165,16">51.1441,0.37165</p>

Thanks

Try {{ .Title | safeHTMLAttr }}

The Go txt templates package has various limitations for security reasons. Hugo has a few functions that address these issues.

Please have a look at the Docs about safeJS, safeHTML, safeHTMLAttr, safeCSS, htmlUnescape and htmlEscape

OK, thanks, I’ll have a look - all new to me!

Also, this is useful info to know: HTML comment handling regression between 0.55.6 and 0.54.0

Thanks, I’ll have a look - and Manton (micro.blog) is interested.

Thanks for all your help, awesome, safeURL worked for the links :grinning: