Learn how to use a global data file to populate a map on your Eleventy site.
In this final lesson we’re going to put everything we’ve learned so far into one magnificent page which lists top places to spot an opossum.
A global data files allow you to put a
.js files into a directory named
_data and the data will be available across all of your template/content files.
.js files are executed at build time and are a great way to pull data from an external source or perform some other computation to generate a dataset.
First, we’ll create a global data file with top opossum spots. Create the directory
_data in the root of the site and inside,
locations.json with the following content:
Putting a map with markers on our site is one thing, creating a reusable component where we can pass in an array of markers and plot them is another. With the latter we can reuse this map component any time we want to plot a list of markers on a map.
To make this a reusable component, we’ll create a partial which expects an array to be passed to it. Create
/_includes/_map.html with the following content:
There’s a lot going on here. Let me explain:
/assets/map.jswhich we’ll create shortly. This is responsible for initializing the map and adding the markers.
/assets/map.js with the following content:
The final set is to actually use the include. Open up
/about.md and append the following:
This passes the locations global data file we created earlier into the map partial.
Fire up the browser, navigate to your about page, and admire all your hard work.
This is only the beginning of your Eleventy journey. You now have the skills to build a basic Eleventy site. To continue the journey there’s a few resources I’d recommend:
Finally I want to briefly mention CloudCannon — it’s a content management system with first-class support for Eleventy. It syncs directly with your Git repository, so your development team can continue working in Eleventy while your content team can manage the content on the site. It’s the best of both worlds.
Thanks for reading and keep on building with Eleventy!