maplibre-preview 0.0.2 → 1.0.0

data/lib/maplibre-preview/views/map.slim

@@ -0,0 +1,829 @@
+ruby:
+  style_name = params[:style]
+  external_style_url = params[:style_url]
+  style_url = external_style_url || (style_name ? "#{request.base_url}/styles/#{style_name}" : options[:style_url])
+
+#loading-indicator
+  .loading-progress
+    .loading-text Loading map...
+    .progress-bar
+      .progress-fill
+
+- if style_name || external_style_url || options[:style_url]
+  .layer-controls
+    .mode-switcher
+      button.mode-button.active id="mode-filters" onclick="switchMode(this, 'filters')" Filters
+      button.mode-button id="mode-layers" onclick="switchMode(this, 'layers')" Layers
+    button.control-button onclick="toggleHoverMode()" id="hover-mode-btn" Hover Mode
+    button.control-button onclick="toggleProfileMode()" id="profile-mode-btn" style="display: none;" Elevation Profile
+
+    #filters-panel.control-panel.active
+      .control-panel-header
+        button.control-button onclick="toggleAllFilters()" Toggle All Filters
+        button.control-button onclick="toggleBasemap()" Show/Hide Basemap
+      .control-panel-content
+        #filter-buttons
+
+    #layers-panel.control-panel
+      .control-panel-header
+        button.control-button onclick="toggleAllLayers()" Toggle All Layers
+        button.control-button onclick="toggleBasemap()" Show/Hide Basemap
+      .control-panel-content
+        #layer-buttons
+
+#map-container
+  #map.map-layer data-style-url="#{style_url}"
+
+  #performance-panel.performance-overlay
+    button.performance-toggle onclick="togglePerformancePanel()" ×
+    .performance-content
+      .metric-row
+        .metric
+          span.metric-label FPS:
+          span.metric-value#fps-value 0
+        .metric
+          span.metric-label Frame:
+          span.metric-value#frame-time-value 0ms
+        .metric
+          span.metric-label Memory:
+          span.metric-value#memory-usage-value 0MB
+        .metric
+          span.metric-label Zoom:
+          span.metric-value#zoom-level-value 0
+      .metric-row
+        .metric
+          span.metric-label Tiles:
+          span.metric-value#tiles-loaded-value 0
+        .metric
+          span.metric-label Loading:
+          span.metric-value#tiles-loading-value 0
+        .metric
+          span.metric-label Layers:
+          span.metric-value#layers-active-value 0
+      .metric-row#terrain-row style="display: none;"
+        .metric
+          span.metric-label Terrain:
+          span.metric-value#terrain-status-value -
+
+javascript:
+    const mapEl = document.getElementById('map');
+    const style_url = mapEl?.dataset?.styleUrl || null;
+    let showBasemapFilters = true, showBasemapLayers = true, currentMode = 'filters';
+    let hoverMode = 'click';
+    let layerStates = {};
+    let map = null;
+    let styleLoaded = false, resourcesLoaded = 0, totalResources = 0;
+    let tilesLoaded = 0, tilesTotal = 0;
+    let currentStyle = null;
+    const layerIdToDomId = {};
+    let filters = null;
+    let profileMode = false;
+    let profilePoints = [];
+    let profileLine = null;
+    let currentProfile = null;
+    let contourManager = null;
+
+    const toDomId = (prefix, id) => `${prefix}-${String(id).replace(/[^a-zA-Z0-9_-]/g, '_')}`;
+
+    const showLoading = () => document.getElementById('loading-indicator').style.display = 'block';
+    const hideLoading = () => document.getElementById('loading-indicator').style.display = 'none';
+
+    const updateLoadingProgress = () => {
+        let progress = 0;
+        let loadingText = 'Loading map...';
+
+        if (totalResources > 0) {
+            const resourceProgress = Math.round((resourcesLoaded / totalResources) * 50);
+            progress = resourceProgress;
+            loadingText = `Loading resources... ${resourceProgress * 2}%`;
+        }
+
+        if (map?.getStyle()?.sources) {
+            const sources = Object.keys(map.getStyle().sources);
+            if (sources.length > 0) {
+                const tileProgress = Math.round((tilesLoaded || 0) / sources.length * 50);
+                progress = Math.min(100, (totalResources > 0 ? 50 : 0) + tileProgress);
+                loadingText = `Loading tiles... ${progress}%`;
+            }
+        }
+
+        document.querySelector('.loading-text').textContent = loadingText;
+        document.querySelector('.progress-fill').style.width = `${progress}%`;
+    };
+
+    const switchMode = (arg1, arg2) => {
+        const isStringArg = typeof arg1 === 'string';
+        const mode = isStringArg ? arg1 : arg2;
+        const target = isStringArg ? null : (arg1?.currentTarget || arg1);
+        currentMode = mode;
+
+        document.querySelectorAll('.mode-button').forEach(btn => btn.classList.remove('active'));
+        (target || document.getElementById(`mode-${mode}`))?.classList.add('active');
+
+        document.getElementById('filters-panel').classList.toggle('active', mode === 'filters');
+        document.getElementById('layers-panel').classList.toggle('active', mode === 'layers');
+
+        mode === 'filters' ? filters?.setMode(mode) : applyLayerMode();
+        applyBasemapVisibility();
+        updateBasemapButton();
+    };
+
+    const applyLayerMode = () => {
+        Object.keys(layerStates).forEach(layerId => {
+            if (map.getLayer(layerId)) {
+                map.setLayoutProperty(layerId, 'visibility', layerStates[layerId] ? 'visible' : 'none');
+            }
+        });
+    };
+
+    const applyBasemapVisibility = () => {
+        const isVisible = currentMode === 'filters' ? showBasemapFilters : showBasemapLayers;
+        map?.getLayer?.('preview-basemap-layer') && map.setLayoutProperty('preview-basemap-layer', 'visibility', isVisible ? 'visible' : 'none');
+    };
+
+    const checkStyleResources = (style) => {
+        totalResources = 0;
+        resourcesLoaded = 0;
+        const promises = [];
+
+        if (style.glyphs) {
+            totalResources += 1;
+            promises.push(Promise.resolve().then(() => {
+                resourcesLoaded++;
+                updateLoadingProgress();
+            }));
+        }
+
+        if (totalResources > 0) {
+            showLoading();
+            updateLoadingProgress();
+            Promise.all(promises).then(() => {
+                styleLoaded = true;
+            });
+        }
+    };
+
+    const createMap = (container, style) => new maplibregl.Map({
+        container,
+        style,
+        center: [35.15, 47.41],
+        zoom: 2,
+        attributionControl: false,
+        validateStyle: false,
+        antialias: true
+    });
+
+    const addBasemapToStyle = (originalStyle) => {
+        const modifiedStyle = JSON.parse(JSON.stringify(originalStyle));
+
+        modifiedStyle.sources = modifiedStyle.sources || {};
+        modifiedStyle.sources['preview-basemap'] = {
+            type: 'raster',
+            tiles: [
+                'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
+                'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png',
+                'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png'
+            ],
+            tileSize: 256,
+            maxzoom: 19,
+            attribution: '© OpenStreetMap contributors'
+        };
+
+        modifiedStyle.layers = modifiedStyle.layers || [];
+        modifiedStyle.layers.unshift({
+            id: 'preview-basemap-layer',
+            type: 'raster',
+            source: 'preview-basemap',
+            layout: {visibility: 'visible'},
+            paint: {'raster-opacity': 0.8, 'raster-fade-duration': 300}
+        });
+
+        return modifiedStyle;
+    };
+
+    const popupFeature = (features, e, popup) => {
+        const tt = (tooltip, feat) => tooltip?.replace(/\{([^}]+)\}/g, (match, prop) => {
+            let value = feat;
+            for (const p of prop.split('.')) {
+                value = value?.[p];
+            }
+            return typeof value === 'object' ? JSON.stringify(value, null, 2) : (value || '');
+        });
+
+        const tooltips = features.map((feat) =>
+            tt(feat.layer.metadata?.tooltip, feat) ||
+            tt(`<pre>"id": {id},\n"source": {source},\n"source-layer": {sourceLayer},\n"properties": {properties}</pre>`, feat)
+        );
+        popup.setLngLat(e.lngLat).setHTML(tooltips.join('<br>')).addTo(map);
+    };
+
+    const initializeMap = () => {
+        showLoading();
+        const emptyStyle = {version: 8, sources: {}, layers: []};
+
+        style_url
+            ? fetch(style_url)
+                .then(response => response.json())
+                .then(originalStyle => createMapWithStyle(addBasemapToStyle(originalStyle)))
+                .catch(error => {
+                    console.error('Style loading error:', error);
+                    createMapWithStyle(addBasemapToStyle(emptyStyle));
+                })
+            : createMapWithStyle(addBasemapToStyle(emptyStyle));
+    };
+
+    const createMapWithStyle = (style) => {
+        map = createMap('map', style);
+        setupMapEvents();
+    };
+
+    const setupMapEvents = () => {
+        map.addControl(new maplibregl.NavigationControl({
+            visualizePitch: true,
+            showZoom: true,
+            showCompass: true
+        }));
+
+        map.addControl(new maplibregl.ScaleControl({
+            maxWidth: 100,
+            unit: 'metric'
+        }));
+        map.on('error', (e) => console.error('[MapLibre ERROR]', e?.error || e));
+
+        map.on('style.load', () => {
+            currentStyle = map.getStyle();
+            currentStyle && initializeFiltersAndLayers();
+            map.once('idle', onStyleReady);
+            setupMapInteractions();
+            setupPerformanceMonitoring();
+        });
+    };
+
+    const initializeFiltersAndLayers = () => {
+        try {
+            checkStyleResources(currentStyle);
+            filters = new Filters({
+                map,
+                container: '#filter-buttons',
+                element_template: (title) => `<div class="element">${title}</div>`,
+                group_template: (title) => `<div class="group">${title}</div>`
+            });
+            filters.init();
+            createLayerButtons();
+        } catch (e) {
+            console.warn('Filter initialization failed:', e);
+        }
+    };
+
+    const initializeContourManager = () => {
+        contourManager = new ContourManager({map});
+        contourManager.init();
+    };
+
+    const onStyleReady = () => {
+        const hasTerrain = currentStyle?.terrain;
+        const projectionType = hasTerrain ? 'mercator' : 'globe';
+
+        try {
+            map.setProjection({type: projectionType});
+        } catch (e) {
+            console.warn('Projection setting failed:', e);
+        }
+
+        try {
+            map.addControl(new maplibregl.GlobeControl(), 'top-right');
+        } catch (e) {
+            console.warn('GlobeControl failed:', e);
+        }
+
+        if (currentStyle?.terrain) {
+            const terrainSourceName = currentStyle.terrain.source;
+            map.addControl(new maplibregl.TerrainControl({
+                source: terrainSourceName
+            }), 'top-right');
+
+            initializeContourManager();
+        }
+
+        updateTerrainIndicator();
+    };
+
+    const setupMapInteractions = () => {
+        const popup = new maplibregl.Popup({closeButton: false, closeOnClick: false});
+
+        map.on('click', function (e) {
+            if (profileMode) {
+                handleProfileClick(e);
+                return;
+            }
+
+            const features = this.queryRenderedFeatures(e.point);
+            features.length > 0 && hoverMode === 'click' && popupFeature(features, e, popup);
+            features.length > 0 && console.log('Clicked feature:', features[0]);
+
+            if (hoverMode === 'click' && currentStyle?.terrain) {
+                const elevation = map.queryTerrainElevation([e.lngLat.lng, e.lngLat.lat]);
+                if (elevation != null) {
+                    elevationTooltip && elevationTooltip.style.display === 'block'
+                        ? hideElevationTooltip()
+                        : showElevationTooltip(e.originalEvent, elevation);
+                }
+            }
+        });
+
+        let timeout, point;
+        map.on('mousemove', (e) => {
+            if (hoverMode !== 'hover') {
+                map.getCanvas().style.cursor = '';
+                popup.remove();
+                profileMode && profilePoints.length === 1 && updateTemporaryLine(e.lngLat);
+                return;
+            }
+
+            clearTimeout(timeout);
+            const features = map.queryRenderedFeatures(e.point);
+            const hasFeatures = features.length > 0;
+
+            map.getCanvas().style.cursor = hasFeatures ? 'crosshair' : '';
+            hasFeatures ? timeout = setTimeout(() => popupFeature(features, e, popup), 100) : popup.remove();
+            point?.equals(e.point) || popup.remove();
+            point = e.point.clone();
+
+            hideElevationTooltip();
+
+            if (currentStyle?.terrain) {
+                const elevation = map.queryTerrainElevation([e.lngLat.lng, e.lngLat.lat]);
+                elevation != null && showElevationTooltip(e.originalEvent, elevation);
+            }
+
+            profileMode && profilePoints.length === 1 && updateTemporaryLine(e.lngLat);
+        });
+
+        map.on('sourcedata', (e) => {
+            e.sourceId && e.isSourceLoaded && (tilesLoaded++,
+            tilesTotal === 0 && (tilesTotal = Object.keys(map.getStyle().sources).length),
+                updateLoadingProgress());
+        });
+
+        map.on('idle', () => {
+            const allLoaded = (totalResources === 0 || styleLoaded) && (tilesTotal === 0 || tilesLoaded >= tilesTotal);
+            allLoaded && hideLoading();
+        });
+
+        setTimeout(hideLoading, 10000);
+    };
+
+    const setupPerformanceMonitoring = () => {
+        [startPerformanceMonitoring, () => requestAnimationFrame(countFrame),
+            updateHoverModeButton, updateBasemapButton].forEach(fn => fn());
+    };
+
+    const toggleBasemap = () => {
+        currentMode === 'filters' ? showBasemapFilters = !showBasemapFilters : showBasemapLayers = !showBasemapLayers;
+        applyBasemapVisibility();
+        updateBasemapButton();
+    };
+
+    const updateBasemapButton = () => {
+        const isVisible = currentMode === 'filters' ? showBasemapFilters : showBasemapLayers;
+        document.querySelectorAll('button[onclick="toggleBasemap()"]').forEach(btn => {
+            btn.textContent = isVisible ? 'Hide Basemap' : 'Show Basemap';
+            btn.className = `control-button ${isVisible ? 'active' : 'inactive'}`;
+        });
+    };
+
+    const updateTerrainIndicator = () => {
+        const terrainRow = document.getElementById('terrain-row');
+        const terrainElement = document.getElementById('terrain-status-value');
+        const profileBtn = document.getElementById('profile-mode-btn');
+
+        if (!terrainRow || !terrainElement) return;
+
+        const hasTerrain = currentStyle?.terrain;
+        if (hasTerrain) {
+            terrainRow.style.display = 'flex';
+            terrainElement.textContent = 'is detected';
+            terrainElement.className = 'metric-value success';
+            profileBtn && (profileBtn.style.display = 'block');
+        } else {
+            terrainRow.style.display = 'none';
+            profileBtn && (profileBtn.style.display = 'none');
+        }
+    };
+
+    let elevationTooltip = null;
+
+    const showElevationTooltip = (e, elevation) => {
+        if (!elevationTooltip) {
+            elevationTooltip = Object.assign(document.createElement('div'), {className: 'elevation-tooltip'});
+            document.body.appendChild(elevationTooltip);
+        }
+
+        elevationTooltip.textContent = `${elevation.toFixed(1)} m`;
+        elevationTooltip.style.left = `${e.clientX}px`;
+        elevationTooltip.style.top = `${e.clientY}px`;
+        elevationTooltip.style.display = 'block';
+    };
+
+    const hideElevationTooltip = () => {
+        elevationTooltip && (elevationTooltip.style.display = 'none');
+    };
+
+    const toggleProfileMode = () => {
+        if (!currentStyle?.terrain) return;
+
+        profileMode = !profileMode;
+        const btn = document.getElementById('profile-mode-btn');
+
+        map.getCanvas().style.cursor = profileMode ? 'crosshair' : '';
+        btn.textContent = profileMode ? 'Exit Elev. Profile' : 'Elevation Profile';
+        btn.className = `control-button ${profileMode ? 'active' : ''}`;
+        clearProfile();
+    };
+
+    const handleProfileClick = (e) => {
+        if (!currentStyle?.terrain) return;
+
+        profilePoints.push([e.lngLat.lng, e.lngLat.lat]);
+        profilePoints.length === 2 && createProfileFromPoints();
+    };
+
+    const updateTemporaryLine = (currentLngLat) => {
+        if (profilePoints.length !== 1) return;
+
+        const sourceData = {
+            type: 'Feature',
+            geometry: {
+                type: 'LineString',
+                coordinates: [profilePoints[0], [currentLngLat.lng, currentLngLat.lat]]
+            }
+        };
+
+        const source = map.getSource('temporary-line');
+        source ? source.setData(sourceData) : map.addSource('temporary-line', {type: 'geojson', data: sourceData});
+
+        !map.getLayer('temporary-line') && map.addLayer({
+            id: 'temporary-line', type: 'line', source: 'temporary-line',
+            layout: {'line-join': 'round', 'line-cap': 'round'},
+            paint: {'line-color': '#ff0000', 'line-width': 2, 'line-opacity': 0.7}
+        });
+    };
+
+    const createProfileFromPoints = () => {
+        if (profilePoints.length !== 2) return;
+
+        map.getLayer('temporary-line') && (map.removeLayer('temporary-line'), map.removeSource('temporary-line'));
+
+        const [start, end] = profilePoints.map(([lng, lat]) => ({lng, lat}));
+        currentProfile = createElevationProfile(start, end, 300);
+
+        drawProfileLine(profilePoints);
+        showProfileOnMap(currentProfile);
+        profilePoints = [];
+    };
+
+    const createElevationProfile = (start, end, numPoints) => {
+        if (!currentStyle?.terrain) return [];
+
+        return Array.from({length: numPoints + 1}, (_, i) => {
+            const t = i / numPoints;
+            const lng = start.lng + (end.lng - start.lng) * t;
+            const lat = start.lat + (end.lat - start.lat) * t;
+            const elevation = map.queryTerrainElevation([lng, lat]);
+            const distance = calculateDistance([start.lng, start.lat], [lng, lat]);
+
+            return {distance, elevation: elevation || 0, coordinates: [lng, lat]};
+        });
+    };
+
+    const calculateDistance = (p1, p2) => {
+        const R = 6371000;
+        const [dLat, dLng] = [(p2[1] - p1[1]) * Math.PI / 180, (p2[0] - p1[0]) * Math.PI / 180];
+        const a = Math.sin(dLat / 2) ** 2 + Math.cos(p1[1] * Math.PI / 180) * Math.cos(p2[1] * Math.PI / 180) * Math.sin(dLng / 2) ** 2;
+        return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+    };
+
+    const drawProfileLine = (points) => {
+        profileLine && (map.removeLayer('profile-line'), map.removeSource('profile-line'), profileLine = null);
+
+        const sourceData = {type: 'Feature', geometry: {type: 'LineString', coordinates: points}};
+        const source = map.getSource('profile-line');
+        source ? source.setData(sourceData) : map.addSource('profile-line', {type: 'geojson', data: sourceData});
+
+        !map.getLayer('profile-line') && map.addLayer({
+            id: 'profile-line', type: 'line', source: 'profile-line',
+            layout: {'line-join': 'round', 'line-cap': 'round'},
+            paint: {'line-color': '#ff0000', 'line-width': 3}
+        });
+    };
+
+    const showProfileOnMap = (profile) => {
+        document.getElementById('profile-overlay')?.remove();
+
+        const [min, max, distance] = [
+            d3.min(profile, p => p.elevation),
+            d3.max(profile, p => p.elevation),
+            profile[profile.length - 1].distance / 1000
+        ];
+
+        const overlay = Object.assign(document.createElement('div'), {
+            id: 'profile-overlay',
+            className: 'profile-overlay'
+        });
+
+        const header = Object.assign(document.createElement('div'), {className: 'profile-header'});
+        const title = Object.assign(document.createElement('span'), {
+            className: 'profile-title',
+            textContent: 'Elevation Profile'
+        });
+        const closeBtn = Object.assign(document.createElement('button'), {
+            className: 'profile-close',
+            textContent: '×',
+            onclick: hideProfile
+        });
+        [title, closeBtn].forEach(el => header.appendChild(el));
+
+        const stats = Object.assign(document.createElement('div'), {className: 'profile-stats'});
+        const distanceSpan = Object.assign(document.createElement('span'), {textContent: `Distance: ${distance.toFixed(2)} km`});
+        const elevationSpan = Object.assign(document.createElement('span'), {textContent: `Min: ${min.toFixed(0)}m | Max: ${max.toFixed(0)}m`});
+        [distanceSpan, elevationSpan].forEach(el => stats.appendChild(el));
+
+        const chart = Object.assign(document.createElement('div'), {className: 'profile-chart'});
+        chart.innerHTML = '<svg id="profile-svg" width="100%" height="150"></svg>';
+
+        [header, stats, chart].forEach(el => overlay.appendChild(el));
+        document.getElementById('map-container').appendChild(overlay);
+        setTimeout(() => drawSimpleProfileChart(profile), 10);
+    };
+
+    const drawSimpleProfileChart = (profile) => {
+        const svg = d3.select('#profile-svg').html('');
+        const containerWidth = svg.node().getBoundingClientRect().width;
+        const margin = {top: 10, right: 10, bottom: 10, left: 10};
+        const width = containerWidth - margin.left - margin.right;
+        const height = 150 - margin.top - margin.bottom;
+
+        const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);
+
+        const xScale = d3.scaleLinear().domain([0, d3.max(profile, d => d.distance)]).range([0, width]);
+        const yScale = d3.scaleLinear().domain([d3.min(profile, d => d.elevation), d3.max(profile, d => d.elevation)]).range([height, 0]);
+
+        const line = d3.line().x(d => xScale(d.distance)).y(d => yScale(d.elevation));
+        const area = d3.area().x(d => xScale(d.distance)).y0(height).y1(d => yScale(d.elevation));
+
+        g.append('path').datum(profile).attr('d', area).attr('class', 'profile-area');
+        g.append('path').datum(profile).attr('d', line).attr('class', 'profile-line');
+
+        const tooltip = g.append('g').style('display', 'none');
+        tooltip.append('line').attr('class', 'profile-tooltip-line');
+        tooltip.append('circle').attr('class', 'profile-tooltip-circle');
+        tooltip.append('text').attr('class', 'profile-tooltip-text');
+
+        g.append('rect').attr('width', width).attr('height', height).attr('fill', 'transparent')
+            .on('mousemove', function (event) {
+                const [mx] = d3.pointer(event);
+                const distance = xScale.invert(mx);
+                const closest = profile.reduce((prev, curr) => Math.abs(curr.distance - distance) < Math.abs(prev.distance - distance) ? curr : prev);
+
+                const yPos = yScale(closest.elevation);
+                tooltip.style('display', null)
+                    .attr('transform', `translate(${xScale(closest.distance)},${yPos})`);
+                tooltip.select('line').attr('y2', height - yPos);
+                tooltip.select('text')
+                    .text(`${closest.elevation.toFixed(0)}m`)
+                    .attr('dy', yPos < 30 ? '20px' : '-8px');
+
+                showMapMarker(closest.coordinates);
+            })
+            .on('mouseleave', () => {
+                tooltip.style('display', 'none');
+                hideMapMarker();
+            });
+    };
+
+    const showMapMarker = (coordinates) => {
+        const sourceData = {type: 'Feature', geometry: {type: 'Point', coordinates}};
+        const source = map.getSource('profile-marker');
+        source ? source.setData(sourceData) : map.addSource('profile-marker', {type: 'geojson', data: sourceData});
+
+        !map.getLayer('profile-marker') && map.addLayer({
+            id: 'profile-marker', type: 'circle', source: 'profile-marker',
+            paint: {
+                'circle-radius': 6,
+                'circle-color': '#ff0000',
+                'circle-stroke-width': 2,
+                'circle-stroke-color': '#ffffff'
+            }
+        });
+    };
+
+    const hideMapMarker = () => map.getLayer('profile-marker') && (map.removeLayer('profile-marker'), map.removeSource('profile-marker'));
+
+    const clearProfile = () => {
+        map.getLayer('profile-line') && (map.removeLayer('profile-line'), map.removeSource('profile-line'));
+        map.getLayer('temporary-line') && (map.removeLayer('temporary-line'), map.removeSource('temporary-line'));
+        hideMapMarker();
+        profileLine = null;
+        currentProfile = null;
+        profilePoints = [];
+        hideProfile();
+    };
+
+    const hideProfile = () => {
+        document.getElementById('profile-overlay')?.remove();
+        map.getLayer('profile-line') && (map.removeLayer('profile-line'), map.removeSource('profile-line'));
+        map.getLayer('temporary-line') && (map.removeLayer('temporary-line'), map.removeSource('temporary-line'));
+        hideMapMarker();
+    };
+
+    const toggleHoverMode = () => {
+        hoverMode = hoverMode === 'hover' ? 'click' : 'hover';
+        hideElevationTooltip();
+        updateHoverModeButton();
+    };
+
+    const updateHoverModeButton = () => {
+        const btn = document.getElementById('hover-mode-btn');
+        if (!btn) return;
+
+        const isHoverMode = hoverMode === 'hover';
+        btn.textContent = isHoverMode ? 'Click Mode' : 'Hover Mode';
+        btn.className = `control-button ${isHoverMode ? 'active' : ''}`;
+    };
+
+    const toggleAllLayers = () => {
+        if (currentMode !== 'layers') return;
+        const allVisible = Object.values(layerStates).every(state => state);
+        const newState = !allVisible;
+
+        Object.keys(layerStates).forEach(layerId => {
+            layerStates[layerId] = newState;
+            if (map.getLayer(layerId)) {
+                map.setLayoutProperty(layerId, 'visibility', newState ? 'visible' : 'none');
+            }
+        });
+
+        if (map.getLayer('preview-basemap-layer')) {
+            showBasemapLayers = newState;
+        }
+
+        updateLayerButtons();
+        updateBasemapButton();
+    };
+
+    const toggleLayer = (layerId) => {
+        if (currentMode !== 'layers') return;
+        layerStates[layerId] = !layerStates[layerId];
+
+        if (map.getLayer(layerId)) {
+            map.setLayoutProperty(layerId, 'visibility', layerStates[layerId] ? 'visible' : 'none');
+        }
+
+        if (layerId === 'preview-basemap-layer') {
+            showBasemapLayers = layerStates[layerId];
+            updateBasemapButton();
+        }
+
+        updateLayerButtons();
+    };
+
+    const updateLayerButtons = () => {
+        Object.keys(layerStates).forEach(layerId => {
+            const btnId = layerIdToDomId[layerId] || toDomId('layer', layerId);
+            const button = document.getElementById(btnId);
+            if (button) {
+                button.className = `control-button ${layerStates[layerId] ? 'active' : 'inactive'}`;
+            }
+        });
+    };
+
+    const createLayerButtons = () => {
+        if (!currentStyle?.layers) return;
+
+        const layerButtonsContainer = document.getElementById('layer-buttons');
+        if (!layerButtonsContainer) return;
+
+        currentStyle.layers.forEach(layer => {
+            const button = document.createElement('button');
+            const buttonId = toDomId('layer', layer.id);
+            button.id = buttonId;
+            layerStates[layer.id] = map.getLayoutProperty(layer.id, 'visibility') !== 'none';
+            button.className = `control-button ${layerStates[layer.id] ? 'active' : 'inactive'}`;
+            button.textContent = layer.id;
+            button.onclick = () => toggleLayer(layer.id);
+            layerButtonsContainer.appendChild(button);
+            layerIdToDomId[layer.id] = buttonId;
+        });
+    };
+
+    let fpsCounter = 0, lastFpsTime = 0, frameCount = 0;
+    let performanceMonitor = null;
+    let performancePanelVisible = true;
+
+    const togglePerformancePanel = () => {
+        const panel = document.getElementById('performance-panel');
+        performancePanelVisible = !performancePanelVisible;
+        panel.style.display = performancePanelVisible ? 'block' : 'none';
+    };
+
+    const startPerformanceMonitoring = () => {
+        if (performanceMonitor) return;
+        performanceMonitor = setInterval(updatePerformanceMetrics, 1000);
+    };
+
+    const stopPerformanceMonitoring = () => {
+        if (performanceMonitor) {
+            clearInterval(performanceMonitor);
+            performanceMonitor = null;
+        }
+    };
+
+    const updatePerformanceMetrics = () => {
+        if (!map) return;
+
+        const now = performance.now();
+        if (lastFpsTime === 0) {
+            lastFpsTime = now;
+            frameCount = 0;
+        }
+
+        frameCount++;
+        if (now - lastFpsTime >= 1000) {
+            const fps = Math.round((frameCount * 1000) / (now - lastFpsTime));
+            const fpsElement = document.getElementById('fps-value');
+            fpsElement.textContent = fps;
+            fpsElement.className = `metric-value ${fps < 30 ? 'error' : fps < 50 ? 'warning' : 'success'}`;
+
+            const frameTime = Math.round(1000 / fps);
+            const frameElement = document.getElementById('frame-time-value');
+            frameElement.textContent = `${frameTime}ms`;
+            frameElement.className = `metric-value ${frameTime > 33 ? 'error' : frameTime > 20 ? 'warning' : 'success'}`;
+
+            lastFpsTime = now;
+            frameCount = 0;
+        }
+
+        try {
+            const sourcesCount = map.getStyle()?.sources ? Object.keys(map.getStyle().sources).length : 0;
+            document.getElementById('tiles-loaded-value').textContent = sourcesCount;
+
+            const loadingTiles = map.isStyleLoaded() ? 0 : 1;
+            document.getElementById('tiles-loading-value').textContent = loadingTiles;
+        } catch (e) {
+            console.warn('Could not get tile metrics:', e);
+        }
+
+        try {
+            if (performance.memory) {
+                const memoryMB = Math.round(performance.memory.usedJSHeapSize / 1024 / 1024);
+                const memoryElement = document.getElementById('memory-usage-value');
+                memoryElement.textContent = `${memoryMB}MB`;
+                memoryElement.className = `metric-value ${memoryMB > 500 ? 'error' : memoryMB > 200 ? 'warning' : 'success'}`;
+            } else {
+                document.getElementById('memory-usage-value').textContent = 'N/A';
+            }
+        } catch (e) {
+            document.getElementById('memory-usage-value').textContent = 'N/A';
+        }
+
+        try {
+            let activeLayers = 0;
+            if (currentStyle?.layers) {
+                currentStyle.layers.forEach(layer => {
+                    if (map.getLayer(layer.id)) {
+                        const visibility = map.getLayoutProperty(layer.id, 'visibility');
+                        if (visibility === 'visible') activeLayers++;
+                    }
+                });
+            }
+            const layersElement = document.getElementById('layers-active-value');
+            layersElement.textContent = activeLayers;
+            layersElement.className = `metric-value ${activeLayers > 50 ? 'warning' : 'success'}`;
+        } catch (e) {
+            document.getElementById('layers-active-value').textContent = 'N/A';
+        }
+
+        try {
+            const zoom = map.getZoom();
+            document.getElementById('zoom-level-value').textContent = zoom.toFixed(1);
+        } catch (e) {
+            document.getElementById('zoom-level-value').textContent = 'N/A';
+        }
+        updateTerrainIndicator();
+    };
+
+    const countFrame = () => {
+        frameCount++;
+        requestAnimationFrame(countFrame);
+    };
+
+    window.switchMode = switchMode;
+    window.toggleBasemap = toggleBasemap;
+    window.toggleHoverMode = toggleHoverMode;
+    window.toggleAllFilters = () => filters?.toggleAllFilters();
+    window.toggleAllLayers = toggleAllLayers;
+    window.togglePerformancePanel = togglePerformancePanel;
+    window.toggleProfileMode = toggleProfileMode;
+    window.hideProfile = hideProfile;
+
+    initializeMap();