Occupied Territory overlay

[PeraZver]

Adding an overlay of the historical map of the occupation zones.

• Trying to extract the borders from the image file (.png).
• I run a couple of AI generated python scripts to extract borders from the image. The extractio in is in the form of geoJSON file.
• A proper extraction requires a perfect match of the image corners with the actual latitude/longitude

My current workflow

I tried to guess these by overlaying the image over the leaflet map, using this code in maps.js:

// Add an image overlay for the occupied zones during WW2
const imageUrl = '../img/NDHOccupationZonesLocatorMap.png'; // Path to the image in public/img
const imageBounds = [[42.14, 14.15], 
                     [46.75, 20.682]]; // Replace with the actual bounds of your image

const occupiedZonesOverlay = L.imageOverlay(imageUrl, imageBounds, {
    opacity: 0.7, // Fully opaque
    interactive: true, // Set to true if you want the image to capture events
    zIndex: 10 // Ensure it appears above other layers
});

// Add the overlay to the map
occupiedZonesOverlay.addTo(map);

map.on('click', function (e) {
    console.log(`Clicked at ${e.latlng.lat}, ${e.latlng.lng}`);
});

I did multiple iterations and try-error to find a suitable imageBounds. The current values are acceptable for image alignement. But generating geoJSON is tricky. Github copilot in VS vode generated a script extract_image_borders.py, which kinda does the job, but geoJSON doesnt look good when you put it on the map. The lines are spaghetti, unecessary coastal lines, double line per border etc.