static/prediction.js

function showArrowAndTooltip(lat, lng) {
    // Example: Convert lat/lng to x/y (replace with your own logic)
    // For demo, just randomize position
    const map = document.getElementById('map-container');
    const width = map.offsetWidth;
    const height = map.offsetHeight;

    // TODO: Replace with real conversion based on your map's bounds
    const x = Math.random() * width;
    const y = Math.random() * height;

    // Remove old arrow/tooltip if any
    const oldArrow = document.getElementById('arrow');
    if (oldArrow) oldArrow.remove();
    const oldTooltip = document.getElementById('tooltip');
    if (oldTooltip) oldTooltip.remove();

    // Create arrow
    const arrow = document.createElement('div');
    arrow.id = 'arrow';
    arrow.style.position = 'absolute';
    arrow.style.left = `${x}px`;
    arrow.style.top = `${y}px`;
    arrow.style.width = '0';
    arrow.style.height = '0';
    arrow.style.borderLeft = '10px solid transparent';
    arrow.style.borderRight = '10px solid transparent';
    arrow.style.borderBottom = '20px solid red';
    arrow.style.transform = 'translate(-50%, -100%)';
    map.appendChild(arrow);

    // Create tooltip
    const tooltip = document.createElement('div');
    tooltip.id = 'tooltip';
    tooltip.style.position = 'absolute';
    tooltip.style.left = `${x}px`;
    tooltip.style.top = `${y}px`;
    tooltip.style.background = 'white';
    tooltip.style.border = '1px solid #333';
    tooltip.style.padding = '4px 8px';
    tooltip.style.borderRadius = '4px';
    tooltip.style.transform = 'translate(-50%, 10px)';
    tooltip.innerText = `Lat: ${lat}, Lng: ${lng}`;
    map.appendChild(tooltip);
}

// Example: Hook up to your Predict button
document.addEventListener('DOMContentLoaded', function() {
    const predictBtn = document.getElementById('predict-btn');
    predictBtn.addEventListener('click', function(e) {
        e.preventDefault();
        const lat = document.getElementById('latitude-input').value;
        const lng = document.getElementById('longitude-input').value;
        showArrowAndTooltip(lat, lng);
    });
});