MapBlog with JBake
Tags: jbake
Published: 2023-09-28 05:17:54

---
title: MapBlog with JBake
published: true
date: 2023-09-27 00:00:00 UTC
tags: jbake
canonical_url: https://jorge.aguilera.soy/blog/2023/jbake-map.html
---

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

<dl>
<dt>INFO</dt>
<dd>
<p>this site is generated by JBake</p>
</dd>
</dl>

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

<dl>
<dt>WARNING</dt>
<dd>
<p>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</p>
</dd>
</dl>

## 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](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

 ![jbakemap](https://jorge.aguilera.soy/images/jbakemap.png)

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