Translating latitude and longitude into x,y grid on webpage

Question

I am trying to take latitude and longitude values from different people's location into a gridlike 2D display where y= longitude and x = latitude 2D. How can I do that using html, css, java? I just found from a different question, maybe I could use ArcGis Api to translate the values to X and Y. But then how would I place them on the screen, so that they have the correct location?

I have this code for the latitude and longitude:

const getLocation = document.getElementById("btn");

getLocation.addEventListener("click", evt=> {
    if("geolocation" in navigator) {
        navigator.geolocation.getCurrentPosition(position=> {
            let latitude = position.coords.latitude;
            let longitude = position.coords.longitude;

            console.log(latitude,longitude);
        },error=>{
            console.log(error.code);
        });
    }else {
        console.log("not supported")
    }
});

Fishbite · Answer 1 · 2022-11-25T18:56:21.960

So, you have identified that you need to convert lat/long into Cartesian coords i.e x & y numbers. So, I'll have a go at helping you out here.

My go-to solution for doing things like this is the canvas api, you can definitely plot what ever you want on it.

So, here goes..... hope it helps!

console.log("Plotted!"); // check we're connected to html file!
// get the canvas element from the doc
const canvas = document.getElementById("canvas");

// create the canvas context
//a context object includes information about colors, line widths, fonts, and other graphic parameters that can be drawn on a canvas.
const ctx = canvas.getContext("2d");
// set the colour of the canvas background
canvas.style.backgroundColor = "#999";

// define your orgin long/lat = 0 at center for instance
let oX = canvas.width / 2;
let oY = canvas.height / 2;

// let's plot the oX/oY axis
//a. Set the line style options
ctx.strokeStyle = "#aaf";
ctx.lineWidth = 3;

//b. Draw the x axis line
ctx.beginPath();
ctx.moveTo(0, oY); // set start point of line
ctx.lineTo(oX * 2, oY); // end point of line
ctx.stroke(); // draw it

//c. Draw the y axis line
ctx.beginPath();
ctx.moveTo(oX, 0); // set start point of line
ctx.lineTo(oX, oY * 2); // end point of line
ctx.stroke(); // draw it

// plot your coords
// I'm using the canvas api's rectangle method to
// draw a rectangle of the point we want to plot
// for convenience!

// convenience vars for our plot point's width/height
let ppW = 10,
  ppH = 10;

// and then it's useful to to have the center points!
let ppwCenter = ppW / 2,
  pphCenter = ppH / 2;

//Set the line and fill style options
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
ctx.fillStyle = "rgba(128, 0, 0, 0.25)";

//Draw the rectangle
ctx.beginPath();
ctx.rect(oX - ppwCenter, oY - pphCenter, ppW, ppH); // rect(x, y, width, height)
ctx.stroke();
ctx.fill();

// plot another point in the middle of the top right quadrant
//Set the line and fill style options
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
ctx.fillStyle = "rgba(0, 0, 255, 0.25)";

// vars for your plot point coords, long/lat
let x, y;

// ****** Plotting With Decimal Degrees ****** \\
//your plot points could be defined as oX +/- something
// it's up to you to define the resolution of your graph
x = oX * 0.5; // half of the quadrant's width
y = oY * 0.5; // half of the quadrant's height

//Draw the rectangle
ctx.beginPath();
ctx.rect(oX - ppwCenter + x, oY - pphCenter - y, 10, 10); // rect(x, y, width, height)
ctx.stroke();
ctx.fill();
console.log(oX, x, y);

// So if you have your long/lat coords in decimal degrees
// you could simply plot
x = 30.6789; // logitude in decimal deg
y = 15.23456 * -1; // latitude in decimal deg

//Set the line and fill style options
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
ctx.fillStyle = "rgba(255, 0, 255, 0.5)";

//Draw the rectangle
ctx.beginPath();
ctx.rect(oX - ppwCenter + x, oY - pphCenter + y, 10, 10); // rect(x, y, width, height)
ctx.stroke();
ctx.fill();

<canvas id="canvas"></canvas>

edit: there's a link that may be helpful in converting longitude/latitude to Cartesian coords

here's a version using a background image:

