MapBlog with JBake

JBake is a static site generator (similar to Hugo, Gatsby, etc). Although is written in Java you don’t need special knowledge in Java only a little knowledge of Markdown or better Asciidoctor

INFO: this site is generated by JBake

With default installation you can write typical "posts" or "pages".

Pages are "fixed" documents as "about", "contact", etc

Posts are "dynamic" in the sense they are showed in a paginated view (typically recent post first,) and they have attributes as published date, state, summary, etc

When JBake is generating your site it applies a different template for every content depending on the "type". For example "index.tpl" for the "masterindex" page, or "post.tpl" for every "post" document

WARNING: JBake can use different template engines, and you need to select wich engine to use. I’ve selected Groovy’s MarkupTemplateEngine, but you can use Freemarker, Thymeleaf, … This post only works with Groovy MarkupTemplateEngine but surely is easy to convert to other

Idea

I would like to create a new section in my blog talking about my trips around the world. It’s easy to create a post for every place, but I would like to have them in another "page" and no mix them with my current posts about tech.

Instead to have an ordered list of posts I would like to have a map and show every place on it so the user can see all of them and clicking in an icon show a popup with the summary and a link to the post

I would like to tag every post with different coordinates so JBake generate the map automatically

I would like to have the possibility to have different maps, for example one for trips, another one for talks, etc and every one will show only the associate "mappost"

Model

Map (type=map) with attributes status, map and title. Only published will be rendered.
MapPost (type=mappost). A typical post with new coordinates and map attributes

Template

I’ve created a new file, map.tpl in the "templates" directory. Basically it renders a pure HTML with all javascript/css/link required

I’ll use a WebComponent <leaflet-map id="blog-map" fitToBounds></leaflet-map> from https://migupl.github.io/vanilla-js-web-component-leaflet-geojson because it makes very easy to include and manage a map

JBake will create as many xxx.html as content with type equal to map are published

The template will "inject" a Javascript array collecting all mappost associate to this map:

published_mapposts.findAll{ it.map == content.map }.each{ post->
    yieldUnescaped """

    data.push({
        "type": "Feature",
        "geometry": {
            "type": "${post.coordstype ?: 'Point'}",
            "coordinates": [${post.coordinates}]
        },
        "properties": {
            "popupContent": '<a href="${post.uri}">${post.title}</a><br/>${post.summary}',

        ... more attributes
    })
    """

MapPost

As I don’t want any special (by the moment) in every mappost I’ve duplicated the post.tpl template

Configuration

To activate the new kind of content you need to configure jbake.properties:

jbake.properties

template.map.file=map.tpl
template.mappost.file=mappost.tpl

Mis-Andanzas

To create the trip map I’ve created a new "empty" asciidoc file mis-andanzas.adoc

= Mis Andanzas
Jorge Aguilera
2023-03-28
:jbake-type: map
:jbake-status: published
:jbake-map: mis-andanzas

As you can imagine jbake-type: map advise to JBake to use the map.tpl so we have at the end an mis-andanzas.html file with an embedded map

Next step is to write "mappost" as a typical post but including some attributes:

= Costa Rica 1999
Jorge Aguilera
2022-09-23
:jbake-type: mappost
:jbake-status: published
:jbake-tags: personales, viajes
:jbake-summary: Primer viaje transoceánico
:jbake-coordinates: -83.712266,8.6543759
:jbake-map: mis-andanzas
:idprefix:
:icons: font

A poco que hayas hablado conmigo seguro que me has tenido que aguantar la chapa sobre
blabla blabla

As you can see the type is mappost and I’ve add coordinates attribute to locate this entry into the map

Result

This is an example how it appears in my blog

You can see it in action at https://jorge.aguilera.soy/mis-andanzas.html