<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-3672139717">(openstreetmap/openstreetmap-website#6234)</a></div>
<blockquote>
<p dir="auto"><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.</p>
</blockquote>
<p dir="auto">Once we get to migrating the main map on the homepage, we’ll need to replace <a href="https://github.com/openstreetmap/leaflet-osm/">leaflet-osm</a>’s <code class="notranslate">L.OSM.DataLayer</code> class with an alternative library that carries no dependency on Leaflet. We use this class to overlay element geometries from the OSM API’s /full response.</p>
<p dir="auto">MapLibre GL JS has built-in support for GeoJSON overlays, so we only need a library for the conversion from that JSON format to GeoJSON, but not for the overlay classes themselves. I know of three such libraries: <a href="https://github.com/tyrasd/osmtogeojson/">osmtogeojson</a>, <a href="https://github.com/tibetty/osm2geojson-lite/">osm2geojson-lite</a>, <a href="https://github.com/dschep/osm2geojson-ultra/">osm2geojson-ultra</a>. The last one is the newest claims to be much more performant.</p>

<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-3672139717">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLNFEXQBTYXPTSIBIGT4CMGOZAVCNFSM6AAAAACCGOXFYSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTMNZSGEZTSNZRG4">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLMFMLAPIB7NCW43FQD4CMGOZA5CNFSM6AAAAACCGOXFYSWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTW24BT4K.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/3672139717</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-3672139717",
"url": "https://github.com/openstreetmap/openstreetmap-website/issues/6234#issuecomment-3672139717",
"name": "View Issue"
},
"description": "View this Issue on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>