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

Hi there,

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

# An
 latitude: 60.54445
 longitude: 9.245
# I can easily use this value in layouts to create a leaflet map such as:[{{ .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 front matter created by netlify CMS widget map in GeoJSON string
 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?[{{ .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
  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 }}[{{ $latitude }}, {{ $longitude }}])
2nd failed attempt[{{ index 1 }}, {{ index 0 }}],

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

Well, the value of 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?

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

 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


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.

Seems to be a json string… what about

{{ $location := dict }}
{{ with }}
   {{ $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


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

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

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

1 Like

Glad I could help!

1 Like

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)

The doc is open source, help is always appreciated.

1 Like

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

Try with a different tone… who knows.

1 Like

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