planemad · December 12, 2024 09:37
diff --git a/alumni-spreadsheet-map.html b/alumni-spreadsheet-map.html
 <!DOCTYPE html>
 <html>
 <head>
    <title>Map from Google Sheet Data</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />

    <!-- Leaflet JavaScript -->
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

    <!-- PapaParse for CSV parsing -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>

    <style>
        #map {
            width: 100%;
            height: 600px;
        }
    </style>
 </head>
 <body>

 <h2>Map from Google Sheet Data</h2>
 <div id="map"></div>

 <script>
    // Initialize the map and set its view to a starting point
    var map = L.map('map').setView([20, 0], 2); // Centered at [20, 0] with zoom level 2

    // Load and display tile layer on the map (OpenStreetMap)
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '©️ OpenStreetMap contributors'
    }).addTo(map);

    // URL of the CSV (Google Sheets published link)
    var sheetUrl = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSLO-GeSg__1ZYBNF8ZTMYgF5Z3h2B3kX9QoQ3SYJC7bUyx9fkk4nr2JRiayKcG6avANMUoVhJfnpqH/pub?output=csv';

    // Fetch and parse the CSV data
    Papa.parse(sheetUrl, {
        download: true,
        header: true,
        complete: function(results) {
            var data = results.data;

            // Loop through each row and place markers
            data.forEach(function(row) {
                var lat = parseFloat(row.latitude);   // replace with your actual latitude column name
                var lon = parseFloat(row.longitude);  // replace with your actual longitude column name
                var name = row.name || 'No Name';     // replace with the name or any other column you have
                
                if (!isNaN(lat) && !isNaN(lon)) {
                    L.marker([lat, lon]).addTo(map)
                        .bindPopup(name);  // Add a popup with the name
                }
            });
        }
    });
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Map from Google Sheet Data</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!-- Leaflet CSS -->
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />

	<!-- Leaflet JavaScript -->
	<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

	<!-- PapaParse for CSV parsing -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>

	<style>
	#map {
	width: 100%;
	height: 600px;
	}
	</style>
	</head>
	<body>

	<h2>Map from Google Sheet Data</h2>
	<div id="map"></div>

	<script>
	// Initialize the map and set its view to a starting point
	var map = L.map('map').setView([20, 0], 2); // Centered at [20, 0] with zoom level 2

	// Load and display tile layer on the map (OpenStreetMap)
	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '©️ OpenStreetMap contributors'
	}).addTo(map);

	// URL of the CSV (Google Sheets published link)
	var sheetUrl = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSLO-GeSg__1ZYBNF8ZTMYgF5Z3h2B3kX9QoQ3SYJC7bUyx9fkk4nr2JRiayKcG6avANMUoVhJfnpqH/pub?output=csv';

	// Fetch and parse the CSV data
	Papa.parse(sheetUrl, {
	download: true,
	header: true,
	complete: function(results) {
	var data = results.data;

	// Loop through each row and place markers
	data.forEach(function(row) {
	var lat = parseFloat(row.latitude); // replace with your actual latitude column name
	var lon = parseFloat(row.longitude); // replace with your actual longitude column name
	var name = row.name \|\| 'No Name'; // replace with the name or any other column you have

	if (!isNaN(lat) && !isNaN(lon)) {
	L.marker([lat, lon]).addTo(map)
	.bindPopup(name); // Add a popup with the name
	}
	});
	}
	});
	</script>

	</body>
	</html>