Render Mapbox inside a Livewire component

#1

The issue is general, how do I run a javascript plugin/library inside a component?

When the component renders it works fine but when it reloads (on any actions) the div where MapBox is rendered dissapears.

if I add wire:ignore the div stays but it doesn’t update.

If I move the div (where mapbox is rendered) outside the component it works fine which is weird.

Any ideas?

Thanks!

#2

Hi Alexandru
I have the sam issue. I’m loding the mapbox with alpine.
Made a componant

<div 
wire:ignore 
x-data
x-init="
    mapboxgl.accessToken = 'XXX';
    var map = new mapboxgl.Map({
        container: 'mapbox',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-18.95, 65.00],
        zoom: 5 // starting zoom
    });
    map.on('load', (event) => {
        map.resize();
    });
    var geocoder = new MapboxGeocoder({
        accessToken: mapboxgl.accessToken, 
        countries: 'is',
        mapboxgl: mapboxgl,
        marker: true, 
        placeholder: 'Austurvöllur', 

    });

    map.addControl(geocoder);

    geocoder.on('result', function(e) {

        const marker = new mapboxgl.Marker({ draggable: true, color: 'pink' })
        .setLngLat(e.result.center)
        .addTo(map);

        mapMarkers.push(marker);

    });
"
class="w-full h-96"
>
<div class="w-full h-96" id="mapbox" ></div>
</div>

And add it to my livewire form like

  <x-input.mapbox/>

When I update any livewire items in the form, the mapbox reload.
isn’t wire: ignore suppose to handle that.