eleventy-plugin-embed-openstreetmap

This Eleventy plugin automatically embeds OpenStreetMap maps from URLs in markdown files. It’s part of the eleventy-plugin-embed-everything project.

Install in Eleventy

In your Eleventy project, install the plugin through npm:

$ npm i eleventy-plugin-embed-openstreetmap

Then add it to your Eleventy config file (usually .eleventy.js):

const embedOSM = require("eleventy-plugin-embed-openstreetmap");

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(embedOSM);
};

Usage

To place an OpenStreetMap embed into any markdown page, paste its URL into a new line. The URL should be the only thing on that line.

Markdown file example:

...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula, elit vel condimentum porta, purus.

https://www.openstreetmap.org/#map=13/-27.1386/-109.3388

Maecenas non velit nibh. Aenean eu justo et odio commodo ornare. In scelerisque sapien at.

...

Result:

Settings

You can configure the plugin to change its behavior by passing an options object to the addPlugin function:

eleventyConfig.addPlugin(embedOSM, {
  // just an example, see default values below:
  embedClass: 'custom-classname'
});

Plugin default options

The plugin’s default settings reside in lib/defaults.js. All of these values can be customized with an options object passed to the plugin.

Option	Type	Default	Notes
`embedClass`	String	`"eleventy-plugin-embed-openstreetmap"`	CSS class applied to the container `<div>` that wraps the embedded map.
`layer`	String	`mapnik`	Selected tile layer style applied to the map.
`wrapperStyle`	String	`aspect-ratio: 16/9`	Inline CSS `style` parameter applied to the container `div`.

Notes and caveats

This plugin is deliberately designed only to embed when the URL is on its own line, and not inline with other text.
To do this, it uses a regular expression to recognize OpenStreetMap URLs, wrapped in an HTML <p> tag. If your Markdown parser produces any other output, it won’t be recognized.
I’ve tried to accommodate common URL variants, but there are conceivably valid OSM URLs that wouldn’t get recognized. Please file an issue if you run into an edge case!
This plugin uses transforms, so it alters Eleventy’s HTML output as it’s generated. It doesn’t alter the source markdown.