←Examples

Dynamic marker via bind:this @0.0.7^

This is still in the testing phase but it is a good release candidate. This example makes use of bind directive.

<script>
  import Map from "@anoram/leaflet-svelte";

  async function getISS() {
        let data = await fetch(`https://api.wheretheiss.at/v1/satellites/25544`);
        let res = await data.json();
        let lat = res.latitude;
        let lng = res.longitude;
        return {
            lat,
            lng,
        };
    }
    let options = {
        zoom: 1,
        mapID: "map",
        markers: [
            {
                lat: 13,
                lng: 80,
                popup: {
                    isOpen: true,
                    text: `Static Marker`,
                },
            },
        ],
    };
    let MAP_EL;

    async function init() {
        setInterval(async () => {
            let latlng = await getISS();
            let marker = {
                lat: latlng.lat,
                lng: latlng.lng,
                tooltip: {
                    isOpen: false,
                    text: `International Svelte Station`,
                    direction: "top",
                    sticky: "true",
                },
                icon: {
                    iconUrl: "./svelte-logo.png",
                    iconSize: [48, 48],
                },
            };
            MAP_EL.updateMarkers({
                markers: [marker],
            });
        }, 5000);
    }
</script>

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

<div class="map">
  <Map {options} bind:this={MAP_EL} on:ready={init} />
</div>

Note

This example uses ISS API to fetch the location and update it once in 5 seconds you will see it.