https://www.mancomunitatelsports.es/modules/custom/modulo_geolocalizados/js/mapa.js?sjy9xx

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

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