Marker Layer

svelte
<MapLibre
  style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
  class={mapClasses}
  standardControls
  center={[-98.137, 40.137]}
  zoom={4}
>
  <GeoJSON id="states" data={states} promoteId="STATEFP">
    <MarkerLayer interactive let:feature>
      <div class="bg-gray-200 rounded-full p-2 shadow">
        <div class="text-sm font-bold">{feature.properties.NAME}</div>
      </div>
      <Popup openOn="hover">
        {feature.properties.NAME} has FIPS code {feature.properties.STATEFP}
      </Popup>
    </MarkerLayer>
  </GeoJSON>
</MapLibre>

Back to Examples

Github