Map with multiple markers from different .md files

[majdal]

I’m trying to figure out if Hugo can solve this problem for me:

I have a list of organizations, each one has its own .md file in my /content/organizations/ directory.

The .md files look like this:

---
name: "org name"
location:
  - latitude: 33.76581
    longitude: -77.19933
---

It’s pretty straightforward to take that metadata and display a map with a marker in each .md file using a shortcode.

But, what I’m trying to do is to display all the markers from all the organizations in one map in my index file. Is there a way to loop over the name and location attributes in all the .md files to use them as markers in my map?

Everything I have found in my combing the Internet only displays one marker, and I can’t find a way to loop over these attributes in frontmatter and pass them to a partial.

Many thanks!

[jmooring]

First, your front matter should look something like this:

---
title: Denver, CO
date: 2024-11-21T08:43:19-08:00
draft: false
params:
  location:
    latitude: 39.7392
    longitude: 104.9903
---

Create a partial that returns an array of maps:

{{ $locations := slice }}
{{ with site.GetPage "/organizations"  }}
  {{ range .RegularPages }}
    {{ $location := dict
      "title" .Title
      "location" (dict
        "latitude" .Params.location.latitude
        "longitude" .Params.location.longitude
      )
    }}
    {{ $locations = $locations | append $location }}
  {{ end }}
{{ end }}
{{ return $locations }}

That creates a data structure like this:

[
  {
    "location": {
      "latitude": 38.8462,
      "longitude": 77.3064
    },
    "title": "Fairfax, VA"
  },
  {
    "location": {
      "latitude": 39.7392,
      "longitude": 104.9903
    },
    "title": "Denver, CO"
  },
]

Then call the partial and render however you want. For example, to create a unordered list:

{{ with partial "get-locations.html" . }}
  <ul>
    {{ range . }}
      <li>{{ .title }} ({{ .location.latitude }}, {{ .location.longitude }})</li>
    {{ end }}
  </ul>
{{ end }}

Working example:

git clone --single-branch -b hugo-forum-topic-52491 https://github.com/jmooring/hugo-testing hugo-forum-topic-52491
cd hugo-forum-topic-52491
hugo server

[majdal]

@jmooring

Then call the partial and render however you want. For example, to create a unordered list:

This is brilliant, and a much more detailed response than what I was expecting. Thank you.

The last remaining piece of the puzzle for me is how to pass that data structure to the partial that creates my map.

The alternative is to call get-locations.html from within my partial that generates the map, instead of passing down the json array as an argument to the partial. Which should work, even though it’s not as neatly separated as I would have liked.

[jmooring]

{{ partial "render-unordered-list.html" (partial "get-locations.html" .) }}

The second one returns a map (the data structure).

[majdal]

I didn’t know you can pass partial outputs as arguments to other partials. Brilliant. Thank you!