Jetzt mit hellem und dunklem Modus zeigt eine Veröffentlichung von OpenStreetMap-Einbettungen für Micro.blog auf einem türkisfarbenen Hintergrund.

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 worked for a handful of cases, but quickly became annoying in daily use. Finding coordinates, or even geocoding a simple place name, often failed miserably. Too often, the result was a sad little pin floating 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 5.0 now uses OpenStreetMap instead of Google Maps. It renders fully responsive, privacy-friendly maps that respect light and dark mode based on the system preferences of the website visitor. It supports custom zoom levels and adds small but important improvements that make rendering of maps much more reliable.

Under the hood, quite a bit has changed:

  • The plugin relies on Nominatim for geocoding, so you can simply type a place name instead of entering geocoordinates.
  • Geoapify is loading high-quality, map-tiles without any tracking
  • And the rendering of the interactive map is powered by Leaflet.js

If a Geoapify API key is configured in the plugin, coordinate-based shortcodes always use static previews. In that case, each map begins as a static preview image to keep pages fast. Only when a visitor interacts with the preview image of the map, Leaflet is loading the real interactive map. When no API key is set, the map is rendered interactively right away.

Locations, and zoom levels live inside the shortcode. No hidden dependencies, no external config. Maps remain portable 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 static map previews again, simply register for a free Geoapify API key and save it in the plugin settings. Without that API key, existing maps are rendered as interactive maps by default.

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.

Klick lädt interaktive Karte von OSM

So, no more Google APIs, no tracking and no analytics. 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!