How to access front matter value added by Netlify CMS (Map widget) in Hugo?

support
1

Hi there,

I am able to access any front matter single value such as:

# An index.md
---
location:
 latitude: 60.54445
 longitude: 9.245
---
# I can easily use this value in layouts to create a leaflet map such as:
L.circle([{{ .Params.location.latitude }}, {{ .Params.location.longitude }}],

But it becomes very complicated for me to get my head around on how to get non singular values separately from front matter in Hugo?

# An index.md front matter created by netlify CMS widget map in GeoJSON string
---
location:
 map: '{"type":"Point","coordinates":[60.54445,9.245]}'
---
# In this situation how can I get the Latitude and Longitude from the front matter to use in the layouts?
L.circle([{{ .Params.location.? }}, {{ .Params.location.? }}],

Thanks in advance for taking the time!

Dear @bep @jmooring can you please solve this or advice if it is possible to get the latitude and longitude values from the Hugo frontmatter

1st Failed attempt 
# Page frontmatter
---
location:
  map: '{"type":"Point","coordinates":[60.54445,9.245]}'
---
# layout code
{{ $location := .Params.location }}
{{ $coordinates := index (index $location "map" | jsonify) "coordinates" }}
{{ $latitude := index $coordinates 0 }}
{{ $longitude := index $coordinates 1 }}

L.circle([{{ $latitude }}, {{ $longitude }}])
2nd failed attempt

L.circle([{{ index .Params.location.map.coordinates 1 }}, {{ index .Params.location.map.coordinates 0 }}],

3rd solution which I thought would work after hours of reading through documentation 
{{ $location := .Params.location.map | default "{}" | .Get }}
L.circle([{{ index $location.coordinates 1 }}, {{ index $location.coordinates 0 }}],
2

Well, the value of Params.location.map is simply a string, as far as Hugo is concerned. While you might be able to convert that to a Hugo data type, it’s probably a PITA. For my Leaflet maps, I rely on much simpler structures, basically

location: [[lat1, long1], [lat2, long2]...]
type: [type1, type2, ...]

Alternatively, use JSON as your front matter datatype.

Does it work or doesn’t it?

3

Hello @chrillek

Seems like i have no control over the widget map value that Decap cms (formerly known as netlify cms) enter in the front matter.

if I have a choice I will just use the simple option in front matter like this

---
location:
 latitude: 60.54445
 longitude: 9.245
---

No It didn’t work

Do you know what can I do to solve this so I can get the longitude and latitude values from the Hugo front matter placed by netlify cms

Thanks

4

No. I do not use Netlify. And I try to keep things simple. I have the impression that you’re trying far too many things at once before you have a grasp of even the basic Hugo concepts.

Well, to that and build the map yourself.

5

Seems to be a json string… what about

{{ $location := dict }}
{{ with .Params.location.map }}
   {{ $location = transform.Unmarshal . }}
{{ end }}

Now you have {{ $location.type }} and {{ $location.coordinates}} the latter being an array I believe, so:
{{ index $location.coordinates 0 }} > 60.54445
{{ index $location.coordinates 1 }} > 9.245

Did not test this, but confident it should work. See transform.Unmarshal | Hugo

3 Likes
6

Good point. And weird function name. I’d have expected something like JSONparse instead. So I didn’t find unmarshal, as it’s not even mentioned in the “See also” of the jsonify documentation

7

Thank you @regis your solution works perfect. You are a legend!

8

It’s not json only. Can transform CSV, XML, etc…

1 Like
9

Glad I could help!

1 Like
10

I’m aware of that. It still doesn’t make that a good function name, and I still think that it should be mentioned in the doc near jsonify (and there’s no tomlify nor yamlify, either… Nor a marshal)

11

The doc is open source, help is always appreciated.

1 Like
12

Tried my hand at that once. Never got any reaction. Why would I try it again?

13

Try with a different tone… who knows.

1 Like
14

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.