https://www.santantonidevilamajor.cat/front/view/js/maps.js

1(function () {
2    'use strict';
3
4    var lastLayer = null;
5
6    function getDefaultLayer() {
7        var name = (window.mapsConfig && window.mapsConfig.layerType) ? window.mapsConfig.layerType : 'OpenStreetMap_Mapnik';
8        return window[name];
9    }
10
11    function setupMapResize(mapp) {
12        window.addEventListener('resize', function () { mapp.invalidateSize(); });
13        setTimeout(function () { mapp.invalidateSize(); }, 500);
14        setTimeout(function () { mapp.invalidateSize(); }, 2000);
15    }
16
17    function getMarkerText(text) {
18        var markerText = (text === null || typeof text === 'undefined') ? '' : String(text);
19        return markerText.trim() || 'Punt del mapa';
20    }
21
22    function getMarkerOptions(text) {
23        var markerText = getMarkerText(text);
24        return { title: markerText, alt: markerText };
25    }
26
27    window.loadMapLocation = function (id, lat, lon, title) {
28        title = getMarkerText(title);
29        lat = parseFloat(lat);
30        lon = parseFloat(lon);
31        // Sense coordenades vàlides no es pot crear el mapa (evita petar Leaflet).
32        if (isNaN(lat) || isNaN(lon)) { return null; }
33        var mapp = L.map('map_canvas' + id, { center: [lat, lon], zoom: 14, loadingControl: true });
34        var layer = (lastLayer !== null) ? cloneLayer(lastLayer) : getDefaultLayer();
35        lastLayer = layer.addTo(mapp);
36        L.marker([lat, lon], getMarkerOptions(title)).addTo(mapp).bindTooltip(title);
37        setupMapResize(mapp);
38        return mapp;
39    };
40
41    window.loadMapArea = function (id, area, lat, lon, title) {
42        title = getMarkerText(title);
43        var areaStrokeColor = getComputedStyle(document.documentElement).getPropertyValue('--area-stroke-color').trim() || '#2c7bb6';
44        var areaStrokeWidth = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--area-stroke-width').trim()) || 2;
45        var areaFillColor   = getComputedStyle(document.documentElement).getPropertyValue('--area-fill-color').trim()   || '#abd9e9';
46        var areaFillOpacity = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--area-fill-opacity').trim()) || 0.4;
47
48        var center = (lat && lon) ? [lat, lon] : [0, 0];
49        var mapp = L.map('map_canvas' + id, { center: center, zoom: 14, loadingControl: true });
50        var layer = (lastLayer !== null) ? cloneLayer(lastLayer) : getDefaultLayer();
51        lastLayer = layer.addTo(mapp);
52
53        var layers = [];
54
55        if (area) {
56            try {
57                var geoJson = JSON.parse(area);
58                var polygon = L.geoJSON(geoJson, {
59                    style: { color: areaStrokeColor, weight: areaStrokeWidth, fillColor: areaFillColor, fillOpacity: areaFillOpacity }
60                }).addTo(mapp);
61                layers.push(polygon);
62            } catch (e) {}
63        }
64
65        if (lat && lon) {
66            layers.push(L.marker([lat, lon], getMarkerOptions(title)).addTo(mapp).bindTooltip(title));
67        }
68
69        if (layers.length > 0) {
70            mapp.fitBounds(new L.featureGroup(layers).getBounds());
71        }
72
73        setupMapResize(mapp);
74        return mapp;
75    };
76
77    function initLocationMaps() {
78        var mapDivs = document.querySelectorAll('.js-location-map');
79        if (!mapDivs.length) return;
80
81        var titleEl = document.getElementById('title0');
82        var title = titleEl ? (titleEl.getAttribute('data-attribute') || '') : '';
83
84        mapDivs.forEach(function (el) {
85            var id   = el.getAttribute('data-id');
86            var lat  = el.getAttribute('data-lat') ? parseFloat(el.getAttribute('data-lat')) : null;
87            var lon  = el.getAttribute('data-lon') ? parseFloat(el.getAttribute('data-lon')) : null;
88            var area = el.getAttribute('data-area') || null;
89
90            window.loadMapArea(id, area, lat, lon, title);
91
92            if (lat && lon) {
93                var prettyLink = document.querySelector('a[rel="prettyMap' + id + '"]');
94                if (prettyLink) {
95                    var prettyMap = null;
96                    prettyLink.addEventListener('click', function (e) {
97                        e.preventDefault();
98                        if (prettyMap === null) {
99                            prettyMap = window.loadMapLocation('_pretty' + id, lat, lon, title);
100                        }
101                        $('#mapModal').modal('show');
102                        $('#closeModalMap').one('click', function () { $('#mapModal').modal('hide'); });
103                    });
104                }
105            }
106        });
107    }
108
109    function initCarrererMap() {
110        var el = document.querySelector('.js-carrerer-map');
111        if (!el) return;
112
113        var lat         = parseFloat(el.getAttribute('data-lat'));
114        var lon         = parseFloat(el.getAttribute('data-lon'));
115        var id          = el.getAttribute('data-id');
116        var filter      = {};
117        try { filter = JSON.parse(el.getAttribute('data-filter') || '{}'); } catch (e) {}
118        var loadingText = el.getAttribute('data-loading-text') || 'Carregant marcadors...';
119
120        // Sense coordenades vàlides Leaflet peta ("Invalid LatLng"): centre per defecte.
121        if (isNaN(lat) || isNaN(lon)) {
122            lat = 41.39;
123            lon = 2.17;
124        }
125
126        var map = L.map('map_canvas', {
127            center: [lat, lon],
128            zoom: 14,
129            zoomControl: false,
130            layers: [getDefaultLayer()],
131            loadingControl: true
132        });
133        setupMapResize(map);
134        L.control.zoom({ zoomInTitle: 'Apropa', zoomOutTitle: 'Allunya' }).addTo(map);
135
136        FreezeUI({ selector: '#map_canvas', text: loadingText });
137        $.ajax({
138            url: '/carrererMarks',
139            type: 'POST',
140            dataType: 'json',
141            data: { id: id, filter: filter },
142            success: function (result) {
143                for (var mark in result) {
144                    var markLat = parseFloat(result[mark].lat);
145                    var markLon = parseFloat(result[mark].lon);
146                    if (isNaN(markLat) || isNaN(markLon)) { continue; }
147                    var markerText = getMarkerText(result[mark].title);
148                    var markToAdd = L.marker([markLat, markLon], getMarkerOptions(markerText)).addTo(map);
149                    markToAdd.bindPopup('<div><b>' + result[mark].title + '</b><br>' + result[mark].address + '<br>' + result[mark].link + '</div>')
150                        .on('focus', function (e) { e.target.openPopup(); })
151                        .addEventListener('keyup', function (e) { e.target.openPopup(); });
152                    markToAdd.bindTooltip(markerText);
153                }
154                UnFreezeUI();
155            },
156            error: function () {
157                UnFreezeUI();
158            }
159        });
160    }
161
162    document.addEventListener('DOMContentLoaded', function () {
163        initLocationMaps();
164        initCarrererMap();
165    });
166})();