â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 tooltipAnchor
in the icon options, refer second custom icon marker.