</style><style id="wpr-lazyload-bg-exclusion"></style> <noscript> <style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-6ff69617-78d4-452b-83c4-cbe51bcd1e2f: url('https://lifering.org/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style> </noscript> <script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-6ff69617-78d4-452b-83c4-cbe51bcd1e2f: url('https:\/\/lifering.org\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"6ff69617-78d4-452b-83c4-cbe51bcd1e2f","url":"https:\/\/lifering.org\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head> <body> <div class='app-container'> <div class='map-wrapper'> <h2>Firebase Interactive US Map</h2> <p class='instructions'>Click anywhere on the map to drop a pin. It will save to the cloud instantly!</p> <div id='map'></div> </div> <div class='sidebar'> <h3 style='margin-top:0; font-size: 1rem;'>Saved Pins (Cloud Sync)</h3> <ul class='pin-list' id='pin-list'></ul> </div> </div> <script type="text/rocketlazyloadscript" data-minify="1" data-rocket-src='https://lifering.org/wp-content/cache/min/1/leaflet@1.9.4/dist/leaflet.js?ver=1779747676' data-rocket-defer defer></script> <script type="text/rocketlazyloadscript" data-rocket-type='module'> import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js'; import { getFirestore, collection, addDoc, onSnapshot } from 'https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js'; const firebaseConfig = { apiKey: 'AIzaSyC6B0YyMkRAq8OY45dL0weAzHinsmuB2M0', authDomain: 'test-map-39e85.firebaseapp.com', projectId: 'test-map-39e85', storageBucket: 'test-map-39e85.firebasestorage.app', messagingSenderId: '288212082954', appId: '1:288212082954:web:9a37d2cff5a52768101af3' }; const app = initializeApp(firebaseConfig); const db = getFirestore(app); const pinsCollection = collection(db, 'pins'); const map = L.map('map').setView([37.8, -96], 4); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '© OSM' }).addTo(map); const pinListEl = document.getElementById('pin-list'); let markersMap = {}; map.on('click', async function(e) { const lat = e.latlng.lat; const lng = e.latlng.lng; const note = prompt('Enter a label or note for this cloud pin:'); if (!note) return; try { await addDoc(pinsCollection, { label: note, latitude: lat, longitude: lng, createdAt: new Date() }); } catch (error) { console.error('Error saving to Firebase: ', error); } }); onSnapshot(pinsCollection, (snapshot) => { pinListEl.innerHTML = ''; Object.values(markersMap).forEach(marker => map.removeLayer(marker)); markersMap = {}; snapshot.forEach((doc) => { const data = doc.data(); const id = doc.id; const lat = data.latitude; const lng = data.longitude; const label = data.label; const marker = L.marker([lat, lng]).addTo(map); marker.bindPopup(`<strong>${label}</strong><br>Lat: ${lat.toFixed(4)}<br>Lng: ${lng.toFixed(4)}`); markersMap[id] = marker; const li = document.createElement('li'); li.className = 'pin-item'; li.innerHTML = `<strong>${label}</strong><small>${lat.toFixed(2)}, ${lng.toFixed(2)}</small>`; li.addEventListener('click', () => { map.setView([lat, lng], 7); marker.openPopup(); }); pinListEl.appendChild(li); }); }); </script> </body> </html>" width="100%" height="600px" style="border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);" allow="geolocation">
