let worldMap;

let projection; // d3 projection for Mercator

​

function preload() {

  // Load your rectangular Mercator world map

  worldMap = loadImage('World_map_blank_shorelines_semiwikimapia.svg');

  // Example coordinates loaded from JSON

  coordinates = [

    { "lat": 37.7749, "lon": -122.4194 }, // San Francisco

    { "lat": 51.5074, "lon": -0.1278 },   // London

    { "lat": -33.8688, "lon": 151.2093 }  // Sydney

  ];

}

​

let k = 2;

​

function setup() {

  createCanvas(1100/k, 750/k);

​

  // Create the Mercator projection using d3-geo

  projection = d3.geoMercator()

                 .scale(width / (2 * Math.PI))   // Set the scale

                 .translate([width / 2, height / 2]); // Translate to center of the canvas

}

​

function draw() {

  background(255);

  image(worldMap, 0, 0, width, height);

  for (let i = 0; i < coordinates.length; i++) {

    let [x, y] = projection([coordinates[i].lon, coordinates[i].lat]);  // Use d3 projection

    fill(144, 238, 144);  // Light green color

    noStroke();

    ellipse(x, y, 10, 10);

    // If the mouse is hovering over the point

    if (dist(mouseX, mouseY, x, y) < 5) {

      fill(255, 0, 0);  // Highlight color when hovered

      ellipse(x, y, 10, 10);

      // Display the coordinates

      fill(0);

      textSize(12);

      text(`Lat: ${coordinates[i].lat}, Lon: ${coordinates[i].lon}`, mouseX + 10, mouseY);

    }

  }

}

​