A simple Hugo partial template that renders a world coverage map using jQuery Vector Map's SVG library and dataset from NaturalEarthData.
Go to your Hugo project, create layouts/partials
dir and add this repo as submodule:
mkdir -p layouts/partials
git submodule add [email protected]:icostan/huveragy.git layouts/partials/
cat <EOF > config.toml
[Params.huveragy]
countries = { "US"=5, "IN"=2, "RO"=5 }
colors = ['#dc9658', '#d62728']
EOF
Just add the following snippet to any HTML page to display the coverage map.
{{ partial "huveragy/huveragy.html" }}
A bit more complicated since Hugo does not allow mixing of Markdown and code/variables but rest assured, I've got this for you. Note the .
(dot) after (.Get 0)
, that is important, that is Hugo's context.
First of all, create a shortcode
called partial
with the following content.
mkdir -p layouts/shortcodes
cat <EOF > layouts/shortcodes/partial.html
{{ partial (.Get 0) . }}
EOF
Then drop the following snippet in any Markdown page to display the coverage map. Notice the extra <
and >
brackets to render our little partial
shortcode that in turns renders our huveragy
partial template.
{{< partial "huveragy/huveragy.html" >}}
- world coverage
- continent coverage
- country coverage: at states/regions/counties level
- auto-load required JS files based on configuration
- configurable text for "onTipShow" event
- DRY everything
- distribute JS/CSS/HTML files via cdnjs.com
- try jqvmaps instead jvectormaps library, better options support