mirror of
https://gitlab.com/mrubli/hugo-mod-leaflet.git
synced 2025-10-07 01:54:24 +00:00
023b8a7e50
Embedding a Leaflet map within a Tailwind Typography-styled <article> leads to a
very subtle (the higher the zoom the subtler) vertical map offset. It is
particularly noticeable in combination with track overlays where tracks and map
are suddenly misaligned.
The root cause is this part of the Tailwind-generated stylesheet:
.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 2em;
margin-bottom: 2em
}
It adds a 2em margin to all <img> element and, because Leaflet tiles are images,
that leads to a vertical offset.
The obvious solution is to not embed maps in a <article class="prose">. Another
workaround is to add a "not-prose" class to the map container:
<div id="map_container" class="not-prose">…</div>
While the above should reliably prevent any other Tailwind shenanigans, forcing
the <img> margin to be zero should work well enough for now.
94 lines
1.7 KiB
CSS
94 lines
1.7 KiB
CSS
.map-container {
|
|
position: relative;
|
|
padding: 6px 6px 18px 6px;
|
|
background: #eee;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.ui-icon {
|
|
background-image: url('/images/resize-handle-se.png');
|
|
background-position: -1px -1px;
|
|
}
|
|
|
|
.map {
|
|
height: 100%;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.map g.legend, g.legend-hover {
|
|
display: none;
|
|
}
|
|
|
|
.map .heightgraph-container {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Prevent styling from accidentally adding a margin to <img> elements. Leaflet tiles are such
|
|
elements and adding a margin creates a hard-to-notice and hard-to-debug offset in map tiles.
|
|
This problem has been observed when embedding maps within a @tailwindcss/typography <article>. */
|
|
.map-container img {
|
|
margin: 0px;
|
|
}
|
|
|
|
/* Heightgraph grid lines */
|
|
.map .heightgraph .grid .tick line {
|
|
stroke: #ccc;
|
|
}
|
|
|
|
.map-attribution {
|
|
left: 0px;
|
|
bottom: 3px;
|
|
font-size: 11px;
|
|
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
.map-attribution a {
|
|
color: #0078A8;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.leaflet-right .leaflet-control {
|
|
margin: 6px;
|
|
}
|
|
|
|
/* Heightgraph data point selector */
|
|
svg.heightgraph-container .select-info {
|
|
display: none;
|
|
}
|
|
|
|
svg.heightgraph-container .select-symbol {
|
|
display: none;
|
|
}
|
|
|
|
/* Map style when maximized */
|
|
|
|
.map.leaflet-maximized {
|
|
height: 90% !important;
|
|
top: 5%;
|
|
border: 2px solid white;
|
|
border-radius: 8px;
|
|
z-index: 1001; /* above the backdrop */
|
|
}
|
|
|
|
.map-backdrop {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.map ~ .map-backdrop {
|
|
display: none;
|
|
}
|
|
|
|
.map.leaflet-maximized ~ .map-backdrop {
|
|
display: block;
|
|
z-index: 1000; /* some leaflet controls use 400. top that. */
|
|
}
|
|
|
|
.map.leaflet-maximized ~ .map-attribution {
|
|
display: none;
|
|
}
|