https://interreg-euro-med.eu/wp-content/themes/divi-child/js/map.js?ver=1.0.0

1jQuery(document).ready(()=>{
2    const $interregMap = $(".interreg-map");
3    if($interregMap.length>0){
4        $.ajax({
5            url: apiUrl+"interreg/regions-geojson",
6            method: "get",
7            success: function (data) {
8                $interregMap.each((i,$el) => {
9                    interregMaps($el,data.locations, data.programs);
10                })
11            }
12        });
13    }
14})
15
16const interregMaps = (el,locations, programs) => {
17    const me = {};
18    me.el = el;
19    me.geojson = JSON.parse(JSON.stringify(locations));
20    me.programs = JSON.parse(JSON.stringify(programs));
21    me.container = el.closest(".interreg-map-container");
22    me.overlay = me.container.getElementsByClassName("interreg-map-overlay")[0];
23    me.image = me.container.getElementsByClassName("interreg-map-overlay-image")[0];
24    me.description = me.container.getElementsByClassName("interreg-map-overlay-description")[0];
25    me.title = me.container.getElementsByClassName("interreg-map-overlay-title")[0];
26    me.link = me.container.getElementsByClassName("interreg-map-overlay-link")[0];
27    for(let i in me.programs){
28        let program = me.programs[i];
29        if(program.locations){
30            program.locations = program.locations.map((l)=>l.slug);
31        } else {
32            program.locations = [];
33        }
34    }
35    me.currentProgram = null;
36    me.country = me.el.getAttribute("data-country");
37    if(me.country){
38        me.programs = me.programs.filter((p)=>p.locations.find((l)=>l.includes(me.country)));
39    }
40
41    me.countries = [
42        {Name: "France", Lat: 46.227638, Lng : 2.213749},
43        {Name: "Portugal", Lat: 39.399872, Lng : -8.224454},
44        {Name: "Spain", Lat: 40.463667, Lng : -3.74922},
45        {Name: "Italy", Lat: 41.87194, Lng : 12.56738},
46        {Name: "Slovenia", Lat:46.151241, Lng : 14.995463},
47        {Name: "Croatia", Lat:45.1, Lng : 15.2},
48        {Name: "Bosnia-Herzegovina", Lat:43.915886, Lng : 17.679076},
49        {Name: "Montenegro", Lat:42.708678, Lng : 19.37439},
50        {Name: "Albania", Lat:41.153332, Lng : 20.168331},
51        {Name: "North Macedonia", Lat:41.608635, Lng : 21.745275},
52        {Name: "Bulgaria", Lat:42.733883, Lng : 25.48583},
53        {Name: "Greece", Lat:39.074208, Lng : 21.824312},
54        {Name: "Malta", Lat: 35.937496, Lng : 14.375416},
55        {Name: "Cyprus", Lat: 35.126413, Lng : 	33.429859},
56    ]
57
58    me.init = () => {
59        me.map = L.map(me.el.id, {
60            minZoom: me.el.getAttribute("data-minzoom")?? 5,
61            maxZoom: me.el.getAttribute("data-maxzoom")?? 15,
62            zoomControl: false,
63        }).setView([37.8, -96], 4);
64
65        const key = 'XjwperSATaqaBO6Ai7G9';
66        const gl = L.maplibreGL({
67            attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e",
68            style: `https://api.maptiler.com/maps/10f4e3d1-6be3-4b0d-b89b-697d8a97b6b5/style.json?key=${key}`
69        }).addTo(me.map);
70
71        L.control.zoom({
72            position: 'bottomleft'
73        }).addTo(me.map);
74
75        me.layerControl = L.control.layers(null,null,{collapsed:false}).addTo(me.map);
76
77        me.programs.forEach((p)=>{
78            me.layerControl.addBaseLayer(L.layerGroup(), p.name);
79        });
80
81        me.defaultStyle = {
82            color: "#186f7a",
83            weight:1,
84            opacity:1,
85            fillColor: "#186f7a",
86            fillOpacity: 0.8
87        }
88
89        me.features = L.geoJson(me.geojson,{
90            onEachFeature: me.onEachFeature,
91            style: me.defaultStyle
92        }).addTo(me.map);
93
94        if(me.country){
95            const bounds = []
96            for (let f in me.features._layers) {
97                const layer = me.features._layers[f];
98                if (layer.feature.properties.Slug?.includes(me.country)) {
99                    bounds.push(layer);
100                }
101                if(bounds.length){

102                    me.map.fitBounds((L.featureGroup(bounds)).getBounds());
103                }
104            }
105        } else {
106            me.map.fitBounds(me.features.getBounds());
107        }
108
109        for(const country of me.countries){
110            const label = L.marker([country.Lat, country.Lng], {
111                icon: L.divIcon({
112                    html: '',
113                    iconSize: [0, 0],
114
115                })
116            }).addTo(me.map);
117            label.bindTooltip(
118                country.Name,
119                {
120                    permanent:true,
121                    direction:'center',
122                    className: 'countryLabel'
123                }
124            );
125        }
126
127        me.map.on('baselayerchange', me.onBaseLayerChange);
128    }
129
130    me.onFeatureClicked = (e) => {
131        if(me.currentProgram){
132            if(me.currentProgram.locations.find((pl) => e.target.feature.properties.Slug.includes(pl))){
133                if(me.currentProgram.url?.length>0){
134                    window.open(me.currentProgram.url);
135                }
136            }
137        }
138    }
139
140    me.onEachFeature = (feature, layer) => {
141        layer.on({
142            click: me.onFeatureClicked,
143            mouseover: me.highlightFeature,
144            mouseout: me.resetHighlight,
145        });
146    }
147
148    me.onBaseLayerChange = (e) => {
149        me.currentProgram = me.programs.find((p) => p.name === e.name);
150        for (let f in me.features._layers) {
151            const layer = me.features._layers[f];
152            layer.setStyle(me.defaultStyle);
153            layer.unbindTooltip();
154            if(me.currentProgram.locations.find((pl) => layer.feature.properties.Slug.includes(pl))){
155                layer.setStyle({fillColor: me.currentProgram.color,color: me.currentProgram.color});
156                layer.bindTooltip(
157                    '<p>'+me.currentProgram.name+'</p>',
158                    {
159                        direction:'center',
160                        className: 'programLabel'
161                    }
162                );
163            }
164        }
165        if(me.currentProgram){
166            me.overlay.style.display = 'block';
167            if(me.currentProgram.image){
168                me.image.style.display = 'block';
169                me.image.setAttribute("src","https://wsrv.nl/?url="+me.currentProgram.image+"&w=300&h=200&fit=cover");
170            } else {
171                me.image.style.display = 'none';
172            }
173
174            if(me.currentProgram.name){
175                me.title.style.display = 'block';
176                me.title.innerHTML = me.currentProgram.name;
177            } else {
178                me.title.style.display = 'none';
179            }
180
181            if(me.currentProgram.description){
182                me.description.style.display = 'block';
183                me.description.innerHTML = me.currentProgram.description;
184            } else {
185                me.description.style.display = 'none';
186            }
187
188            if(me.currentProgram.url){
189                me.link.style.display = 'flex';
190                me.link.setAttribute('href',me.currentProgram.url);
191            } else {
192                me.link.style.display = 'none';
193            }
194            return;
195        }
196    }
197
198    me.highlightFeature = (e) => {
199        for (let f in me.features._layers) {
200            const layer = me.features._layers[f];
201            if(!me.currentProgram){
202                if(layer.feature.properties?.Code === e.target?.feature?.properties?.Code) {
203                    layer.setStyle({
204                        color: '#f2a900',
205                        fillColor:'#f2a900'
206                    });
207                }
208            } else if(me.currentProgram.locations.find((pl) => layer.feature.properties.Slug.includes(pl))){
209                layer.setStyle({
210                    color: '#f2a900',
211                    fillColor:'#f2a900'
212                });
213            }
214        }
215    }
216
217    me.resetHighlight = (e) => {
218         for (let f in me.features._layers) {
219             const layer = me.features._layers[f];
220             if(!me.currentProgram){
221                 if(layer.feature.properties?.Code === e.target?.feature?.properties?.Code) {
222                     layer.setStyle(me.defaultStyle);
223                 }
224             } else if(me.currentProgram.locations.find((pl) => layer.feature.properties.Slug.includes(pl))){
225                 layer.setStyle({fillColor: me.currentProgram.color,color: me.currentProgram.color});
226             }
227         }
228    }
229

230    me.init();
231    return me;
232}