Leaflet Map With Centeral Marker

map.html

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<style>
    #map {
        z-index: 1;
        height: 400px;
    }

    .map-container {
        position: relative;
    }

    .map-marker-shadow-centered {
        background-image: url("https://unpkg.com/[email protected]/dist/images/marker-shadow.png");
        width: 41px;
        height: 41px;
        position: absolute;
        z-index: 2;
        left: calc(50% - 12px);
        top: calc(50% - 41px);
        transition: all 0.4s ease;
    }

    .map-marker-centered {
        background-image: url("https://unpkg.com/[email protected]/dist/images/marker-icon.png");
        width: 25px;
        height: 41px;
        position: absolute;
        z-index: 3;
        left: calc(50% - 12px);
        top: calc(50% - 41px);
        transition: all 0.4s ease;
    }
</style>

<div class="map-container">
    <div class="map-marker-shadow-centered"></div>
    <div class="map-marker-centered"></div>
    <div wire:ignore x-data="mapHandler()" x-init="initMap()" id="map"></div>
</div>

<script>
    function mapHandler() {
        return {
            lat: 35.6895,
            lng: 51.3890,
            map: null,

            initMap() {
                const recordLat = this.$wire.get('data.lat') ?? this.lat;
                const recordLng = this.$wire.get('data.lng') ?? this.lng;

                this.map = L.map('map', {
                    center: [recordLat, recordLng],
                    zoom: 13
                });

                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                }).addTo(this.map);

                this.map.on('moveend', (e) => {
                    this.lat = this.map.getCenter().lat;
                    this.lng = this.map.getCenter().lng;

                    this.$wire.set('data.lat', this.lat);
                    this.$wire.set('data.lng', this.lng);
                });
            }
        }
    }
</script>