You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, defaultCity = "Unknown Location", hudColor = "#00FF00") {
// Create an interactive container for our Tool
const container = document.createElement('div');
container.style.position = 'relative';
container.style.display = 'inline-block';
container.style.fontFamily = 'monospace';
container.style.boxShadow = '0 4px 8px rgba(0,0,0,0.3)';
container.style.borderRadius = '4px';
container.style.overflow = 'hidden';
// Create the canvas map/image element
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Scale dimensions keeping aspect ratio (max 800px width)
const MAX_WIDTH = 800;
let width = originalImg.width;
let height = originalImg.height;
if (width > MAX_WIDTH) {
height = (MAX_WIDTH / width) * height;
width = MAX_WIDTH;
}
canvas.width = width;
canvas.height = height;
canvas.style.cursor = 'crosshair';
canvas.style.display = 'block';
container.appendChild(canvas);
// Provide a list of cities for the "Identify & Pick" simulation
const cities = [
"Tokyo, Japan", "New York, USA", "London, UK", "Paris, France",
"Sydney, Australia", "Rio de Janeiro, Brazil", "Cairo, Egypt",
"Mumbai, India", "Cape Town, South Africa", "Moscow, Russia",
"Shanghai, China", "Berlin, Germany", "Rome, Italy", "Toronto, Canada",
"Dubai, UAE", "Seoul, South Korea", "Istanbul, Turkey", "Mexico City, Mexico"
];
let currentCity = defaultCity;
let currentX = null;
let currentY = null;
// Function to render the UI on the canvas
function drawHUD() {
// Clear and draw the original image
ctx.clearRect(0, 0, width, height);
ctx.drawImage(originalImg, 0, 0, width, height);
// Add a slight dark tint for better HUD visibility
ctx.fillStyle = 'rgba(0, 0, 0, 0.15)';
ctx.fillRect(0, 0, width, height);
// Draw Corner Brackets to give it a "Tool / Scanner" vibe
ctx.strokeStyle = hudColor;
ctx.lineWidth = 3;
const bracketSize = 25;
const padding = 15;
// Top-Left
ctx.beginPath(); ctx.moveTo(padding, padding + bracketSize); ctx.lineTo(padding, padding); ctx.lineTo(padding + bracketSize, padding); ctx.stroke();
// Top-Right
ctx.beginPath(); ctx.moveTo(width - padding - bracketSize, padding); ctx.lineTo(width - padding, padding); ctx.lineTo(width - padding, padding + bracketSize); ctx.stroke();
// Bottom-Left
ctx.beginPath(); ctx.moveTo(padding, height - padding - bracketSize); ctx.lineTo(padding, height - padding); ctx.lineTo(padding + bracketSize, height - padding); ctx.stroke();
// Bottom-Right
ctx.beginPath(); ctx.moveTo(width - padding - bracketSize, height - padding); ctx.lineTo(width - padding, height - padding); ctx.lineTo(width - padding, height - padding - bracketSize); ctx.stroke();
// Draw selection reticle and crosshairs if user interacted / "Picked"
if (currentX !== null && currentY !== null) {
// Full span crosshairs
ctx.globalAlpha = 0.3;
ctx.lineWidth = 1;
ctx.beginPath(); ctx.moveTo(currentX, 0); ctx.lineTo(currentX, height); ctx.stroke();
ctx.beginPath(); ctx.moveTo(0, currentY); ctx.lineTo(width, currentY); ctx.stroke();
ctx.globalAlpha = 1.0;
// Center target icon
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(currentX, currentY, 12, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(currentX, currentY, 3, 0, 2 * Math.PI);
ctx.fillStyle = hudColor;
ctx.fill();
// Outer dashed ring
ctx.beginPath();
ctx.arc(currentX, currentY, 22, 0, 2 * Math.PI);
ctx.setLineDash([4, 4]);
ctx.stroke();
ctx.setLineDash([]); // Reset line dash
}
// Render Informational UI Panel
const panelWidth = 280;
const panelHeight = 90;
const panelX = 25;
const panelY = height - panelHeight - 25;
// Panel background
ctx.fillStyle = 'rgba(10, 15, 10, 0.8)';
ctx.fillRect(panelX, panelY, panelWidth, panelHeight);
ctx.strokeStyle = hudColor;
ctx.lineWidth = 1;
ctx.strokeRect(panelX, panelY, panelWidth, panelHeight);
// Panel Text
ctx.fillStyle = hudColor;
ctx.textBaseline = 'top';
ctx.textAlign = 'left';
ctx.font = 'bold 16px monospace';
ctx.fillText("CITY IDENTIFIER TOOL", panelX + 15, panelY + 12);
// Calculate logical lat/lon based on pixel position
let latStr = "WAITING...";
let lonStr = "WAITING...";
if (currentX !== null && currentY !== null) {
const lat = ((height / 2 - currentY) / height * 180).toFixed(4);
const lon = ((currentX - width / 2) / width * 360).toFixed(4);
latStr = lat >= 0 ? `${lat}° N` : `${Math.abs(lat)}° S`;
lonStr = lon >= 0 ? `${lon}° E` : `${Math.abs(lon)}° W`;
}
ctx.font = '13px monospace';
ctx.fillText(`LOCATION : ${currentCity}`, panelX + 15, panelY + 40);
ctx.fillText(`LATITUDE : ${latStr}`, panelX + 15, panelY + 58);
ctx.fillText(`LONGITUDE: ${lonStr}`, panelX + 15, panelY + 74);
// First load instructional prompt
if (currentX === null) {
ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
ctx.fillRect(width / 2 - 150, height / 2 - 25, 300, 50);
ctx.fillStyle = hudColor;
ctx.font = 'bold 15px monospace';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText("CLICK ON IMAGE TO PICK & IDENTIFY", width / 2, height / 2);
}
}
// Initialize first draw
drawHUD();
// Event listener for user "Pick" operation
canvas.addEventListener('click', (e) => {
const rect = canvas.getBoundingClientRect();
currentX = e.clientX - rect.left;
currentY = e.clientY - rect.top;
// Generate a pseudo-random city identifier based on the deterministic click coordinates
const locationHash = Math.floor(currentX * 13 + currentY * 7);
currentCity = cities[locationHash % cities.length];
// Redraw to update HUD with new picked coordinates and city
drawHUD();
});
return container;
}Apply Changes
