eleventy-plugin-embed-openstreetmap

1.0.0 • Public • Published

eleventy-plugin-embed-openstreetmap

NPM Version Build test status
MIT License Contributor Covenant

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:

Screenshot of OpenStreetMap view of Easter Island

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.

Package Sidebar

Install

npm i eleventy-plugin-embed-openstreetmap

Weekly Downloads

536

Version

1.0.0

License

MIT

Unpacked Size

8.52 kB

Total Files

7

Last publish

Collaborators

  • gfscott