https://epe-lorraine.fr/wp-content/themes/bc_wp_epe/includes/blocks/map/block-map.js?ver=7.1.3

1function displayMarkers(carteData, markerName, sourceName, layerName, clusterName, clusterCountName, coordinates) {
2    
3    map.addSource(sourceName, {
4        'type': 'geojson',
5        'data': carteData,
6        'cluster': true,
7        'clusterMaxZoom': 10,
8        'clusterRadius': 50
9    });
10
11    map.addLayer({
12        id: layerName,
13        type: 'symbol',
14        source: sourceName,
15        filter: ['!', ['has', 'point_count']],
16        layout: {
17			'icon-image': markerName,
18			'icon-size': .18,
19            'icon-allow-overlap': true
20		}
21    });
22
23    map.addLayer({
24		id: clusterName,
25		type: 'circle',
26		source: sourceName,
27		filter: ['has', 'point_count'],
28		paint: {
29			'circle-color': 'hsl(31, 89%, 56%)',
30			'circle-radius': 25
31        }
32	});
33
34    map.addLayer({
35		id: clusterCountName,
36		type: 'symbol',
37		source: sourceName,
38		filter: ['has', 'point_count'],
39		layout: {
40			'text-field': '{point_count_abbreviated}',
41			'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
42			'text-size': 12
43		},
44        paint: {
45            'text-color': '#FFF'
46        }
47	});
48
49    // Center on markers
50    var bounds = new mapboxgl.LngLatBounds();
51
52    carteData.features.forEach(function(feature) {
53        bounds.extend(feature.geometry.coordinates);
54    });
55
56    map.resize();
57    map.fitBounds(bounds, { padding: 50 });
58
59    // Events
60    const popup = new mapboxgl.Popup({
61        closeButton: false,
62        closeOnClick: false,
63        className: "popup"
64    });
65
66    map.on('mouseenter', layerName, (e) => {
67        map.getCanvas().style.cursor = 'pointer';
68         
69        const coordinates = e.features[0].geometry.coordinates.slice();
70        const description = e.features[0].properties.description;
71
72        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
73            coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
74        }
75         
76        popup.setLngLat(coordinates).setHTML(description).addTo(map);
77
78        const closes = document.querySelectorAll('.close-popup');
79
80        if(closes) {
81            closes.forEach(close => {
82                close.addEventListener('click', () => {
83                    popup.remove();
84                });
85            });
86        }
87    });
88
89    map.on('mouseleave', layerName, () => {
90        map.getCanvas().style.cursor = '';
91    });
92
93    // Clusters
94    map.on('click', clusterName, (e) => {
95        const features = map.queryRenderedFeatures(e.point, {
96            layers: [clusterName]
97        });
98
99        const clusterId = features[0].properties.cluster_id;
100
101        map.getSource(sourceName).getClusterExpansionZoom(
102            clusterId,
103            (err, zoom) => {
104                if (err) return;
105            
106                map.easeTo({
107                    center: features[0].geometry.coordinates,
108                    zoom: zoom
109                });
110            }
111        );
112    });
113
114}