Marker Layer

Interactive map data

center: -98.137,40.137
zoom: 4
pitch: 0
bearing: 0
minZoom: 0
maxZoom: 22
bounds: undefined

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