Multiple markers Example
Markers are large part of any mapping API and they are declared as array and can have custom icons. Markers can be extended with Icons and popups(tooltip) and can have HTML inside it you can experiment.
<script>
import Map from "@anoram/leaflet-svelte";
let options = {
zoom: 13,
center: [13, 80],
markers: [
{
lat: 13.001,
lng: 80.01,
},
{
lat: 13,
lng: 80,
popup: {
isOpen: true,
text: `Marker 1`,
},
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],
},
},
],
mapID: "map",
attributionControl: true,
};
</script>
<style>
.map {
height: 600px;
width: auto;
}
</style>
<div class="map">
<Map {options} />
</div>
Note
Adjust the icon and popup offset by changing iconAnchor, shadowAnchor, popupAnchor
Having no icon will result a default marker.