https://www.dccc.edu/wp-content/themes/wp-dccc/blocks-gutenberg/dccc-map-with-campuses/logic.js?ver=1790257536

1document.addEventListener('DOMContentLoaded', function () {
2    const maps = document.querySelectorAll('.dccc-map-with-campuses__map');
3
4    function waitForGoogleMaps(callback) {
5        const interval = setInterval(() => {
6            if (window.google && window.google.maps && typeof window.google.maps.Map === 'function') {
7                clearInterval(interval);
8                callback();
9            }
10        }, 100);
11    }
12
13    function initializeOpenStreetMap(mapElement, mapZoom, campuses) {
14        const map = L.map(mapElement, {
15            center: [39.8283, -98.5795],
16            zoom: mapZoom,
17            layers: [
18                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
19                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
20                })
21            ]
22        });
23
24        const bounds = L.latLngBounds();
25        campuses.forEach(campus => {
26            const coordinates = campus.acf.address.gps_coordinates;
27            if (coordinates) {
28                const [lat, lng] = coordinates.split(',').map(Number);
29                const marker = L.marker([lat, lng]).addTo(map)
30                    .bindPopup(`
31                        <div>
32                            <img src="${campus.featured_image_url}" alt="${campus.title.rendered}" style="width:260px;height:auto;">
33                            <h4 style="font-family: 'Figtree', sans-serif;font-weight: 600;font-size: 14px;color: #0F1844;">${campus.title.rendered}</h4>
34                            <p style="display: flex;width: 80%;align-items: center;justify-content: space-between;flex-direction: row;gap: 10px;font-family: 'Figtree', sans-serif;">
35                                ${campus.acf.address.street}, ${campus.acf.address.city}, ${campus.acf.address.state} ${campus.acf.address.zip_code}
36                                ${campus.acf.phone ? `<br>${__('Phone:', 'dccc')} ${campus.acf.phone}` : ''}
37                                ${campus.acf.fax ? `<br>${__('Fax:', 'dccc')} ${campus.acf.fax}` : ''}
38                            </p>
39                        </div>
40                    `);
41                bounds.extend(marker.getLatLng());
42            }
43        });
44
45        if (campuses.length === 1) {

46            map.setView(bounds.getCenter(), mapZoom);
47        } else {
48            map.fitBounds(bounds);
49        }
50
51        
52    }
53
54    function onIntersection(entries, observer) {
55        entries.forEach(entry => {
56            if (entry.isIntersecting) {
57                const mapElement = entry.target;
58                const mapZoom = parseInt(mapElement.closest('.dccc-map-with-campuses').getAttribute('data-map-zoom'), 10);
59                const selectedCounty = mapElement.closest('.dccc-map-with-campuses').getAttribute('data-county');
60                const mapProvider = mapElement.closest('.dccc-map-with-campuses').getAttribute('data-map-provider');
61
62                fetch(`/wp-json/wp/v2/campus${selectedCounty ? `?county=${selectedCounty}` : ''}`)
63                    .then(response => response.json())
64                    .then(campuses => {
65                        const fetchFeaturedImages = campuses.map(campus => {
66                            if (campus.featured_media) {
67                                return fetch(`/wp-json/wp/v2/media/${campus.featured_media}`)
68                                    .then(response => response.json())
69                                    .then(media => {
70                                        campus.featured_image_url = media.source_url;
71                                    });
72                            }
73                            return Promise.resolve();
74                        });
75
76                        Promise.all(fetchFeaturedImages).then(() => {
77                            if (mapProvider === 'google') {
78                                waitForGoogleMaps(() => {
79                                    const map = new google.maps.Map(mapElement, {
80                                        zoom: mapZoom,
81                                        center: { lat: 39.8283, lng: -98.5795 }
82                                    });
83
84                                    const bounds = new google.maps.LatLngBounds();
85                                    let hasMarkers = false;
86
87                                    campuses.forEach(campus => {
88                                        const coordinates = campus.acf.address.gps_coordinates;
89                                        if (coordinates) {
90                                            const [lat, lng] = coordinates.split(',').map(Number);
91                                            const marker = new google.maps.Marker({
92                                                position: { lat, lng },
93                                                map: map,
94                                                title: campus.title.rendered,
95                                                icon: '/wp-content/themes/wp-dccc/img/map_pin.png'
96                                            });
97                                            bounds.extend(marker.getPosition());
98                                            hasMarkers = true;
99
100                                            const infoWindowContent = `
101                                                <div>
102                                                    <img src="${campus.featured_image_url}" alt="${campus.title.rendered}" style="width:260px;height:auto;">
103                                                    <h4 style="font-family: 'Figtree', sans-serif;font-weight: 600;font-size: 14px;color: #0F1844;">${campus.title.rendered}</h4>
104                                                    <p style="font-family: 'Figtree', sans-serif;">
105                                                        ${campus.acf.address.street}, ${campus.acf.address.city}, ${campus.acf.address.state} ${campus.acf.address.zip_code}
106                                                        ${campus.acf.phone ? `<br>${__('Phone:', 'dccc')} ${campus.acf.phone}` : ''}
107                                                        ${campus.acf.fax ? `<br>${__('Fax:', 'dccc')} ${campus.acf.fax}` : ''}
108                                                    </p>
109                                                </div>
110                                            `;
111                                            const infoWindow = new google.maps.InfoWindow({
112                                                content: infoWindowContent
113                                            });
114
115                                            marker.addListener('click', () => {
116                                                infoWindow.open(map, marker);
117                                            });
118                                        }
119                                    });
120
121                                    if (hasMarkers) {
122                                        if (campuses.length === 1) {
123                                            map.setCenter(bounds.getCenter());
124                                            map.setZoom(mapZoom);
125                                        } else {
126                                            map.fitBounds(bounds);
127                                        }
128                                    } else {
129                                        map.setCenter({ lat: 39.8283, lng: -98.5795 });
130                                        map.setZoom(mapZoom);
131                                    }
132                                });
133                            } else if (mapProvider === 'osm') {
134                                initializeOpenStreetMap(mapElement, mapZoom, campuses);
135                            }
136                        });
137                    });
138
139                observer.unobserve(mapElement);
140            }
141        });
142    }
143
144    const observer = new IntersectionObserver(onIntersection, { threshold: 0.1 });
145
146    maps.forEach(mapElement => {
147        observer.observe(mapElement);
148    });
149});