SamsungGalaxyPlayer/display-airports.html

## display-airports.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Airports Map</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map {
            height: 100vh;
            width: 100%;
        }
        .circle {
            stroke: #000;
            stroke-width: 0.5;
            fill-opacity: 0.7;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        // Create a map centered on the United States
        var map = L.map('map').setView([37.8, -96], 4);

        // Add OpenStreetMap tiles
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
        }).addTo(map);

        // Function to get circle color based on the number of passengers
        function getColor(passengers) {
            return passengers > 100000000 ? '#800026' :
                   passengers > 50000000  ? '#BD0026' :
                   passengers > 20000000  ? '#E31A1C' :
                   passengers > 10000000  ? '#FC4E2A' :
                   passengers > 5000000   ? '#FD8D3C' :
                   passengers > 1000000   ? '#FEB24C' :
                                            '#FED976';
        }

        // Fetch airport data from Wikidata
        fetch('https://query.wikidata.org/sparql?query=' + encodeURIComponent(`
            SELECT ?airport ?airportLabel ?passengers ?location
            WHERE {
              ?airport wdt:P3872 ?passengers;
                      wdt:P625 ?location;
                      wdt:P31 wd:Q1248784.  # instance of airport
              SERVICE wikibase:label { bd:serviceParam wikibase:language "en". }
            }
            ORDER BY DESC(?passengers)
            LIMIT 10000
        `) + '&format=json')
            .then(response => response.json())
            .then(data => {
                data.results.bindings.forEach(airport => {
                    const name = airport.airportLabel.value;
                    const passengers = parseInt(airport.passengers.value, 10);
                    const location = airport.location.value.slice(6, -1).split(' ');
                    const lat = parseFloat(location[1]);
                    const lng = parseFloat(location[0]);

                    // Add circle markers to the map
                    L.circleMarker([lat, lng], {
                        radius: Math.sqrt(passengers) / 500 + 3,  // Scale radius
                        fillColor: getColor(passengers),
                        color: '#000',
                        weight: 1,
                        opacity: 1,
                        fillOpacity: 0.7,
                        className: 'circle'
                    }).addTo(map)
                      .bindPopup(`${name}: ${passengers.toLocaleString()} passengers`);
                });
            })
            .catch(error => console.error('Error fetching airport data:', error));
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Airports Map</title>
	<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
	<style>
	#map {
	height: 100vh;
	width: 100%;
	}
	.circle {
	stroke: #000;
	stroke-width: 0.5;
	fill-opacity: 0.7;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>

	<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
	<script>
	// Create a map centered on the United States
	var map = L.map('map').setView([37.8, -96], 4);

	// Add OpenStreetMap tiles
	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 18,
	}).addTo(map);

	// Function to get circle color based on the number of passengers
	function getColor(passengers) {
	return passengers > 100000000 ? '#800026' :
	passengers > 50000000 ? '#BD0026' :
	passengers > 20000000 ? '#E31A1C' :
	passengers > 10000000 ? '#FC4E2A' :
	passengers > 5000000 ? '#FD8D3C' :
	passengers > 1000000 ? '#FEB24C' :
	'#FED976';
	}

	// Fetch airport data from Wikidata
	fetch('https://query.wikidata.org/sparql?query=' + encodeURIComponent(`
	SELECT ?airport ?airportLabel ?passengers ?location
	WHERE {
	?airport wdt:P3872 ?passengers;
	wdt:P625 ?location;
	wdt:P31 wd:Q1248784. # instance of airport
	SERVICE wikibase:label { bd:serviceParam wikibase:language "en". }
	}
	ORDER BY DESC(?passengers)
	LIMIT 10000
	`) + '&format=json')
	.then(response => response.json())
	.then(data => {
	data.results.bindings.forEach(airport => {
	const name = airport.airportLabel.value;
	const passengers = parseInt(airport.passengers.value, 10);
	const location = airport.location.value.slice(6, -1).split(' ');
	const lat = parseFloat(location[1]);
	const lng = parseFloat(location[0]);

	// Add circle markers to the map
	L.circleMarker([lat, lng], {
	radius: Math.sqrt(passengers) / 500 + 3, // Scale radius
	fillColor: getColor(passengers),
	color: '#000',
	weight: 1,
	opacity: 1,
	fillOpacity: 0.7,
	className: 'circle'
	}).addTo(map)
	.bindPopup(`${name}: ${passengers.toLocaleString()} passengers`);
	});
	})
	.catch(error => console.error('Error fetching airport data:', error));
	</script>
	</body>
	</html>