Scribd
Upload
5 views2 pages

Untitled

The document is an HTML file that creates an interactive map using the Google Maps API. It displays markers for various countries, with sizes and colors based on the number of people and years associated with each country. The map initializes when the window loads, showing the specified countries and their respective data points.

Uploaded by

nvndyqqjss
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
5 views2 pages

Untitled

The document is an HTML file that creates an interactive map using the Google Maps API. It displays markers for various countries, with sizes and colors based on the number of people and years associated with each country. The map initializes when the window loads, showing the specified countries and their respective data points.

Uploaded by

nvndyqqjss
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html>
<head>
<title>Integration Map</title>
<script src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyCqHIwm5Ut6Il7aGU15da0Eg8Ef0ebXjSY"></script>
<style>
#map {
height: 100vh;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const data = [
{ country: "italy", coords: [41.8719, 12.5674], people: 3, years: 8 },
{ country: "germany", coords: [51.1657, 10.4515], people: 1, years: 5 },
{ country: "england", coords: [52.3555, -1.1743], people: 4, years: 8 },
{ country: "india", coords: [20.5937, 78.9629], people: 2, years: 8 },
{ country: "switzerland", coords: [46.8182, 8.2275], people: 1, years: 0.5 },
{ country: "spain", coords: [40.4167, -3.7033], people: 2, years: 7.5 },
{ country: "denmark", coords: [56.2639, 9.5018], people: 13, years: 8 },
{ country: "indonesia", coords: [37.9838, 23.7275], people: 1, years: 4 },
{ country: "greece", coords: [37.9838, 23.7275], people: 1, years: 5 },
{ country: "pakistan", coords: [33.6995, 73.0363], people: 2, years: 8 },
{ country: "latvia", coords: [56.9677, 24.1056], people: 1, years: 3 },
{ country: "france", coords: [48.8575, 2.3514], people: 1, years: 3 },
{ country: "poland", coords: [52.2297, 21.0122], people: 2, years: 6 },
{ country: "finland", coords: [61.9241, 25.7482], people: 1, years: 8 },
{ country: "ukraine", coords: [48.3794, 31.1656], people: 1, years: 8 },
{ country: "mexico", coords: [23.6345, -102.5528], people: 1, years: 8 },
{ country: "lithuania", coords: [55.1694, 23.8813], people: 1, years: 8 },
{ country: "canada", coords: [56.1304, -106.3468], people: 1, years: 8 },
{ country: "north korea", coords: [40.3399, 127.5101], people: 1, years: 8 },
{ country: "syria", coords: [34.8021, 38.9968], people: 1, years: 8 },
{ country: "panama", coords: [8.5380, -80.7821], people: 1, years: 8 },
{ country: "montenegro", coords: [42.7087, 19.3744], people: 1, years: 0.5 }
];

function normalizeYears(years) {
if (typeof years !== 'number') return 0.5;
if (years >= 8) return 1;
return years / 8;
}

function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 2,
center: { lat: 30, lng: 10 },
});

data.forEach(entry => {
const size = 10 + entry.people * 5; // marker size
const lightness = 90 - normalizeYears(entry.years) * 70; // 90 (light) to 20
(dark)

const marker = new google.maps.Marker({


position: { lat: entry.coords[0], lng: entry.coords[1] },
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: size,
fillColor: `hsl(210, 100%, ${lightness}%)`,
fillOpacity: 1,
strokeWeight: 0,
},
title: `${entry.country} — ${entry.people} people`,
});
});
}

window.onload = initMap;
</script>
</body>
</html>

You might also like