Laravel Livewire set is Removing Map Marker

Question

I am using Laravel 8 with Livewire and am displaying a Mapbox map in my page. When I click on the map, I am getting the coordinates of the click and placing a marker on the point where clicked. All working well up to this point.

What I am then trying to do is emit the coordinates to the Livewire component ready for saving along with other form details. However, when I click the map, the marker quickly appears then disappears; although the coordinates are emitted correctly and stored.

map.on('click', function(e){
            var coord = e.lngLat;

            updateCoords(coord);

            addMarker(coord);

        });

        function addMarker(coord) {
            if(newMarker != undefined) {
                newMarker.remove();
            }

            newMarker = new mapboxgl.Marker()
                .setLngLat([coord.lng, coord.lat])
                .addTo(map);
        }

        function updateCoords(coord) {
            @this.set('latitude', coord.lat);
            @this.set('longitude', coord.lng);
        }

I've tried emitting with a listener and using @this.set, both have the same effect.

The component isn't doing anything special at the moment, but I can see that the coordinates are being passed correctly. Just the issue being that the map marker disappears from the map.

Any ideas?

Answer 1

Found out that it is just a case of adding wire:ignore to the map div.

<div id="my-map" wire:ignore></div>

I found the answer from here: Livewire Github.

When Livewire updates it replaces the DOM and removes the changes; in my case, removing the map marker.