<div style="display: flex; flex-wrap: wrap; white-space: pre-wrap; align-items: center; "><img height="20" width="20" style="border-radius:50%; margin-right: 4px;" decoding="async" src="https://avatars.githubusercontent.com/u/1231218?s=20&v=4" /><strong>1ec5</strong> left a comment <a href="https://github.com/openstreetmap/openstreetmap-website/issues/6234#issuecomment-3114232604">(openstreetmap/openstreetmap-website#6234)</a></div>
<p dir="auto">Thanks for opening this ticket and starting the conversation about a full migration to GL JS. OpenHistoricalMap’s fork of this project has been using maplibre-gl-leaflet for some time to avoid deviating too much from OSM, but this plugin’s limitations become apparent pretty quickly.</p>
<p dir="auto">I agree that we should target a single map library if possible. In theory, a dual-library setup would enable us to keep supporting non-WebGL-capable environments, but I’d expect the code maintenance overhead to be substantial. We could make our own mapstraction library on top of both, but that would get us right back to square one with maplibre-gl-leaflet.</p>
<blockquote>
<p dir="auto">How to use the just-introduced vector-based marker definitions with MapLibre is also a point I'm unsure about, considering the CSS- and DOM-driven coloring.</p>
</blockquote>
<p dir="auto">There are two ways to put a “pin” on a MapLibre map:</p>
<ul dir="auto">
<li><a href="https://maplibre.org/maplibre-gl-js/docs/examples/add-custom-icons-with-markers/" rel="nofollow">A DOM element</a> using the <a href="https://maplibre.org/maplibre-gl-js/docs/examples/add-a-default-marker/" rel="nofollow">marker API</a>. This would be pretty similar to what we’re already doing.</li>
<li><a href="https://maplibre.org/maplibre-gl-js/docs/examples/center-the-map-on-a-clicked-symbol/" rel="nofollow">A symbol layer</a> using the runtime styling API. This is the traditional MapLibre approach with better performance and the ability to have the symbol underlap other layers, but interactivity is harder to implement. This is the same API we’d use to overlay an element’s geometry or a route line on the map, but it would probably be overkill for just a marker.</li>
</ul>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/issues/6234#issuecomment-3114232604">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLM4CFTT3IPWAOBE5433KEHZTAVCNFSM6AAAAACCGOXFYSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTCMJUGIZTENRQGQ">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLK2MACR32LHZ5XCT4D3KEHZTA5CNFSM6AAAAACCGOXFYSWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTVZT5VRY.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/issues/6234/3114232604</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>

<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/issues/6234#issuecomment-3114232604",
"url": "https://github.com/openstreetmap/openstreetmap-website/issues/6234#issuecomment-3114232604",
"name": "View Issue"
},
"description": "View this Issue on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>