https://santamariadelinvierno.es/modules/custom/modulo_geolocalizados/js/mapa.js?tm9fsd

1document.addEventListener('DOMContentLoaded', () => {
2
3    let input_localizacion = document.getElementById('edit-field-localizacion-0-value');
4    if (input_localizacion === null) {
5        input_localizacion = document.getElementById('edit-mapa-formulario-geolocalizado');
6    }
7
8    if(input_localizacion != null) {
9        input_localizacion.addEventListener('change', (e)=>{ // -3.580338, 42.623005
10
11            vectorSource.clear();
12            let coordenadas = input_localizacion.value.split(', ')
13            marker = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat([coordenadas[1], coordenadas[0]])));
14            markers.getSource().addFeature(marker);
15
16        });
17
18
19        /*
20        *
21            let lon = {{ mapa.lon }};
22            let lat = {{ mapa.lat }};
23        * */
24
25        let lon = '-3.689366';
26        let lat = '42.350428';
27
28        /*
29        const iconFeature = new ol.Feature({
30            geometry: new ol.geom.Point(ol.proj.fromLonLat([lon, lat])),
31            name: 'Somewhere near Nottingham',
32        });
33         */
34
35        const map = new ol.Map({
36            interactions: ol.interaction.defaults({mouseWheelZoom:false}),
37            target: 'map',
38            layers: [
39                new ol.layer.Tile({
40                    source: new ol.source.OSM({
41                        url: 'https://mapas.burgos.es/osm/{z}/{x}/{y}.png'
42                    }),
43                })
44            ],
45            view: new ol.View({
46                center: ol.proj.fromLonLat([lon, lat]),
47                maxZoom: 18,
48                zoom: 16,
49            })
50        });
51        vectorSource = new ol.source.Vector();
52        var markers = new ol.layer.Vector({
53            source: vectorSource,
54            style: new ol.style.Style({
55                image: new ol.style.Icon({
56                    anchor: [0.5, 1],
57                    //src: 'http://9zuneda.es/sites/zuneda/modules/modulo_geolocalizados/icons/Escudo_de_Orbaneja_Riopico.png',
58                    //src: 'http://' + window.location.hostname + '/sites/default/files/marcador-mapa-rojo.svg',
59                    src: 'https://' + window.location.hostname + '/sites/default/files/marcador-mapa-rojo.png',
60                    scale: [0.1, 0.1],
61                })
62            })
63        });
64        map.addLayer(markers);
65
66        if (input_localizacion.value != ''){
67
68            let coordenadas = input_localizacion.value.split(', ')
69            marker = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat([coordenadas[1], coordenadas[0]])

69));
70            markers.getSource().addFeature(marker);
71
72            map.getView().setCenter( ol.proj.fromLonLat([coordenadas[1], coordenadas[0]]) );
73            map.getView().setZoom(15);
74
75        }
76
77        map.on('singleclick', function (evt) {
78            // convert coordinate to EPSG-4326
79            coordenadas_marcador = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
80            console.log(coordenadas_marcador);
81
82            vectorSource.clear();
83
84            marker = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat([coordenadas_marcador[0], coordenadas_marcador[1]])));
85            markers.getSource().addFeature(marker);
86
87            input_localizacion.value = `${coordenadas_marcador[1]}, ${coordenadas_marcador[0]}`;
88
89        });
90    }
91})