nuxt3-leafletで、指定したマーカーを前面に表示する

概要

nuxt3-leafletで、指定したマーカーを前面に表示する方法に関する備忘録です。

方法

以下のように、LMarkerにz-index-offset属性を用いることで、指定したマーカーを前面に表示することができました。

<template v-for="marker in markers">
    <LMarker
      @click="selectMarker(marker)"
      :lat-lng="[marker.lat, marker.lng]"
      :z-index-offset="selectedSpotId === marker.id ? 1000 : 0"
    >
      <LTooltip>
        {{ marker.title }}
      </LTooltip>
      <LIcon
        :iconUrl="marker.icon"
        :iconSize="[25, 41]"
        :iconAnchor="[12, 41]"
        :popupAnchor="[1, -34]"
        :tooltipAnchor="[16, -28]"
        shadowUrl="https://esm.sh/leaflet@1.9.2/dist/images/marker-shadow.png"
        :shadowSize="[41, 41]"
        :shadowAnchor="[12, 41]"
      ></LIcon>
    </LMarker>
  </template>

まとめ

nuxt3-leafletの利用にあたり、参考になりましたら幸いです。