EncodeTheCode/map_coords_test.htm

## map_coords_test.htm
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Europe Map with Image Map</title>
    <style>
      img {z-index:0;position:absolute;max-width:100%;height:auto;}
      #svg-overlay{z-index:-0 !important;position:relative;}
      area {
          cursor: pointer;
      }

      /* Hover effect for the areas */
      area:hover {
          outline: 2px solid yellow;
      }


    </style>
</head>
<body>
    <h1>Map of Europe with Image Map</h1>
    <!-- Replace the src attribute with the provided image URL -->
    <img id="world-map" src="https://upload.wikimedia.org/wikipedia/commons/8/81/Europe_countries_map_2.png" usemap="#europe-map" alt="Map of Europe">

    <!-- SVG overlay for drawing lines -->
    <svg id="svg-overlay"></svg>

    <map name="europe-map" id="map-areas">
        <!-- No static <area> elements here -->
    </map>

    <script>
document.addEventListener('DOMContentLoaded', function() {
    const map = document.getElementById('world-map');
    const mapAreas = document.getElementById('map-areas');
    const svgOverlay = document.getElementById('svg-overlay');

    // Define the areas data with names and coordinates
    const areasData = [
        { name: "Portugal", coords: "70,240,90,230,80,220,60,230" },
        { name: "Spain", coords: "120,220,140,210,150,230,130,240" },
        { name: "France", coords: "180,190,200,200,220,180,200,170" },
        { name: "Monaco", coords: "240,190,250,200,260,190,250,180" },
        { name: "Italy", coords: "270,230,290,240,300,230,290,220" },
        { name: "Switzerland", coords: "260,170,280,160,290,180,270,180" },
        { name: "Germany", coords: "280,130,300,120,310,140,290,150" },
        { name: "Luxembourg", coords: "290,150,310,140,320,150,310,160" },
        { name: "Belgium", coords: "280,160,300,150,310,160,300,170" },
        { name: "Netherlands", coords: "300,140,320,130,330,140,320,150" },
        { name: "Austria", coords: "310,180,330,190,340,180,330,170" },
        { name: "Liechtenstein", coords: "320,180,330,170,340,180,330,190" },
        { name: "Slovenia", coords: "330,210,350,220,360,210,350,200" },
        { name: "Croatia", coords: "350,200,370,210,380,200,370,190" },
        { name: "Bosnia and Herzegovina", coords: "360,190,380,200,390,190,380,180" },
        { name: "Montenegro", coords: "380,190,390,200,400,190,390,180" },
        { name: "Albania", coords: "390,180,400,190,410,180,400,170" },
        { name: "North Macedonia", coords: "400,170,410,180,420,170,410,160" },
        { name: "Kosovo", coords: "410,160,420,170,430,160,420,150" },
        { name: "Serbia", coords: "390,160,400,170,410,160,400,150" },
        { name: "Hungary", coords: "330,160,350,150,360,170,340,180" },
        { name: "Slovakia", coords: "330,170,350,160,360,180,340,190" },
        { name: "Poland", coords: "310,120,330,110,340,130,320,140" },
        { name: "Czech Republic", coords: "300,140,320,130,330,150,310,160" },
        { name: "Estonia", coords: "390,50,410,60,420,50,410,40" },
        { name: "Latvia", coords: "370,60,390,70,400,60,390,50" },
        { name: "Lithuania", coords: "360,70,380,80,390,70,370,60" },
        { name: "Sweden", coords: "174,78,174,79,174,80,174,81,174,82,174,83,174,84,174,85,174,86,174,87,174,88,174,89,175,89,176,89,177,89,178,89,179,89,180,89,181,89,182,89,183,89,184,89,184,88,184,87,184,86,185,86,185,85,185,84,185,83,185,82,185,81,185,80,185,79,185,78,184,78,183,78,182,78,181,78,180,78,179,78,178,78" },
        { name: "Finland", coords: "170,20,190,30,200,10,180,0" },
        { name: "Norway", coords: "50,40,70,50,80,30,60,20" },
        { name: "Denmark", coords: "120,70,140,80,150,60,130,50" },
        { name: "Iceland", coords: "30,60,50,70,60,50,40,40" }
    ];

    // Function to create <area> elements dynamically
    areasData.forEach(areaData => {
        const areaElement = document.createElement('area');
        areaElement.setAttribute('shape', 'poly');
        areaElement.setAttribute('coords', areaData.coords);
        areaElement.setAttribute('href', '#');
        areaElement.setAttribute('title', areaData.name);
        areaElement.setAttribute('alt', areaData.name);
        mapAreas.appendChild(areaElement);

        // Parse coordinates
        const coords = areaData.coords.split(',').map(Number);

        // Draw lines between each coordinate point
        for (let i = 0; i < coords.length; i += 2) {
            const x = coords[i];
            const y = coords[i + 1];

            // Draw line to next point
            if (i + 2 < coords.length) {
                const nextX = coords[i + 2];
                const nextY = coords[i + 3];

                drawLine(x, y, nextX, nextY, '#000'); // Replace '#000' with desired line color
            }
        }
    });

    areasData.forEach(areaData => {
        console.log(areaData.name); // Output each country name to console (you can replace this with any other logic you need)
    });

    // Function to draw a line between two points
    function drawLine(x1, y1, x2, y2, color) {
        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1', x1);
        line.setAttribute('y1', y1);
        line.setAttribute('x2', x2);
        line.setAttribute('y2', y2);
        line.setAttribute('stroke', color);
        line.setAttribute('stroke-width', '2');
        svgOverlay.appendChild(line);
    }
});


        // Optional JavaScript for interactivity
        document.querySelectorAll('area').forEach(area => {
            area.addEventListener('click', (e) => {
                e.preventDefault();
                alert(areaData.name);
            });
        });
    </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>Europe Map with Image Map</title>
	<style>
	img {z-index:0;position:absolute;max-width:100%;height:auto;}
	#svg-overlay{z-index:-0 !important;position:relative;}
	area {
	cursor: pointer;
	}

	/* Hover effect for the areas */
	area:hover {
	outline: 2px solid yellow;
	}


	</style>
	</head>
	<body>
	<h1>Map of Europe with Image Map</h1>
	<!-- Replace the src attribute with the provided image URL -->
	<img id="world-map" src="https://upload.wikimedia.org/wikipedia/commons/8/81/Europe_countries_map_2.png" usemap="#europe-map" alt="Map of Europe">

	<!-- SVG overlay for drawing lines -->
	<svg id="svg-overlay"></svg>

	<map name="europe-map" id="map-areas">
	<!-- No static <area> elements here -->
	</map>

	<script>
	document.addEventListener('DOMContentLoaded', function() {
	const map = document.getElementById('world-map');
	const mapAreas = document.getElementById('map-areas');
	const svgOverlay = document.getElementById('svg-overlay');

	// Define the areas data with names and coordinates
	const areasData = [
	{ name: "Portugal", coords: "70,240,90,230,80,220,60,230" },
	{ name: "Spain", coords: "120,220,140,210,150,230,130,240" },
	{ name: "France", coords: "180,190,200,200,220,180,200,170" },
	{ name: "Monaco", coords: "240,190,250,200,260,190,250,180" },
	{ name: "Italy", coords: "270,230,290,240,300,230,290,220" },
	{ name: "Switzerland", coords: "260,170,280,160,290,180,270,180" },
	{ name: "Germany", coords: "280,130,300,120,310,140,290,150" },
	{ name: "Luxembourg", coords: "290,150,310,140,320,150,310,160" },
	{ name: "Belgium", coords: "280,160,300,150,310,160,300,170" },
	{ name: "Netherlands", coords: "300,140,320,130,330,140,320,150" },
	{ name: "Austria", coords: "310,180,330,190,340,180,330,170" },
	{ name: "Liechtenstein", coords: "320,180,330,170,340,180,330,190" },
	{ name: "Slovenia", coords: "330,210,350,220,360,210,350,200" },
	{ name: "Croatia", coords: "350,200,370,210,380,200,370,190" },
	{ name: "Bosnia and Herzegovina", coords: "360,190,380,200,390,190,380,180" },
	{ name: "Montenegro", coords: "380,190,390,200,400,190,390,180" },
	{ name: "Albania", coords: "390,180,400,190,410,180,400,170" },
	{ name: "North Macedonia", coords: "400,170,410,180,420,170,410,160" },
	{ name: "Kosovo", coords: "410,160,420,170,430,160,420,150" },
	{ name: "Serbia", coords: "390,160,400,170,410,160,400,150" },
	{ name: "Hungary", coords: "330,160,350,150,360,170,340,180" },
	{ name: "Slovakia", coords: "330,170,350,160,360,180,340,190" },
	{ name: "Poland", coords: "310,120,330,110,340,130,320,140" },
	{ name: "Czech Republic", coords: "300,140,320,130,330,150,310,160" },
	{ name: "Estonia", coords: "390,50,410,60,420,50,410,40" },
	{ name: "Latvia", coords: "370,60,390,70,400,60,390,50" },
	{ name: "Lithuania", coords: "360,70,380,80,390,70,370,60" },
	{ name: "Sweden", coords: "174,78,174,79,174,80,174,81,174,82,174,83,174,84,174,85,174,86,174,87,174,88,174,89,175,89,176,89,177,89,178,89,179,89,180,89,181,89,182,89,183,89,184,89,184,88,184,87,184,86,185,86,185,85,185,84,185,83,185,82,185,81,185,80,185,79,185,78,184,78,183,78,182,78,181,78,180,78,179,78,178,78" },
	{ name: "Finland", coords: "170,20,190,30,200,10,180,0" },
	{ name: "Norway", coords: "50,40,70,50,80,30,60,20" },
	{ name: "Denmark", coords: "120,70,140,80,150,60,130,50" },
	{ name: "Iceland", coords: "30,60,50,70,60,50,40,40" }
	];

	// Function to create <area> elements dynamically
	areasData.forEach(areaData => {
	const areaElement = document.createElement('area');
	areaElement.setAttribute('shape', 'poly');
	areaElement.setAttribute('coords', areaData.coords);
	areaElement.setAttribute('href', '#');
	areaElement.setAttribute('title', areaData.name);
	areaElement.setAttribute('alt', areaData.name);
	mapAreas.appendChild(areaElement);

	// Parse coordinates
	const coords = areaData.coords.split(',').map(Number);

	// Draw lines between each coordinate point
	for (let i = 0; i < coords.length; i += 2) {
	const x = coords[i];
	const y = coords[i + 1];

	// Draw line to next point
	if (i + 2 < coords.length) {
	const nextX = coords[i + 2];
	const nextY = coords[i + 3];

	drawLine(x, y, nextX, nextY, '#000'); // Replace '#000' with desired line color
	}
	}
	});

	areasData.forEach(areaData => {
	console.log(areaData.name); // Output each country name to console (you can replace this with any other logic you need)
	});

	// Function to draw a line between two points
	function drawLine(x1, y1, x2, y2, color) {
	const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
	line.setAttribute('x1', x1);
	line.setAttribute('y1', y1);
	line.setAttribute('x2', x2);
	line.setAttribute('y2', y2);
	line.setAttribute('stroke', color);
	line.setAttribute('stroke-width', '2');
	svgOverlay.appendChild(line);
	}
	});


	// Optional JavaScript for interactivity
	document.querySelectorAll('area').forEach(area => {
	area.addEventListener('click', (e) => {
	e.preventDefault();
	alert(areaData.name);
	});
	});
	</script>
	</body>
	</html>