Files
Laca-City/frontend/node_modules/react-leaflet/lib/LayersControl.js
PhongPham c65cc97a33 🎯 MapView v2.0 - Global Deployment Ready
 MAJOR FEATURES:
• Auto-zoom intelligence với smart bounds fitting
• Enhanced 3D GPS markers với pulsing effects
• Professional route display với 6-layer rendering
• Status-based parking icons với availability indicators
• Production-ready build optimizations

🗺️ AUTO-ZOOM FEATURES:
• Smart bounds fitting cho GPS + selected parking
• Adaptive padding (50px) cho visual balance
• Max zoom control (level 16) để tránh quá gần
• Dynamic centering khi không có selection

🎨 ENHANCED VISUALS:
• 3D GPS marker với multi-layer pulse effects
• Advanced parking icons với status colors
• Selection highlighting với animation
• Dimming system cho non-selected items

🛣️ ROUTE SYSTEM:
• OpenRouteService API integration
• Multi-layer route rendering (glow, shadow, main, animated)
• Real-time distance & duration calculation
• Visual route info trong popup

📱 PRODUCTION READY:
• SSR safe với dynamic imports
• Build errors resolved
• Global deployment via Vercel
• Optimized performance

🌍 DEPLOYMENT:
• Vercel: https://whatever-ctk2auuxr-phong12hexdockworks-projects.vercel.app
• Bundle size: 22.8 kB optimized
• Global CDN distribution
• HTTPS enabled

💾 VERSION CONTROL:
• MapView-v2.0.tsx backup created
• MAPVIEW_VERSIONS.md documentation
• Full version history tracking
2025-07-20 19:52:16 +07:00

78 lines
3.1 KiB
JavaScript

import { LeafletProvider, createContainerComponent, createControlHook, createElementHook, createElementObject, extendContext, useLeafletContext } from '@react-leaflet/core';
import { Control } from 'leaflet';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
export const useLayersControlElement = createElementHook(function createLayersControl({ children: _c , ...options }, ctx) {
const control = new Control.Layers(undefined, undefined, options);
return createElementObject(control, extendContext(ctx, {
layersControl: control
}));
}, function updateLayersControl(control, props, prevProps) {
if (props.collapsed !== prevProps.collapsed) {
if (props.collapsed === true) {
control.collapse();
} else {
control.expand();
}
}
});
export const useLayersControl = createControlHook(useLayersControlElement);
// @ts-ignore
export const LayersControl = createContainerComponent(useLayersControl);
export function createControlledLayer(addLayerToControl) {
return function ControlledLayer(props) {
const parentContext = useLeafletContext();
const propsRef = useRef(props);
const [layer, setLayer] = useState(null);
const { layersControl , map } = parentContext;
const addLayer = useCallback((layerToAdd)=>{
if (layersControl != null) {
if (propsRef.current.checked) {
map.addLayer(layerToAdd);
}
addLayerToControl(layersControl, layerToAdd, propsRef.current.name);
setLayer(layerToAdd);
}
}, [
layersControl,
map
]);
const removeLayer = useCallback((layerToRemove)=>{
layersControl?.removeLayer(layerToRemove);
setLayer(null);
}, [
layersControl
]);
const context = useMemo(()=>{
return extendContext(parentContext, {
layerContainer: {
addLayer,
removeLayer
}
});
}, [
parentContext,
addLayer,
removeLayer
]);
useEffect(()=>{
if (layer !== null && propsRef.current !== props) {
if (props.checked === true && (propsRef.current.checked == null || propsRef.current.checked === false)) {
map.addLayer(layer);
} else if (propsRef.current.checked === true && (props.checked == null || props.checked === false)) {
map.removeLayer(layer);
}
propsRef.current = props;
}
});
return props.children ? /*#__PURE__*/ React.createElement(LeafletProvider, {
value: context
}, props.children) : null;
};
}
LayersControl.BaseLayer = createControlledLayer(function addBaseLayer(layersControl, layer, name) {
layersControl.addBaseLayer(layer, name);
});
LayersControl.Overlay = createControlledLayer(function addOverlay(layersControl, layer, name) {
layersControl.addOverlay(layer, name);
});