I wanted to share a solution I found for some misbehaving map pins when using the fun Micro.blog Map “plugin” that Vlad Campos put together in conjunction with the excellent mnml theme by Jim Mitchell.

🗺️ Here’s my map, btw.

The problem I was having is that the map pins, on initial load (zoom level 2, showing the entire globe), would be misplaced to the north by a certain distance, consistently across the map. As you zoomed in more and more, however, the pins would migrate closer and closer to the correct location. It seemed to be a conflict with the mnml theme in particular, as it seemed to work fine in Tiny theme.

I don’t understand any of this, but with a whole lot of back-and-forth of unsuccessful but extremely confident answers (seriously, I’ve spent at least 5 hours on this) with both ChatGPT and Claude, I finally arrived at a working solution.

Add this to your custom CSS:

/* Fix Leaflet markers - override MNML's article img styles */
article .leaflet-container img,
.leaflet-container img {
  max-width: none !important;
  width: auto !important;
  border-radius: 0 !important;
  display: block !important;
}

article .leaflet-marker-icon,
article .leaflet-marker-shadow,
.leaflet-marker-icon,
.leaflet-marker-shadow {
  max-width: none !important;
  margin: -41px 0 0 -12px !important;
}

article .leaflet-tile,
.leaflet-tile {
  margin: 0 !important;
  max-width: none !important;
}

…and voila! The pins should display correctly right from the get-go.