An Eleventy plugin to automatically embed OpenStreetMap maps, using just their URLs.
npm install 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.
In your Eleventy project, install the plugin through npm:
``sh`
$ npm i eleventy-plugin-embed-openstreetmap
Then add it to your Eleventy config file (usually .eleventy.js):
`javascript
const embedOSM = require("eleventy-plugin-embed-openstreetmap");
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(embedOSM);
};
`
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
...
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.
...
`
!Screenshot of OpenStreetMap view of Easter Island
You can configure the plugin to change its behavior by passing an options object to the addPlugin function:
`javascript`
eleventyConfig.addPlugin(embedOSM, {
// just an example, see default values below:
embedClass: 'custom-classname'
});
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
that wraps the embedded map.
includeMarker | Boolean | false | Whether to include a map marker in 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
` 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.