Created
June 17, 2024 00:49
-
-
Save EncodeTheCode/8a7cb7fc2bc75485a1ebbd88192edcba to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> | |
body { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
height: 100vh; | |
margin: 0; | |
background-color: #f0f0f0; | |
font-family: Arial, sans-serif; | |
} | |
img {z-index:0;position:absolute;max-width:100%;height:auto;} | |
#svg-overlay{z-index:-0 !important;position:absolute;} | |
area { | |
cursor: pointer; | |
} | |
/* Hover effect for the areas */ | |
area:hover { | |
outline: 2px solid yellow; | |
} | |
#map-container { | |
position: relative; | |
background-image:url('https://upload.wikimedia.org/wikipedia/commons/8/81/Europe_countries_map_2.png'); | |
background-repeat:no-repeat; | |
background-size:cover; | |
} | |
canvas { | |
display: block; | |
border: 1px solid #ccc; | |
cursor: crosshair; | |
} | |
#controls { | |
position: absolute; | |
top: 10px; | |
left: 10px; | |
background-color: white; | |
padding: 10px; | |
border: 1px solid #ccc; | |
border-radius: 5px; | |
box-shadow: 0 2px 5px rgba(0,0,0,0.1); | |
} | |
button { | |
margin: 5px 0; | |
display: block; | |
width: 100%; | |
padding: 8px; | |
border: none; | |
background-color: #007bff; | |
color: white; | |
font-size: 16px; | |
cursor: pointer; | |
border-radius: 3px; | |
} | |
button:hover { | |
background-color: #0056b3; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="map-container"> | |
<canvas id="map-canvas" width="800" height="600" usemap="#europe-map" alt="Map of Europe"></canvas> | |
<div id="controls"> | |
<button id="add-area-btn">Add Area</button> | |
<button id="save-btn">Save Areas</button> | |
<button id="clear-btn">Clear All</button> | |
</div> | |
</div> | |
<!-- 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('map-canvas'); | |
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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment