MapBlog with JBake

  • septiembre, 27 2023
  • Jorge Aguilera
  • 03:00
  • 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


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


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


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"


  • 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


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 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{ == }.each{ post->
    yieldUnescaped """

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

        ... more attributes


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


To activate the new kind of content you need to configure


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

= Mis Andanzas
Jorge Aguilera
: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
: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
: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


This is an example how it appears in my blog


You can see it in action at

Follow comments at Telegram group Or subscribe to the Channel Telegram channel

2019 - 2023 | Mixed with Bootstrap | Baked with JBake v2.6.7