EncodeTheCode/draw_countries_issue.htm

## draw_countries_issue.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: "316,232,316,231,316,230,316,229,316,228,316,227,316,226,316,225,316,224,316,223,316,222,316,221,317,221,317,220,318,220,318,219,319,219,319,218,320,218,320,217,321,217,321,216,321,215,322,215,322,214,323,214,323,213,323,212,323,211,323,210,323,209,323,208,323,207,323,206,322,206,322,205,322,204,322,203,322,202,323,202,323,201,324,201,324,200,325,200,325,199,326,199,326,198,327,198,327,197,327,196,327,195,327,194,327,193,326,193,326,192,325,192,325,191,325,190,325,189,325,188,325,187,325,186,325,185,325,184,325,183,325,182,325,181,325,180,324,180,324,179,324,178,324,177,324,176,324,175,324,174,324,173,324,172,323,168,323,167,322,167,322,166,322,165,322,164,322,163,322,162,322,161,322,160,322,159,322,158,322,157,322,156,323,156,323,155,323,154,324,154,324,153,324,152,325,152,325,151,325,150,326,150,326,149,327,149,327,148,327,147,328,147,328,146,329,146,329,145,330,145,331,145,332,145,333,145,334,145,335,145,336,145,337,145,338,145,339,145,339,144,339,143,339,142,339,141,339,140,338,140,338,139,337,139,337,138,337,137,337,136,337,135,337,134,338,134,338,133,338,132,339,132,339,131,339,130,340,130,340,129,340,128,341,128,341,127,341,126,341,125,342,125,342,124,342,123,342,122,343,122,343,121,343,120,343,119,343,118,344,118,344,117,344,116,344,115,344,114,344,113,344,112,344,111,345,111,345,110,346,110,347,110,347,109,348,109,348,108,349,108,349,107,349,106,349,105,349,104,349,103,350,103,350,102,350,101,351,101,351,100,352,100,352,99,352,98,353,98,353,97,353,96,353,95,354,95,354,94,354,93,354,92,354,91,354,90,353,90,353,89,353,88,353,87,353,86,353,85,353,84,354,84,354,83,355,83,355,82,356,82,356,81,357,81,357,80,358,80,358,79,359,79,359,78,360,78,361,78,361,77,361,76,362,76,362,75,363,75,363,74,364,74,364,73,365,73,365,72,366,72,366,71,367,71,368,71,368,70,369,70,370,70,371,70,372,70,373,70,374,70,375,70,375,69,375,68,375,67,375,66,376,66,376,65,377,65,377,64,378,64,379,64,379,63,380,63,381,63,382,63,383,63,384,63,384,64,385,64,385,65,386,65,386,66,387,66,387,67,388,67,389,67,390,67,390,68,391,68,392,68,393,68,393,69,394,69,395,69,395,70,395,71,396,71,397,71,397,72,397,73,398,73,398,74,399,74,399,75,399,76,400,76,400,77,400,78,401,78,401,79,401,80,401,81,402,81,402,82,402,83,402,84,402,85,402,86,402,87,402,88,403,88,403,89,403,90,403,91,403,92,404,92,405,92,405,93,405,94,406,94,406,95,406,96,406,97,406,98,406,99,406,100,406,101,406,102,407,102,407,103,407,104,408,104,408,105,408,106,409,106,409,107,409,108,410,108,410,109,410,110,410,111,410,112,410,113,409,113,408,113,407,113,406,113,405,113,405,114,404,114,403,114,402,114,402,115,401,115,401,116,400,116,400,117,400,118,399,118,399,119,399,120,399,121,398,121,398,122,398,123,397,123,397,124,396,124,396,125,396,126,395,126,395,127,395,128,395,129,394,129,394,130,394,131,394,132,394,133,394,134,394,135,395,135,395,136,395,137,396,137,396,138,396,139,396,140,395,140,395,141,395,142,394,142,394,143,393,143,393,144,392,144,392,145,391,145,391,146,390,146,390,147,389,147,389,148,388,148,388,149,388,150,387,150,387,151,386,151,386,152,385,152,385,153,384,153,384,154,384,155,383,155,383,156,382,156,382,157,382,158,381,158,380,158,380,159,380,160,379,160,379,161,378,161,378,162,378,163,377,163,376,163,376,164,375,164,375,165,375,166,374,166,374,167,373,167,373,168,373,169,373,170,372,170,372,171,371,171,371,172,371,173,370,173,370,174,370,175,369,175,369,176,369,177,369,178,369,179,368,179,368,180,367,180,367,181,367,182,367,183,367,184,366,184,366,185,366,186,366,187,366,188,366,189,365,189,365,190,365,191,365,192,365,193,365,194,365,195,365,196,365,197,365,198,365,199,365,200,365,201,366,201,366,202,366,203,367,203,367,204,368,204,369,204,369,205,370,205,370,206,371,206,371,207,372,207,372,208,373,208,373,209,374,209,374,210,375,210,375,211,375,212,376,212,376,213,376,214,377,214,377,215,377,216,378,216,378,217,378,218,378,219,378,220,378,221,377,221,377,222,376,222,376,223,375,223,375,224,375,225,374,225,374,226,374,227,373,227,373,228,373,229,372,229,372,230,371,230,371,231,371,232,370,232,370,233,370,234,369,234,369,235,369,236,368,236,367,236,367,237,366,237,366,238,365,238,364,238,364,239,363,239,363,240,362,240,362,241,361,241,361,242,361,243,362,243,362,244,362,245,362,246,362,247,363,247,363,248,363,249,363,250,363,251,363,252,363,253,363,254,363,255,363,256,363,257,363,258,363,259,363,260,363,261,362,261,362,262,362,263,362,264,362,265,361,265,361,266,361,267,360,267,360,268,359,268,359,269,359,270,359,271,358,271,358,272,358,273,358,274,357,274,357,275,357,276,357,277,357,278,356,278,356,279,356,280,355,280,355,281,354,281,354,282,353,282,352,282,351,282,350,282,349,282,348,282,347,282,347,283,346,283,345,283,345,284,344,284,343,284,343,285,342,285,342,286,342,287,341,287,341,288,341,289,341,290,340,290,340,291,339,291,339,292,338,292,337,292,336,292,336,293,335,293,334,293,333,293,332,293,331,293,330,293,329,293,328,293,328,292,328,291,327,291,327,290,327,289,326,289,326,288,326,287,326,286,326,285,326,284,325,284,325,283,325,282,325,281,324,280,324,279,324,278,324,277,323,277,323,276,323,275,322,275,322,274,322,273,322,272,322,271,321,271,321,270,321,269,321,268,320,268,320,267,320,266,320,265,320,264,319,264,319,263,319,262,318,262,318,261,318,260,318,259,318,258,317,258,317,257,317,256,317,255,317,254,317,253,317,252,316,252,316,251,316,250,316,249,316,248,316,247,315,247,315,246,315,245,315,244,315,243,314,243,314,242,314,241,314,240,314,239,314,238,314,237" },
        { 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: "316,232,316,231,316,230,316,229,316,228,316,227,316,226,316,225,316,224,316,223,316,222,316,221,317,221,317,220,318,220,318,219,319,219,319,218,320,218,320,217,321,217,321,216,321,215,322,215,322,214,323,214,323,213,323,212,323,211,323,210,323,209,323,208,323,207,323,206,322,206,322,205,322,204,322,203,322,202,323,202,323,201,324,201,324,200,325,200,325,199,326,199,326,198,327,198,327,197,327,196,327,195,327,194,327,193,326,193,326,192,325,192,325,191,325,190,325,189,325,188,325,187,325,186,325,185,325,184,325,183,325,182,325,181,325,180,324,180,324,179,324,178,324,177,324,176,324,175,324,174,324,173,324,172,323,168,323,167,322,167,322,166,322,165,322,164,322,163,322,162,322,161,322,160,322,159,322,158,322,157,322,156,323,156,323,155,323,154,324,154,324,153,324,152,325,152,325,151,325,150,326,150,326,149,327,149,327,148,327,147,328,147,328,146,329,146,329,145,330,145,331,145,332,145,333,145,334,145,335,145,336,145,337,145,338,145,339,145,339,144,339,143,339,142,339,141,339,140,338,140,338,139,337,139,337,138,337,137,337,136,337,135,337,134,338,134,338,133,338,132,339,132,339,131,339,130,340,130,340,129,340,128,341,128,341,127,341,126,341,125,342,125,342,124,342,123,342,122,343,122,343,121,343,120,343,119,343,118,344,118,344,117,344,116,344,115,344,114,344,113,344,112,344,111,345,111,345,110,346,110,347,110,347,109,348,109,348,108,349,108,349,107,349,106,349,105,349,104,349,103,350,103,350,102,350,101,351,101,351,100,352,100,352,99,352,98,353,98,353,97,353,96,353,95,354,95,354,94,354,93,354,92,354,91,354,90,353,90,353,89,353,88,353,87,353,86,353,85,353,84,354,84,354,83,355,83,355,82,356,82,356,81,357,81,357,80,358,80,358,79,359,79,359,78,360,78,361,78,361,77,361,76,362,76,362,75,363,75,363,74,364,74,364,73,365,73,365,72,366,72,366,71,367,71,368,71,368,70,369,70,370,70,371,70,372,70,373,70,374,70,375,70,375,69,375,68,375,67,375,66,376,66,376,65,377,65,377,64,378,64,379,64,379,63,380,63,381,63,382,63,383,63,384,63,384,64,385,64,385,65,386,65,386,66,387,66,387,67,388,67,389,67,390,67,390,68,391,68,392,68,393,68,393,69,394,69,395,69,395,70,395,71,396,71,397,71,397,72,397,73,398,73,398,74,399,74,399,75,399,76,400,76,400,77,400,78,401,78,401,79,401,80,401,81,402,81,402,82,402,83,402,84,402,85,402,86,402,87,402,88,403,88,403,89,403,90,403,91,403,92,404,92,405,92,405,93,405,94,406,94,406,95,406,96,406,97,406,98,406,99,406,100,406,101,406,102,407,102,407,103,407,104,408,104,408,105,408,106,409,106,409,107,409,108,410,108,410,109,410,110,410,111,410,112,410,113,409,113,408,113,407,113,406,113,405,113,405,114,404,114,403,114,402,114,402,115,401,115,401,116,400,116,400,117,400,118,399,118,399,119,399,120,399,121,398,121,398,122,398,123,397,123,397,124,396,124,396,125,396,126,395,126,395,127,395,128,395,129,394,129,394,130,394,131,394,132,394,133,394,134,394,135,395,135,395,136,395,137,396,137,396,138,396,139,396,140,395,140,395,141,395,142,394,142,394,143,393,143,393,144,392,144,392,145,391,145,391,146,390,146,390,147,389,147,389,148,388,148,388,149,388,150,387,150,387,151,386,151,386,152,385,152,385,153,384,153,384,154,384,155,383,155,383,156,382,156,382,157,382,158,381,158,380,158,380,159,380,160,379,160,379,161,378,161,378,162,378,163,377,163,376,163,376,164,375,164,375,165,375,166,374,166,374,167,373,167,373,168,373,169,373,170,372,170,372,171,371,171,371,172,371,173,370,173,370,174,370,175,369,175,369,176,369,177,369,178,369,179,368,179,368,180,367,180,367,181,367,182,367,183,367,184,366,184,366,185,366,186,366,187,366,188,366,189,365,189,365,190,365,191,365,192,365,193,365,194,365,195,365,196,365,197,365,198,365,199,365,200,365,201,366,201,366,202,366,203,367,203,367,204,368,204,369,204,369,205,370,205,370,206,371,206,371,207,372,207,372,208,373,208,373,209,374,209,374,210,375,210,375,211,375,212,376,212,376,213,376,214,377,214,377,215,377,216,378,216,378,217,378,218,378,219,378,220,378,221,377,221,377,222,376,222,376,223,375,223,375,224,375,225,374,225,374,226,374,227,373,227,373,228,373,229,372,229,372,230,371,230,371,231,371,232,370,232,370,233,370,234,369,234,369,235,369,236,368,236,367,236,367,237,366,237,366,238,365,238,364,238,364,239,363,239,363,240,362,240,362,241,361,241,361,242,361,243,362,243,362,244,362,245,362,246,362,247,363,247,363,248,363,249,363,250,363,251,363,252,363,253,363,254,363,255,363,256,363,257,363,258,363,259,363,260,363,261,362,261,362,262,362,263,362,264,362,265,361,265,361,266,361,267,360,267,360,268,359,268,359,269,359,270,359,271,358,271,358,272,358,273,358,274,357,274,357,275,357,276,357,277,357,278,356,278,356,279,356,280,355,280,355,281,354,281,354,282,353,282,352,282,351,282,350,282,349,282,348,282,347,282,347,283,346,283,345,283,345,284,344,284,343,284,343,285,342,285,342,286,342,287,341,287,341,288,341,289,341,290,340,290,340,291,339,291,339,292,338,292,337,292,336,292,336,293,335,293,334,293,333,293,332,293,331,293,330,293,329,293,328,293,328,292,328,291,327,291,327,290,327,289,326,289,326,288,326,287,326,286,326,285,326,284,325,284,325,283,325,282,325,281,324,280,324,279,324,278,324,277,323,277,323,276,323,275,322,275,322,274,322,273,322,272,322,271,321,271,321,270,321,269,321,268,320,268,320,267,320,266,320,265,320,264,319,264,319,263,319,262,318,262,318,261,318,260,318,259,318,258,317,258,317,257,317,256,317,255,317,254,317,253,317,252,316,252,316,251,316,250,316,249,316,248,316,247,315,247,315,246,315,245,315,244,315,243,314,243,314,242,314,241,314,240,314,239,314,238,314,237" },
	{ 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>