MapBox div empty on first load

[dabenzel]

Thanks for fixing #19, now my map loads without error, but currently on the second page reload.

Currently, the div is empty on the first load of the map (livewire-component)

<div id="alarmmap" class=""></div>

after re-loading the same page, the div gets filled with the map-data

<div id="alarmmap" class="mapboxgl-map">__map-content__</div>

[dabenzel]

this is the whole @livewire() for the map:

<div wire:snapshot="xxxxx" wire:effects="[]" wire:id="xxxxx">
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.js"></script>
    <style>
    #alarmmap {
        position: relative;
        top: 0;
        bottom: 0;
        height:700px; width:100%
    }

    .marker {
        display: block;
        border: none;
        cursor: pointer;
        padding: 0;
    }
</style>

<div id="alarmmap" class=""></div>

<script>
    mapboxgl.accessToken = 'xxxxxx';

    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->

    const map = new mapboxgl.Map({
        container: 'alarmmap',
        style: 'mapbox://styles/mapbox/navigation-night-v1',
        center: [xxxxx, xxxxx],
        zoom: 14,
        interactive: true,
        cooperativeGestures: true,
    });

    map.addControl(new mapboxgl.NavigationControl());

    map.on('load', function() {
        map.resize();
    });


    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->

    let markerInLoop

    <!--[if BLOCK]><![endif]-->
        <!--[if BLOCK]><![endif]-->
            markerInLoop = new mapboxgl.Marker();

        <!--[if ENDBLOCK]><![endif]-->

            markerInLoop.setLngLat([xxxxx, xxxxx]);

            <!--[if BLOCK]><![endif]-->
                markerInLoop.setPopup(new mapboxgl.Popup({
                    offset: 25
                }).setText('xxxxx'))

            <!--[if ENDBLOCK]><![endif]-->

            markerInLoop.addTo(map);

    <!--[if ENDBLOCK]><![endif]-->

    markerInLoop = undefined;
</script>
</div>

[dabenzel]

Update: I found out the problem is the filament spa-mode When I disable it, the map loads directly

[koossaayy]

Update: I found out the problem is the filament spa-mode When I disable it, the map loads directly

Then how about wrapping the JS code, in the navigate hooks in Livewire. You can reference those for more details : Javascript Hook And if that works for you, I'll update the documentation about using Livewire as well.

[dabenzel]

Problem seems to be that the const map is re-used on each pageload. I already tried unsetting map on livewire:navigating. Didn't work.

Problem is that the js-code is made from your Plugin inside the livewire component.

My livewire component looks like this:

    @if(!empty($record->longitude) && !empty($record->latitude))
        <x-filament::section id="map-box" collapsible>
            <x-slot name="heading">
                Karte
            </x-slot>
            @livewire('show-alarm-location', ['record' => $record])
        </x-filament::section>
    @endif

The component (show-alarm-location.blade.php) itself looks like this:

    <link href='https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.css' rel='stylesheet'/>
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.js'></script>
    <x-mapbox
        id="alarmmap"
        mapStyle="mapbox/navigation-night-v1"
        style="height:700px; width:100%"
        position="relative"
        :zoom="16"
        :center="['long' => $record->longitude, 'lat' => $record->latitude]"
        :navigationControls="true"
        :cooperativeGestures="true"
        :interactive="true"
        :markers="[['long' => $record->longitude, 'lat' => $record->latitude, 'description' => $record->xx]]"
    />
</div>

[koossaayy]

I will try it on Filament and I will reopen the issue. But closing for now. Thank you.