Window.emit from javascript refereshes tag

[reniar1]

hello devs,

When I am using this code my marker always jumps back to 0,0 as if the sectipon would be reredenered after window.emit …

<div>
<form wire:submit.prevent="upload">

    <input type="submit">

<div id='map' class="ml-24"></div >

<pre id="coordinates" class="coordinates"></pre >

<script >

mapboxgl.accessToken = 'pk.eyJ1Ijoibml0YWk4IiwiYSI6ImNraDlqcjRyeDA5a3kzMHBqaWlnaWdoc2IifQ.u9aKek1EJtfeAwDLw6l0FA';

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/nitai8/ckh9jtji647xw19mwsoygi8lv',
    center: [0, 0],
    zoom: -1
});


map.doubleClickZoom.disable();

var marker = new mapboxgl.Marker({
    color: "#FFFFFF",
    draggable: true
}).setLngLat([0, 0])
    .addTo(map);

function onDragEnd() {
    var coord = marker.getLngLat();
    // latitude = coord.lat;
    // longitude = coord.lng;
    //     window.livewire.emit('set:latitude-longitude', latitude, longitude)
    coordinates.style.display = 'block';
    coordinates.innerHTML =
        'Longitude: ' + coord.lng + '<br />Latitude: ' + coord.lat;
}

marker.on('dragend', onDragEnd);

map.on('click', function (e) {
    if (e.originalEvent.detail > 1) {
        // return;
        var coord = e.lngLat;

        console.log(coord.lng);
        console.log(coord.lat);

        latitude = coord.lat;
        longitude = coord.lng;

        window.livewire.emit('set:latitude-longitude', latitude, longitude)
//AFTER THIS IS TRIGGERED THE MARKER JUMPS BACK TO 0,0
        marker.setLngLat([coord.lng, coord.lat])
    }
});

</script >

</form >


</div>

This is my livewire component

<?php

namespace App\Http\Livewire;

use App\Jobs\ConvertVideoForStreaming;
use App\Models\Offer;
use Illuminate\Foundation\Bus\DispatchesJobs;
use Livewire\Component;
use Livewire\WithFileUploads;

class Create extends Component
{
    use WithFileUploads;
    use DispatchesJobs;

    public $video;
    public $title;
    public $longitude;
    public $latitude;

    protected $listeners = [
        'set:latitude-longitude' => 'setLatitudeLongitude'
    ];

    public function render()
    {
        return view('create')->layout('layouts.app');
    }

    public function setLatitudeLongitude($latitude, $longitude)
    {
       $this->latitude = $latitude;
       $this->longitude = $longitude;
    }

    public function upload()
    {
        $this->validate([
            'title' => 'required',
            'video' => 'max:1000000|file|mimetypes:video/mp4,video/mpeg,video/x-matroska',
        ]);

        $offer = Offer::create([
            'disk'          => 'videos_disk',
            'original_name' => $this->video->getClientOriginalName(),
            'path'          => $this->video->store('/', 'videos_disk'),
            'streaming_path'=> null,
            'title'         => $this->title,
            'longitude'     => $this->longitude,
            'latitude'     => $this->latitude,
        ]);


        $this->dispatch(new ConvertVideoForStreaming($offer));

    }
}

it always jumps back to the middle of the map 0,0