https://www.puertosantander.es/themes/santander/js/results-map.js?tlvapw

1(function ($, Drupal, drupalSettings) {
2    $(function () {
3        let viewRoutesEl,
4            botonListaEl,
5            viewRoutesNEl,
6            botonMapaEl,
7            mapaTuristicoEl,
8            map,
9            LeafIcon,
10            defaultIconUrl,
11            hoverIconUrl,
12            ownIconUrl,
13            locationIconUrl,
14            defaultIcon,
15            hoverIcon,
16            ownIcon,
17            locationIcon,
18            mapTrack,
19            zIndexOffset = 1000,
20            bounds = [],
21            resourcesData = [],
22            markers = [],
23            resourcePolygons = [],
24            lastHoverId = 0,
25            itemInMapSel = '.item-in-map',
26            addCluster = false, /* plugin https://github.com/Leaflet/Leaflet.markercluster required */
27            markersCluster,
28            ownPositionAdded = false,
29            EsriTopoMap = L.tileLayer.provider('Esri.WorldTopoMap'),
30            WorldImagery = L.tileLayer.provider('Esri.WorldImagery'),
31            Mapnik = L.tileLayer.provider('OpenStreetMap.Mapnik'),
32            baseLayers = {
33                //"Básico": Mapnik,
34                "Topográfico": EsriTopoMap,
35                "Satélite": WorldImagery,
36            },
37            opts = {
38                map: {
39                    scrollWheelZoom: true,
40                    // dragging: !L.Browser.mobile,
41                    maxZoom: 18,
42                    zoomControl: true,
43                    layers: [EsriTopoMap]
44                }
45            };
46
47        $(document).ready(function () {
48            let mapId = 'mapa';
49            // seleccionar todos los id que comienzan por mapa
50            // document.querySelector(`[id^="${mapId}"]`)
51
52            if ($('#' + mapId).length) {
53                viewRoutesEl = $('#itemList');
54                botonListaEl = $('#boton-lista');
55                viewRoutesNEl = $('#viewRoutesN');
56                botonMapaEl = $('#boton-mapa');
57                mapaTuristicoEl = $('#mapa');
58                map = L.map(mapId, opts.map);
59                const zoomIn = map.zoomControl._zoomInButton;
60                const zoomOut = map.zoomControl._zoomOutButton;
61
62                //Cambia el ariaLabel del zoom(+/-) de los mapas
63                const idiomaPagina = window.location.href.slice(31,-2);
64                
65                if(idiomaPagina.includes("es")){
66                    zoomIn.ariaLabel = "Aumentar Zoom";
67                    zoomOut.ariaLabel = "Reducir Zoom";
68                }else{
69                    zoomIn.ariaLabel = "Zoom In";
70                    zoomOut.ariaLabel = "Zoom Out";
71                }
72
73                LeafIcon = L.Icon.extend({
74                    options: {
75                        iconSize: [41, 41],
76                        popupAnchor: [0, -20],
77                        shadowSize: [0, 0]
78                    }
79                });
80                defaultIconUrl = viewRoutesEl.data('defaultIconUrl');
81                hoverIconUrl = viewRoutesEl.data('hoverIconUrl');
82                ownIconUrl = viewRoutesEl.data('ownIconUrl'),
83                    locationIconUrl = viewRoutesEl.data('locationIconUrl');
84                defaultIcon = new LeafIcon({ iconUrl: defaultIconUrl }),
85                    hoverIcon = new LeafIcon({ iconUrl: hoverIconUrl }),
86                    ownIcon = new LeafIcon({ iconUrl: ownIconUrl }),
87                    locationIcon = new LeafIcon({ iconUrl: locationIconUrl });
88
89                if (addCluster) {
90                    markersCluster = L.markerClusterGroup();
91                }
92
93                showMap();
94
95
96
97            }
98
99            Drupal.behaviors.ajaxViewUpdate = {
100
101
102                attach: function (context, settings) {
103
104                    if (map) {
105                        map.off();
106                        map.remove();
107                    }
108
109                    if ($('#' + mapId).length) {
110                        viewRoutesEl = $('#itemList');
111                        botonListaEl = $('#boton-lista');
112                        viewRoutesNEl = $('#viewRoutesN');
113                        botonMapaEl = $('#boton-mapa');
114                        mapaTuristicoEl = $('#mapa');
115
116                        map = L.map(mapId, opts.map);
117
118                        LeafIcon = L.Icon.extend({
119                            options: {
120                                iconSize: [41, 41],
121                                popupAnchor: [0, -20],
122                                shadowSize: [0, 0]
123                            }
124                        });
125                        defaultIconUrl = viewRoutesEl.data('defaultIconUrl');
126                        hoverIconUrl = viewRoutesEl.data('hoverIconUrl');
127                        ownIconUrl = viewRoutesEl.data('ownIconUrl'),
128                            locationIconUrl = viewRoutesEl.data('locationIconUrl');
129                        defaultIcon = new LeafIcon({ iconUrl: defaultIconUrl }),
130                            hoverIcon = new LeafIcon({ iconUrl: hoverIconUrl }),
131                            ownIcon = new LeafIcon({ iconUrl: ownIconUrl }),
132                            locationIcon = new LeafIcon({ iconUrl: locationIconUrl });
133
134                        if (addCluster) {
135                            markersCluster = L.markerClusterGroup();
136                        }
137
138                        showMap();
139
140                    }
141
142                }
143            };
144        });
145
146        function showMap() {
147            L.control.layers(baseLayers).addTo(map);
148            /*
149            L.Control.Button = L.Control.extend({
150                onAdd: function(map) {
151                    let button = L.DomUtil.create('button');
152                    
153                    button.id = 'ask-add-location';
154                    button.innerHTML = '<img src="' + ownIconUrl + '">';
155    
156                    onClick = function(event) {
157                        askAddOwnPosition();
158                    };
159    
160                    L.DomEvent.addListener(button, 'click', onClick, this);
161                    
162                    return button;
163                }
164            });
165        
166            L.control.button = function(opts) {
167                return new L.Control.Button(opts);
168            }
169            
170            L.control.button({ position: 'topright' }).addTo(map);
171            */
172            $('.resource-point').each(function (index) {
173
174                let resourceData = $(this).data('resourceData'),
175                    resourcePoint,
176                    marker,
177                    markerIconUrl,
178                    markerIcon,
179                    itemSelector,
180                    popUp = '';
181
182                if (!resourceData.lat || !resourceData.lon) {
183                    return;
184                }
185
186                zIndexOffset++;
187
188                resourcesData[resourceData.id] = resourceData;
189                resourcePoint = [resourceData.lat, resourceData.lon];
190                popUp = $('#' + resourceData.id).html();
191
192                bounds.push(resourcePoint);
193
194                marker = L.marker(resourcePoint, {
195                    riseOnHover: true
196                });
197
198                markerIconUrl = resourceData.iconUrl ? resourceData.iconUrl : defaultIconUrl;
199                markerIcon = new LeafIcon({
200                    iconUrl: markerIconUrl
201                });
202                marker.setIcon(markerIcon);
203                marker.bindPopup(popUp);
204                marker.on('click', function (e) {
205                    if (lastHoverId > 0) {
206                        markers[lastHoverId].setIcon(markerIcon);
207                    }
208
209                    this.openPopup();
210                    zIndexOffset++;
211                    $(itemInMapSel).css('backgroundColor', '');
212                    e.target.setZIndexOffset(zIndexOffset);
213                    // e.target.setIcon(hoverIcon);
214                    lastHoverId = resourceData.id;
215                });
216
217                if (addCluster) {
218                    markersCluster.addLayer(marker);
219                } else {
220                    marker.addTo(map);
221                }
222
223                markers[resourceData.id] = marker;
224            });
225
226            setPolygons(-1);
227
228            if (resourcePolygons.length > 0) {
229                //L.polygon(resourcePolygons, {color: 'green'}).addTo(map);
230            }
231
232            map.fitBounds(bounds);
233        }
234
235
236        $('li' + itemInMapSel).hover(
237            function () {
238                let id = $(this).attr('id'),
239                    marker = markers[id];
240                20321
241                zIndexOffset++;
242                marker.setZIndexOffset(zIndexOffset);
243                marker.setIcon(hoverIcon);
244            }, function () {
245                let id = parseInt($(this).attr('id')),
246                    marker = markers[id];
247
248                marker.setIcon(defaultIcon);
249            }
250        );
251
252        $('body').on('click', '.mark-resource-map', function (e) {
253            zoomMap($(this));
254        });
255
256        $('body').on('click', '.bound-resource-map', function (e) {
257            boundMap($(this));
258        });
259
260        $('body').on('click', '.track-resource-map', function (e) {
261            trackMap($(this));
262
263        });
264
265        function zoomMap(el) {
266            
267            let id = el.data('id'),
268                lat = resourcesData[id].lat,
269                lon = resourcesData[id].lon;
270            
271            map.flyTo([lat, lon], 18);
272        }
273
274        function boundMap(el) {
275            let id = el.data('id');
276            setPolygons(id);
277
278            map.flyToBounds(resourcesData[id]);
279        }
280
281        function trackMap(el) {
282            let id = el.data('id'),
283                track = resourcesData[id].track,
284                trackJson = wktToGeojson(track.geom),
285                bounds = L.latLngBounds(
286                    L.latLng(track.bottom, track.left),
287                    L.latLng(track.top, track.right)
288                );
289
290            if (mapTrack) {
291                mapTrack.remove();
292            }
293
294            mapTrack = L.geoJSON(trackJson).addTo(map);
295            map.flyToBounds(bounds);
296        }
297
298        function wktToGeojson(wkt) {
299            return Terraformer.WKT.parse(wkt);
300        }
301
302        $('#ask-add-location').on('click', function () {
303            askAddOwnPosition();
304        });
305
306        function askAddOwnPosition() {
307            if (navigator.geolocation) {
308                navigator.geolocation.getCurrentPosition(addOwnPosition);
309            }
310        }
311
312        function addOwnPosition(position) {
313            let resourcePoint = [
314                position.coords.latitude,
315                position.coords.longitude
316            ];
317
318            if (!ownPositionAdded) {
319                marker = L.marker(resourcePoint, {
320                    riseOnHover: true
321                });
322                marker.setIcon(locationIcon);
323                marker.addTo(map);
324                ownPositionAdded = true;
325                // rewritegoogleDirLink(position.coords);
326            }
327
328            bounds.push(resourcePoint);
329            map.fitBounds(bounds);
330        }
331
332        function rewritegoogleDirLink(coords) {
333            let linkSel = '.how-to-get',
334                linkEl = $(linkSel),
335                href = linkEl.attr('href'),
336                newHref = href.replace("Current%20Location", "" + coords.latitude + "," + coords.longitude + "");
337            linkEl.attr('href', newHref);
338        }
339
340        document.querySelectorAll('ul.map-items-data>li').forEach(e => {
341            e.addEventListener('mouseover', function () {
342                let id = $(this).attr('id'),
343                    marker = markers[id];
344                20321
345                zIndexOffset++;
346                marker.setZIndexOffset(zIndexOffset);
347                marker.setIcon(hoverIcon);
348            })
349            e.addEventListener('mouseout', function () {
350                let id = parseInt($(this).attr('id')),
351                marker = markers[id];
352                def_icon = new LeafIcon({ iconUrl: defaultIconUrl }),
353                marker.setIcon(def_icon);
354            })
355        })
356
357        function setPolygons(id) {
358            $('.resource-polygon').each(function (index) {
359                let resourceData = $(this).data('resourceData'),
360                    latlngs = resourceData.latlngs,
361                    layer,
362                    popUp = '';
363
364                if (!resourceData.latlngs) {
365                    return;
366                }
367
368                zIndexOffset++;
369                
370                resourcePolygons.push(resourceData.latlngs);
371                resourcesData[resourceData.id] = resourceData.latlngs;
372                popUp = $('#' + resourceData.id).html();
373
374                if (latlngs.length > 0) {
375                    if ( id != -1 && resourceData.id == id) {
376                        layer = L.polygon(latlngs, { color: 'yellow' }).addTo(map);
377                    } else {
378                        layer = L.polygon(latlngs, { color: 'green' }).addTo(map);
379                    }
380                    
381                    layer.bindPopup(popUp);
382                }
383

384                latlngs.forEach(function (item, index) {
385                    bounds.push(item);
386                });
387            });
388        }
389
390    });
391
392
393})(jQuery, Drupal, drupalSettings);