@@ -90,93 +90,4 @@ page-layout: full
90
90
:::
91
91
92
92
93
- :::
94
-
95
- ## Group Locations
96
-
97
- ``` {=html}
98
- <!-- Leaflet CSS and JS from CDN -->
99
- <link rel="stylesheet" href="https://unpkg.com/[email protected] /dist/leaflet.css"
100
- integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
101
- crossorigin="" />
102
-
103
- <script src="https://unpkg.com/[email protected] /dist/leaflet.js"
104
- integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
105
- crossorigin=""></script>
106
-
107
- <!-- Map container with enhanced styling -->
108
- <div id="people-map" style="height: 400px; width: 100%; margin: 20px 0; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); border: 1px solid #ddd;"></div>
109
-
110
- <script>
111
- document.addEventListener('DOMContentLoaded', function() {
112
- // Check if Leaflet is loaded
113
- if (typeof L !== 'undefined') {
114
- try {
115
- // Initialize the map centered on Austin, TX (UT location)
116
- var map = L.map('people-map').setView([30.2849, -97.7341], 10);
117
-
118
- // Add tiles - trying modern working alternatives to deprecated Stamen Fastly
119
- // Option 1: Try Stamen Watercolor via current provider
120
- var tileLayer;
121
-
122
- // Try multiple providers in order of preference
123
- try {
124
- // First try: Stamen Watercolor via Stadia Maps (may require API key)
125
- tileLayer = L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg', {
126
- attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.',
127
- minZoom: 1,
128
- maxZoom: 16
129
- });
130
-
131
- // Handle tile loading errors with fallbacks
132
- var fallbackTriggered = false;
133
- tileLayer.on('tileerror', function(e) {
134
- if (!fallbackTriggered) {
135
- fallbackTriggered = true;
136
- console.warn('Stamen tiles unavailable, using alternative watercolor-style tiles');
137
- map.removeLayer(tileLayer);
138
-
139
- // Fallback: Use CartoDB Positron (clean alternative)
140
- L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
141
- attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
142
- subdomains: 'abcd',
143
- maxZoom: 20
144
- }).addTo(map);
145
- }
146
- });
147
-
148
- tileLayer.addTo(map);
149
-
150
- } catch (error) {
151
- console.warn('Error setting up Stamen tiles, using standard tiles:', error);
152
- // Final fallback to reliable OpenStreetMap
153
- L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
154
- attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
155
- maxZoom: 19
156
- }).addTo(map);
157
- }
158
-
159
- // Add a marker for the University of Texas at Austin
160
- var marker = L.marker([30.2849, -97.7341]).addTo(map);
161
- marker.bindPopup("<strong>McPherson Group</strong><br/>University of Texas at Austin<br/>Austin, TX");
162
-
163
- console.log('Map initialized successfully');
164
- } catch (error) {
165
- console.error('Error initializing map:', error);
166
- // Fallback: show a simple text message
167
- document.getElementById('people-map').innerHTML =
168
- '<div style="display: flex; align-items: center; justify-content: center; height: 100%; background-color: #f8f9fa; color: #6c757d; text-align: center; padding: 20px;">' +
169
- '<div><strong>McPherson Group</strong><br/>University of Texas at Austin<br/>Austin, TX<br/><em>Interactive map loading...</em></div>' +
170
- '</div>';
171
- }
172
- } else {
173
- console.error('Leaflet library not loaded');
174
- // Fallback: show location info
175
- document.getElementById('people-map').innerHTML =
176
- '<div style="display: flex; align-items: center; justify-content: center; height: 100%; background-color: #f8f9fa; color: #6c757d; text-align: center; padding: 20px;">' +
177
- '<div><strong>McPherson Group</strong><br/>University of Texas at Austin<br/>Austin, TX<br/><em>Map functionality requires network access</em></div>' +
178
- '</div>';
179
- }
180
- });
181
- </script>
182
- ```
93
+ :::
0 commit comments