I have recreated the map from the 1985 game "Balance of Power" (

And here is what the map should look like after a single country has been selected (only one country can be selected at a time).

CodePudding user response：

After reading the comments and doing some research I decided to create a custom SVG map using the original data. Here is my first attempt.

The original map, created on a HTML canvas using JavaScript, is on the left and underneath the two SVG images on the right.

The SVG version contains just three North American countries and uses some CSS to fill in an individual country as you cross over its border and hover over it. Note: The code hasn't been optimized, each country has its own individual data structures, and there are still some glitches as you cross over some country borders (I would like to make it so the country is highlighted when you click on it instead of just crossing its border, but I haven't figured out how to do that yet).

Here's the JS/CSS/HTML code to create the SVG map images above:

const svgns = "http://www.w3.org/2000/svg"; // variable for the namespace
const svg = document.querySelector("svg"); // targeting the svg itself

const usa_main = document.querySelector("g#usa_main"); // targeting the united states div
const usa_alaska = document.querySelector("g#usa_alaska"); 
const canada_main = document.querySelector("g#canada_main");
const canada_victoria = document.querySelector("g#canada_victoria");
const mexico_main = document.querySelector("g#mexico_main"); 

const stroke_default = "black";
const fill_default = "none";

var outline_united_states = "";
var outline_alaska = "";
var outline_canada = "";
var outline_victoria_island = "";
var outline_mexico = "";

// United States
outline_united_states=createOutline(60, 84, "3ES6ES6ES6ES6ES6ES6ES6ES3ESWSWS3EN2ESESESEES5WSSWSSWWSWSW3SESEENENE3NENENN4ESSWSWSE3SWSSEEN3ENENN6E3N9EENENEN3E3SWSSWSWWSWWSWSEES4WS3WSWWSSWSWS3WNNW5SW3NWSSWSSESSWSWS3WSSWWSSWWSWSWWSWSSW4SE7SWS3WNWNNENNWNNE4N2WN3WN6WSESSWNWWNWWS3WSWWS3WSWWSWSW4S2WNWNW4NW3N5W3NWNN5WN2WN2WN2WN6W4NWNW9NNE3NE2NENE2NE2NENE2NENE2NENENE2NE2NENE2N");
let united_states = document.createElementNS(svgns, "polygon");
united_states.setAttribute("points", outline_united_states);
united_states.setAttribute("stroke", stroke_default);
united_states.setAttribute("fill", fill_default);
//svg.appendChild(united_states); // append the new polygon to the svg
usa_main.appendChild(united_states); 

// Alaska
outline_alaska = createOutline(30, 56, "3EN3ENEN2ESE2NW3NEN6ES2ENEN2EN3WS2W2NE2N2EN5E2SENENENW3N2ES4EN3EN6ES2ENEN2ESES2ESES6E2SWSWS2WSWS2WSWS2WSWSWS2WSWSWS2WSWS2W5SE9S2W5NW2NW2NWN2WNWN2WN3WS2WS3WNEN2ENEN2WS2WS2WS9W2WS5W3N");
let alaska = document.createElementNS(svgns, "polygon");
alaska.setAttribute("points", outline_alaska);
alaska.setAttribute("stroke", "black");
alaska.setAttribute("fill", "none");
usa_alaska.appendChild(alaska);

// Canada
outline_canada = createOutline(86, 41, "2ESES2ENENEN2ES2EN3ENE2S2ES4ESES3ESE2S7EN3ESE2SES2ES2EN3EN2ENENESESE4N2ENENEN2ENEN3EN2ESESWSWSWSW2SWSW2SE2SWSES2ENENENENESE2SWS2W2S3WS2WNWS3WS2WNW2S2E2S3WN3WS2WS2WS2W2SWS2WS2WS3W7S3ESES2ESES3ESW2SW2SE2SES2E3NENE2NEN2EN2ENENE5NENEN2ENE3N3ES3ENESESES2E2SW2SW2SES2EN2E2NE2NE6SW3SE3S3ESES2E4SW2S5WS9W6WS2WS2WSWSWSENEN3EN3ES2E2SWSWS2W2SES2ESES3WSWS4WNEN2EN2WS2WSW2NE3N3WSWSWS9WWS5W2SWS5WNENENENEN2ENWNEN5W2NE3NWNWN4WS2WSWN3WN6WN6WN6WN6WN6WN6WN6WN4W6NE2NE2NENE2NEN2E9NW5N2ENEN2ENENEN2ENENEN2ENEN2ENEN2ENENEN");
let canada = document.createElementNS(svgns, "polygon");
canada.setAttribute("points", outline_canada);
canada.setAttribute("stroke", "black");
canada.setAttribute("fill", "none");
canada_main.appendChild(canada);

// Victoria Island
outline_victoria_island = createOutline(114, 43, "2ES3EN2W2NEN3ESES2ENEN2ESES2E2SES3ESWS4WN2W2SES2WNWNWNWN6WS3W3N");
let victoria_island = document.createElementNS(svgns, "polygon");
victoria_island.setAttribute("points", outline_victoria_island);
victoria_island.setAttribute("stroke", "black");
victoria_island.setAttribute("fill", "none");
canada_victoria.appendChild(victoria_island);

// Mexico
outline_mexico = createOutline(47, 124, "6ES2ES2ES2ES5E2SE3S5E3SE4SESESE4SW2SW3SE2SW2SES2ESESEN2ES2ENENE3NEN3ESEN3ESWSW3SW2SWS4W3S4WSWS2WN6WS2WNWNWN2WNWN2WNWNWNWNWNW3NENE3N2W6NW3NW5NW3NW5NWNW9S3SE3SE8S2W2NW4NW2NW2NWNW2N2E2NW3NE6N");
let mexico = document.createElementNS(svgns, "polygon");
mexico.setAttribute("points", outline_mexico);
mexico.setAttribute("stroke", "black");
mexico.setAttribute("fill", "none");
mexico_main.appendChild(mexico);

function createOutline(origin_x, origin_y, direction_string) {
    var points = "";
    var current_x = parseInt(origin_x);
    var current_y = parseInt(origin_y);
    
    for (let i = 0; i <= direction_string.length; i  ) {
        points = points   current_x.toString()   ","   current_y.toString()   " ";
        

        k = direction_string.substr(i, 1).charCodeAt(0) - 49;
        l = i   1;

        if (k < 0 || k > 8) {
            k = 1;
            l = i;
        }

        direction = direction_string[l];

        switch (direction) {
            case "N":
                current_y = current_y - k;
                break;
            case "S":
                current_y = current_y   k;
                break;
            case "E":
                current_x = current_x   k;
                break;
            case "W":
                current_x = current_x - k;
                break;
        }
    }
    //console.log(points);
    //console.log(points.length);  
    
    return points;
}

svg {
    background-color: antiquewhite;
}

g polygon:hover {
    fill: #000000;
}

<svg id="map"  xmlns="http://www.w3.org/2000/svg" width="512" height="342" viewBox="0 0 512 342">
    <g id="usa_main"  xmlns="http://www.w3.org/2000/svg" />
    <g id="usa_alaska"  xmlns="http://www.w3.org/2000/svg" />
    <g id="canada_main"  xmlns="http://www.w3.org/2000/svg" />
    <g id="canada_victoria"  xmlns="http://www.w3.org/2000/svg" /> 
    <g id="mexico_main"  xmlns="http://www.w3.org/2000/svg" />
</svg>