freemoto/app/web/static/main.js

// Center on a default point
var map = L.map('map', { zoomControl: false, doubleClickZoom: false }).setView([53.866237, 10.676289], 18);

// Add OSM tiles
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

var userIcon = L.icon({
  iconUrl: '/maps-arrow.svg',  // Add a motorcycle icon to your static folder
  iconSize: [40, 40]
});

// Get users location
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        var lat = position.coords.latitude;
        var lon = position.coords.longitude;
        map.setView([lat, lon], 14);
        L.marker([lat, lon], {icon: userIcon}).addTo(map).bindPopup('You are here!');
    });
}

// Custom Bootstrap zoom controls
document.addEventListener('DOMContentLoaded', function() {
    var zoomInBtn = document.getElementById('zoomInBtn');
    var zoomOutBtn = document.getElementById('zoomOutBtn');
    var themeToggle = document.getElementById('themeToggle');
    var clearRouteBtn = document.getElementById('clearRouteBtn');
    var twistiness = document.getElementById('twistiness');
    var twistinessValue = document.getElementById('twistinessValue');
    var highwayPref = document.getElementById('highwayPref');
    var highwayPrefValue = document.getElementById('highwayPrefValue');
    var exportModeSel = document.getElementById('exportMode');
    var voiceToggle = document.getElementById('voiceToggle');
    var roundTripToggle = document.getElementById('roundTripToggle');
    var roundTripKm = document.getElementById('roundTripKm');
    var roundTripBtn = document.getElementById('roundTripBtn');
    var roundTripNoRepeat = document.getElementById('roundTripNoRepeat');
    if (zoomInBtn && zoomOutBtn) {
        zoomInBtn.addEventListener('click', function() {
            map.zoomIn();
        });
        zoomOutBtn.addEventListener('click', function() {
            map.zoomOut();
        });
    }

    // Theme toggle with persistence (Dracula-like)
    function applyTheme(theme) {
        if (theme === 'dark') {
            document.documentElement.setAttribute('data-theme', 'dark');
            if (themeToggle) themeToggle.textContent = '☀️';
        } else {
            document.documentElement.removeAttribute('data-theme');
            if (themeToggle) themeToggle.textContent = '🌙';
        }
    }
    var savedTheme = localStorage.getItem('freemoto-theme');
    if (!savedTheme || savedTheme === 'auto') {
        var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
        applyTheme(prefersDark ? 'dark' : 'light');
        if (!savedTheme) localStorage.setItem('freemoto-theme', 'auto');
    } else {
        applyTheme(savedTheme);
    }
    if (themeToggle) {
        themeToggle.addEventListener('click', function() {
            var next = (localStorage.getItem('freemoto-theme') || 'light') === 'dark' ? 'light' : 'dark';
            localStorage.setItem('freemoto-theme', next);
            applyTheme(next);
        });
    }

    // Clear route button
    if (clearRouteBtn && typeof window.resetMarkers === 'function') {
        clearRouteBtn.addEventListener('click', function() {
            window.resetMarkers();
        });
    }

    // Twistiness slider
    function applyTwistiness(val) {
        if (twistinessValue) twistinessValue.textContent = String(val);
        localStorage.setItem('freemoto-twistiness', String(val));
    }
    var savedTwist = parseInt(localStorage.getItem('freemoto-twistiness') || '50', 10);
    if (!isNaN(savedTwist) && twistiness) {
        twistiness.value = savedTwist;
        applyTwistiness(savedTwist);
    }
    if (twistiness) {
        twistiness.addEventListener('input', function(e){
            var v = parseInt(e.target.value, 10);
            applyTwistiness(v);
        });
        twistiness.addEventListener('change', function(){
            if (typeof window.recalculateRoute === 'function') {
                window.recalculateRoute();
            }
        });
    }

    // Highway preference slider (0..100 -> 0..1 use_highways)
    function applyHighwayPref(val) {
        if (highwayPrefValue) highwayPrefValue.textContent = String(val);
        localStorage.setItem('freemoto-highways', String(val));
    }
    var savedHigh = parseInt(localStorage.getItem('freemoto-highways') || '50', 10);
    if (!isNaN(savedHigh) && highwayPref) {
        highwayPref.value = savedHigh;
        applyHighwayPref(savedHigh);
    }
    if (highwayPref) {
        highwayPref.addEventListener('input', function(e){
            var v = parseInt(e.target.value, 10);
            applyHighwayPref(v);
        });
        highwayPref.addEventListener('change', function(){
            if (typeof window.recalculateRoute === 'function') {
                window.recalculateRoute();
            }
        });
    }

    // Persist export mode
    if (exportModeSel) {
        var savedMode = localStorage.getItem('freemoto-export-mode') || 'both';
        exportModeSel.value = savedMode;
        exportModeSel.addEventListener('change', function(){
            localStorage.setItem('freemoto-export-mode', exportModeSel.value);
        });
    }

    // Persist voice toggle
    if (voiceToggle) {
        var savedVoice = localStorage.getItem('freemoto-voice') === '1';
        voiceToggle.checked = savedVoice;
        voiceToggle.addEventListener('change', function(){
            localStorage.setItem('freemoto-voice', voiceToggle.checked ? '1' : '0');
        });
    }

    // Round Trip settings persistence
    if (roundTripToggle) {
        var savedRT = localStorage.getItem('freemoto-roundtrip') === '1';
        roundTripToggle.checked = savedRT;
        roundTripToggle.addEventListener('change', function(){
            localStorage.setItem('freemoto-roundtrip', roundTripToggle.checked ? '1' : '0');
        });
    }
    if (roundTripKm) {
        var savedKm = parseInt(localStorage.getItem('freemoto-roundtrip-km') || '100', 10);
        if (!isNaN(savedKm)) roundTripKm.value = savedKm;
        roundTripKm.addEventListener('change', function(){
            var v = parseInt(roundTripKm.value, 10);
            if (!isNaN(v)) localStorage.setItem('freemoto-roundtrip-km', String(v));
        });
    }
    if (roundTripBtn) {
        roundTripBtn.addEventListener('click', function(){
            if (typeof window.createRoundTrip === 'function') {
                window.createRoundTrip();
            }
        });
    }

    if (roundTripNoRepeat) {
        var savedNR = localStorage.getItem('freemoto-roundtrip-norepeat') === '1';
        roundTripNoRepeat.checked = savedNR;
        roundTripNoRepeat.addEventListener('change', function(){
            localStorage.setItem('freemoto-roundtrip-norepeat', roundTripNoRepeat.checked ? '1' : '0');
        });
    }
});