// make the canvas element and add it to the DOM
let canvas = document.createElement("canvas");
canvas.width = 360;
canvas.height = 180;
canvas.style.border = "1px solid black";
canvas.style.backgroundColor = "white";
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");

// set the colour of the canvas background
canvas.style.backgroundColor = "#999";
canvas.width = 360; // 360deg
canvas.height = 180;

// declare var to hold our chart/background
let worldImg;

let loadImg = new Promise(() => {
  //Load an image
  worldImg = new Image();
  worldImg.addEventListener("load", loadHandler, false);
  worldImg.src =
    "https://stuartcodes.000webhostapp.com/pexels-pixabay-41949.png";
  console.log(worldImg);
});

//The loadHandler is called when the image has loaded
function loadHandler() {
  console.log("OK");

  // draw the image that we want as the background
  ctx.drawImage(worldImg, 0, 0);

  // then draw everything else

  // define your orgin lat'/long' = 0 at center for instance
  let oX = canvas.width / 2;
  let oY = canvas.height / 2;

  // let's plot the oX/oY axis
  //a. Set the line style options
  ctx.strokeStyle = "#fff";
  ctx.lineWidth = 0.5;

  //b. Draw the x axis line
  ctx.beginPath();
  ctx.moveTo(0, oY); // set start point of line
  ctx.lineTo(oX * 2, oY); // end point of line
  ctx.stroke(); // draw it

  //c. Draw the y axis line
  ctx.beginPath();
  ctx.moveTo(oX, 0); // set start point of line
  ctx.lineTo(oX, oY * 2); // end point of line
  ctx.stroke(); // draw it

  // plot your coords
  // I'm using the canvas api's rectangle method to
  // draw a rectangle of the point we want to plot
  // for convenience!

  // convenience vars for our plot point's width/height
  let ppW = 10,
    ppH = 10;

  // and then it's useful to to have the center points!
  let ppwCenter = ppW / 2,
    pphCenter = ppH / 2;

  //Set the line and fill style options
  ctx.strokeStyle = "black";
  ctx.lineWidth = 1;
  ctx.fillStyle = "rgba(128, 0, 0, 0.75)";

  //Draw the rectangle
  ctx.beginPath();
  ctx.rect(oX - ppwCenter, oY - pphCenter, ppW, ppH); // rect(x, y, width, height)
  ctx.stroke();
  ctx.fill();

  // plot another point in the middle of the top right quadrant
  //Set the line and fill style options
  ctx.strokeStyle = "black";
  ctx.lineWidth = 1;
  ctx.fillStyle = "rgba(0, 0, 255, 0.75)";

  // vars for your plot point coords, long/lat
  let x, y;

  // ****** Ploting With Decimal Degrees ****** \\
  //your plot points could be defined as oX +/- something
  // it's up to you to define the resolution of your graph
  x = oX * 0.5; // half of the quadrant's width
  y = oY * 0.5; // half of the quadrant's height

  //Draw the rectangle
  ctx.beginPath();
  ctx.rect(oX - ppwCenter + x, oY - pphCenter - y, 10, 10); // rect(x, y, width, height)
  ctx.stroke();
  ctx.fill();
  console.log(oX, x, y);

  // So if you have your long/lat coords in decimal degrees

  /*  https://www.latlong.net/degrees-minutes-seconds-to-decimal-degrees

  Decimal Degrees = degrees + (minutes/60) + (seconds/3600)

  DD = d + (min/60) + (sec/3600)
  */
  
  // you could simply plot
  x = 30.6789; // longitude in decimal deg
  // y = -1 * number is a correction for the canvas
  // so that negative numbers fall south of the equator
  y = -1 * 15.23456; // latitude in decimal deg

  //Set the line and fill style options
  ctx.strokeStyle = "black";
  ctx.lineWidth = 1;
  ctx.fillStyle = "rgba(255, 0, 255, 0.75)";

  //Draw the rectangle
  ctx.beginPath();
  ctx.rect(oX - ppwCenter + x, oY - pphCenter + y, 10, 10); // rect(x, y, width, height)
  ctx.stroke();
  ctx.fill();
}

Translating latitude and longitude into x,y grid on webpage

1 Answers1