doesnt work with SvelteKit

[gwendal5]

Hi, I tried using your package with the example code but nothing shows up on the page.

My code is this:

<script>
    import { Map, Geocoder, Marker, controls } from "@beyonk/svelte-mapbox";

    const { GeolocateControl, NavigationControl, ScaleControl } = controls;

    let mapComponent;
    let lng = 69;
    let lat = 69;
    let zoom = 19;
    // Usage of methods like setCenter and flyto
    function onReady() {
        mapComponent.setCenter([lng, lat], zoom); // zoom is optional
        mapComponent.flyTo({ center: [lng, lat] }); // documentation (https://docs.mapbox.com/mapbox-gl-js/example/flyto)
    }

    // Define this to handle `eventname` events - see [GeoLocate Events](https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol-events)
    function eventHandler(e) {
        const data = e.detail;
        // do something with `data`, it's the result returned from the mapbox event
    }
</script>

<Map
    accessToken="token"
    bind:this={mapComponent}
    on:recentre={(e) => console.log(e.detail.center.lat, e.detail.center.lng)}
    on:ready={onReady}
    options={{ scrollZoom: false }}
/>

[gwendal5]

Does your package works with SvelteKit ? I am using SvelteKit version 1.0.0-next.326

[Rar9]

Even the github demo is just rebooting in Firefox?

Please check and update

[robinsonkwame]

Please check and update

[gamecubate]

@gwendal5 the map component needs to be placed in a sized container, e.g.,

<div style="height:500px;">
  <Map ..../>
</div>

[marksteven]

make sure your .env file(separate file ) is there and written correct otherwise map not show