←Examples

Tooltip @0.0.6^

Used to display small texts on top of map layers. Further Reading about Tooltips

<script>
  import Map from "@anoram/leaflet-svelte";
 let options = {
    center:[13,80],
    zoom:15,
    markers: [
      {
        lat: 13,
        lng: 80,
        tooltip: {
          isOpen: true,
          text: `Permanant Tooltip`,
          direction: "right",
          permanent:'true'
        },
      },
      {
        lat: 13.005,
        lng: 80.001,
        tooltip: {
          isOpen: false,
          text: `Sticky tooltip`,
          direction: "top",
          sticky:'true'
        },
        icon: {
          iconUrl: "https://leafletjs.com/examples/custom-icons/leaf-red.png",
          shadowUrl:
            "https://leafletjs.com/examples/custom-icons/leaf-shadow.png",
          iconSize: [38, 95],
          shadowSize: [50, 64],
          iconAnchor: [22, 94],
          shadowAnchor: [4, 62],
          popupAnchor: [-3, -76],
          tooltipAnchor: [-3, -76],
        },
      },
    ],
    mapID: "map",
    tileLayer: {
      url: "https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png",
      attribution: `&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Tiles style by <a href="https://www.hotosm.org/" target="_blank">Humanitarian OpenStreetMap Team</a> hosted by <a href="https://openstreetmap.fr/" target="_blank">OpenStreetMap France</a>`,
    },
  };
  
</script>

<style>
  .map {
    height: 600px;
    width: auto;
  }

</style>


<div class="map">
  <Map {options} />
</div>

Note

If you are using a custom icon then you need to offeset the tooltip via tooltipAnchorin the icon options, refer second custom icon marker.