EncodeTheCode/map_generator.htm

## map_generator.htm
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Map Area Coordinates Generator</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        #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"></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>

    <script>
document.addEventListener('DOMContentLoaded', function() {
    const canvas = document.getElementById('map-canvas');
    const ctx = canvas.getContext('2d');
    const areas = [];

    let isDrawing = false;
    let currentCoords = [];

    // Function to draw all areas on the canvas
    function drawAreas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        areas.forEach(area => {
            ctx.beginPath();
            ctx.moveTo(area.coords[0], area.coords[1]);
            for (let i = 2; i < area.coords.length; i += 2) {
                ctx.lineTo(area.coords[i], area.coords[i + 1]);
            }
            ctx.closePath();
            ctx.strokeStyle = '#000';
            ctx.stroke();
        });

        // Draw current drawing if in progress
        if (isDrawing) {
            ctx.beginPath();
            ctx.moveTo(currentCoords[0], currentCoords[1]);
            for (let i = 2; i < currentCoords.length; i += 2) {
                ctx.lineTo(currentCoords[i], currentCoords[i + 1]);
            }
            ctx.strokeStyle = '#000';
            ctx.stroke();
        }
    }

    // Event listener for canvas click to add points
    canvas.addEventListener('mousedown', function(e) {
        isDrawing = true;
        currentCoords.push(e.offsetX, e.offsetY);
    });

    // Event listener for mouse movement to draw lines as user clicks
    canvas.addEventListener('mousemove', function(e) {
        if (isDrawing) {
            currentCoords.push(e.offsetX, e.offsetY);
            drawAreas(); // Redraw all areas including the current drawing
        }
    });

    // Event listener for mouse up to finish drawing an area
    canvas.addEventListener('mouseup', function() {
        if (isDrawing) {
            isDrawing = false;
            areas.push({ coords: [...currentCoords] });
            currentCoords = [];
            drawAreas(); // Redraw all areas including the newly added area
        }
    });

    // Event listener for add area button to clear canvas
    document.getElementById('add-area-btn').addEventListener('click', function() {
        isDrawing = false;
        currentCoords = [];
        drawAreas(); // Redraw all areas including the current drawing
    });

    // Event listener for clear all button to reset canvas and areas
    document.getElementById('clear-btn').addEventListener('click', function() {
        isDrawing = false;
        currentCoords = [];
        areas.length = 0;
        ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas completely
    });

    // Event listener for save button to save areas as JSON
    document.getElementById('save-btn').addEventListener('click', function() {
        const areasData = areas.map(area => ({
            coords: area.coords.join(',')
        }));
        const jsonAreas = JSON.stringify(areasData);
        console.log(jsonAreas); // For demonstration, you can save or use this JSON data as needed
        alert('Areas saved as JSON:\n\n' + jsonAreas);
    });

    // Initial draw to ensure canvas is not empty at start
    drawAreas();
});

	</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>Interactive Map Area Coordinates Generator</title>
	<style>
	body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	background-color: #f0f0f0;
	font-family: Arial, sans-serif;
	}
	#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"></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>

	<script>
	document.addEventListener('DOMContentLoaded', function() {
	const canvas = document.getElementById('map-canvas');
	const ctx = canvas.getContext('2d');
	const areas = [];

	let isDrawing = false;
	let currentCoords = [];

	// Function to draw all areas on the canvas
	function drawAreas() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	areas.forEach(area => {
	ctx.beginPath();
	ctx.moveTo(area.coords[0], area.coords[1]);
	for (let i = 2; i < area.coords.length; i += 2) {
	ctx.lineTo(area.coords[i], area.coords[i + 1]);
	}
	ctx.closePath();
	ctx.strokeStyle = '#000';
	ctx.stroke();
	});

	// Draw current drawing if in progress
	if (isDrawing) {
	ctx.beginPath();
	ctx.moveTo(currentCoords[0], currentCoords[1]);
	for (let i = 2; i < currentCoords.length; i += 2) {
	ctx.lineTo(currentCoords[i], currentCoords[i + 1]);
	}
	ctx.strokeStyle = '#000';
	ctx.stroke();
	}
	}

	// Event listener for canvas click to add points
	canvas.addEventListener('mousedown', function(e) {
	isDrawing = true;
	currentCoords.push(e.offsetX, e.offsetY);
	});

	// Event listener for mouse movement to draw lines as user clicks
	canvas.addEventListener('mousemove', function(e) {
	if (isDrawing) {
	currentCoords.push(e.offsetX, e.offsetY);
	drawAreas(); // Redraw all areas including the current drawing
	}
	});

	// Event listener for mouse up to finish drawing an area
	canvas.addEventListener('mouseup', function() {
	if (isDrawing) {
	isDrawing = false;
	areas.push({ coords: [...currentCoords] });
	currentCoords = [];
	drawAreas(); // Redraw all areas including the newly added area
	}
	});

	// Event listener for add area button to clear canvas
	document.getElementById('add-area-btn').addEventListener('click', function() {
	isDrawing = false;
	currentCoords = [];
	drawAreas(); // Redraw all areas including the current drawing
	});

	// Event listener for clear all button to reset canvas and areas
	document.getElementById('clear-btn').addEventListener('click', function() {
	isDrawing = false;
	currentCoords = [];
	areas.length = 0;
	ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas completely
	});

	// Event listener for save button to save areas as JSON
	document.getElementById('save-btn').addEventListener('click', function() {
	const areasData = areas.map(area => ({
	coords: area.coords.join(',')
	}));
	const jsonAreas = JSON.stringify(areasData);
	console.log(jsonAreas); // For demonstration, you can save or use this JSON data as needed
	alert('Areas saved as JSON:\n\n' + jsonAreas);
	});

	// Initial draw to ensure canvas is not empty at start
	drawAreas();
	});

	</script>
	</body>
	</html>