https://www.dimosbyrona.gr/wp-content/themes/dimos-byrona-v4/assets/js/front-page/map.js

1document.addEventListener('DOMContentLoaded', () => {
2  const map = L.map('map-container', {
3    center: [mapScript.centerLat, mapScript.centerLng],
4    zoom: mapScript.zoomLevel,
5    zoomControl: false,
6    scrollWheelZoom: false,
7  });
8
9  new L.Control.Zoom({ position: 'bottomright' }).addTo(map);
10
11  L.tileLayer(`https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`, {
12    attribution:
13      'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
14    minZoom: mapScript.minZoomLevel,
15    maxZoom: mapScript.maxZoomLevel,
16  }).addTo(map);
17
18  const markers = [];
19  const mapPoints = mapScript.mapPoints;
20
21  for (const point of mapPoints) {
22    const category = point.category.slug;
23    const pinColor = point.category.pin_color;
24    const iconImage = point.category.icon_image;
25    const useIconImage = point.category.use_icon_image;
26
27    let markerIcon;
28
29    // Check if image icon or custom marker(doughnut)
30    if (useIconImage && iconImage) {
31      markerIcon = L.icon({
32        iconUrl: iconImage,
33        iconSize: [25, 25],
34      });
35    } else {
36      markerIcon = L.divIcon({
37        className: 'custom-marker',
38        html: `<div class="doughnut d-flex justify-content-center align-items-center" style="border-color: ${pinColor};"></div>`,
39        iconSize: [20, 20],
40      });
41    }
42
43    const marker = L.marker([point.lat, point.lng], {
44      icon: markerIcon,
45      markerId: category,
46    }).addTo(map);
47
48    if (point.permalink) {
49      marker.bindPopup(
50        `<a href="${point.permalink}" target="_blank">${point.title}</a>`,
51      );
52    }
53
54    markers.push(marker);
55  }
56
57  const mapFiltersWrapper = document.querySelector('.map-filters-wrapper');
58  const filtersToggler = document.querySelector('.filters-toggler');
59
60  filtersToggler?.addEventListener('click', () => {
61    mapFiltersWrapper.classList.toggle('open');
62  });
63
64  const filters = document.querySelectorAll(
65    '.map-filters input[type="checkbox"]',
66  );
67  const toggleAllFilters = document.querySelector('.map-filters #all-points');
68
69  for (const filter of filters) {
70    filter.addEventListener('change', (e) => {
71      markers.forEach((marker) => {
72        if (marker.options.markerId === e.target.id) {
73          e.target.checked ? map.addLayer(marker) : map.removeLayer(marker);
74        }
75
76        if (e.target.id === 'all-points') {
77          e.target.checked ? map.addLayer(marker) : map.removeLayer(marker);
78        }
79      });
80    });
81  }
82
83  if (toggleAllFilters) {
84    toggleAllFilters.addEventListener('change', (e) => {
85      filters.forEach((filter) => {
86        filter.checked = e.target.checked;
87      });
88    });
89  }
90});