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.