map.js

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import OSM from 'ol/source/OSM.js';


document.addEventListener('alpine:init', () => {
    Alpine.data('map', function () {
        return {
            map: {},
            init() {
                this.map = new Map({
                    target: this.$refs.map,
                    layers: [
                        new TileLayer({
                            source: new OSM(),
                        }),
                        new VectorLayer({
                            source: new VectorSource({
                                features: this.features,
                            }),
                            style: this.styleFunction,
                        })
                    ],
                    view: new View({
                        projection: 'EPSG:4326',
                        center: [0, 0],
                        zoom: 2,
                    }),
                })
            },
        };
    });
});