OpenStreetMap embeds for Micro.blog are here
A while ago, I created a Micro.blog Plugin to replace the native Google Maps iframes I had been using in some of my old posts. Don’t get me wrong, these native embeds worked well enough, but they bloated the code, created a dozen connections to Google servers, and noticeably slowed down the page.
The initial version of the plugin did its job for the few cases I needed, but whenever I wanted to quickly add a new map to a post, it became a pain. Finding the right latitude and longitude, or describing a place often failed miserably. Too often, the result of the rendered map in my blog post was a lonely pin floating somewhere in the middle of the ocean, with nothing but blue around it. And the worst thing was, I didn’t even know why.
At some point, I was so frustrated that I removed all the embedded maps and even considered deleting the repository entirely. Unfortunately Luckily I was busy with other things and forgot about the pain the plugin caused. But while working on the YouTube plugin over the weekend, I decided to give this one another try before deleting the repository. And I’m glad I did.
The new version 4.0 now uses OpenStreetMap instead of Google Maps and renders fully responsive, privacy-friendly maps. It supports custom zoom levels, markers (with text), and includes light and dark mode themes that adapt beautifully to the system preferences of your website visitors.
Under the hood, quite a bit has changed:
- The plugin now integrates Nominatim and Geoapify for location lookup and tile rendering. Nominatim handles geocoding, turning place names into coordinates, while Geoapify provides clean, reliable map tiles without any tracking.
- The rendering of the interactive map is powered by Leaflet.js, which only loads when a visitor interacts with the preview image.
Like before, each map starts as a static preview image, keeping pages fast until interaction. And all map data (location, zoom, markers, text) is stored directly inside the short code, making embeds self-contained and migration-proof.
Speaking about migration: If you used the old version of the plugin, you don’t need to update your posts or short codes. To get working map previews again, simply register for a free Geoapify API key and save it in the plugin settings.
To make building and testing short codes easier, there is now a live validator, a small web app that helps you generate and verify map embeds interactively before publishing them.
And before you ask, here is how an embedded map looks and behaves. The following map shows the Munich Oktoberfest, which is, for whatever reason, a place in OSM. The location is actually called Theresienwiese.
So, no Google APIs, no tracking, no analytics anymore. The rewritten rendering logic makes maps faster, cleaner, and easier to embed. It finally feels like the simple, reliable map plugin I wanted from the beginning.
I hope you enjoy it as much as I do!