@@ -908,103 +908,6 @@ function CityLayer() {
908908 ) ;
909909}
910910
911- interface PortOfInterest {
912- name : string ;
913- lat : number ;
914- lng : number ;
915- severity : 'low' | 'medium' | 'high' ;
916- type : string ;
917- }
918-
919- function PortOfInterestLayer ( ) {
920- const [ zones , setZones ] = useState < PortOfInterest [ ] > ( [ ] ) ;
921-
922- useEffect ( ( ) => {
923- axios . get ( `${ API_BASE_URL } /vessels/ports-of-interest` ) . then ( ( res ) => {
924- setZones ( res . data . data || [ ] ) ;
925- } ) ;
926- } , [ ] ) ;
927-
928- return (
929- < >
930- { zones . map ( ( zone , idx ) => (
931- < div key = { `${ zone . name } -${ idx } ` } >
932- < CircleMarker
933- center = { [ zone . lat , zone . lng ] }
934- radius = { 8 }
935- pathOptions = { {
936- color :
937- zone . severity === 'high'
938- ? '#ef4444'
939- : zone . severity === 'medium'
940- ? '#f59e0b'
941- : '#10b981' ,
942- fillColor :
943- zone . severity === 'high'
944- ? '#ef4444'
945- : zone . severity === 'medium'
946- ? '#f59e0b'
947- : '#10b981' ,
948- fillOpacity : 0.1 ,
949- weight : 1 ,
950- } }
951- />
952- < Marker
953- position = { [ zone . lat , zone . lng ] }
954- icon = { L . divIcon ( {
955- className : 'poi-icon' ,
956- html : renderToString (
957- < div className = "relative flex items-center justify-center" >
958- < div
959- className = { `w-2 h-2 rounded-full border border-white/50 ${ zone . severity === 'high' ? 'bg-red-500 shadow-[0_0_10px_#ef4444]' : zone . severity === 'medium' ? 'bg-amber-500 shadow-[0_0_10px_#f59e0b]' : 'bg-emerald-500 shadow-[0_0_10px_#10b981]' } ` }
960- />
961- </ div >
962- ) ,
963- iconSize : [ 20 , 20 ] ,
964- iconAnchor : [ 10 , 10 ] ,
965- } ) }
966- >
967- < Popup closeButton = { false } >
968- < div className = "bg-zinc-950 border border-white/20 p-4 min-w-50 shadow-2xl" >
969- < div className = "flex flex-col gap-1 border-b border-white/10 pb-2 mb-2" >
970- < span
971- className = { `text-[10px] font-black uppercase tracking-[0.2em] ${ zone . severity === 'high' ? 'text-red-500' : zone . severity === 'medium' ? 'text-amber-500' : 'text-emerald-500' } ` }
972- >
973- Port of Interest
974- </ span >
975- < span className = "text-xs font-bold text-white uppercase tracking-wider" >
976- { zone . name }
977- </ span >
978- </ div >
979- < div className = "flex flex-col gap-2" >
980- < div className = "flex flex-col gap-0.5" >
981- < span className = "text-[8px] text-zinc-600 uppercase font-black" >
982- Classification
983- </ span >
984- < span className = "text-[10px] font-bold text-zinc-300" >
985- { zone . type }
986- </ span >
987- </ div >
988- < div className = "flex flex-col gap-0.5" >
989- < span className = "text-[8px] text-zinc-600 uppercase font-black" >
990- Threat Level
991- </ span >
992- < span
993- className = { `text-[10px] font-bold uppercase ${ zone . severity === 'high' ? 'text-red-500' : zone . severity === 'medium' ? 'text-amber-500' : 'text-emerald-500' } ` }
994- >
995- { zone . severity } Severity
996- </ span >
997- </ div >
998- </ div >
999- </ div >
1000- </ Popup >
1001- </ Marker >
1002- </ div >
1003- ) ) }
1004- </ >
1005- ) ;
1006- }
1007-
1008911function ZoomControls ( ) {
1009912 const map = useMap ( ) ;
1010913
@@ -1077,8 +980,6 @@ interface MapDisplayProps {
1077980 setShowPorts : ( v : boolean ) => void ;
1078981 showCities : boolean ;
1079982 setShowCities : ( v : boolean ) => void ;
1080- showPois : boolean ;
1081- setShowPois : ( v : boolean ) => void ;
1082983}
1083984
1084985export default function MapDisplay ( {
@@ -1110,8 +1011,6 @@ export default function MapDisplay({
11101011 setShowPorts,
11111012 showCities,
11121013 setShowCities,
1113- showPois,
1114- setShowPois,
11151014} : MapDisplayProps ) {
11161015 const [ isCompact , setIsCompact ] = useState (
11171016 typeof window !== 'undefined' ? window . innerWidth < 640 || window . innerHeight < 840 : false
@@ -1146,7 +1045,6 @@ export default function MapDisplay({
11461045
11471046 { showPorts && < PortLayer /> }
11481047 { showCities && < CityLayer /> }
1149- { showPois && < PortOfInterestLayer /> }
11501048 < FleetLayer
11511049 onUpdate = { onFleetUpdate }
11521050 selectedMmsi = { selectedMmsi }
@@ -1182,8 +1080,6 @@ export default function MapDisplay({
11821080 setShowPorts = { setShowPorts }
11831081 showCities = { showCities }
11841082 setShowCities = { setShowCities }
1185- showPois = { showPois }
1186- setShowPois = { setShowPois }
11871083 isOpen = { isLayersOpen }
11881084 onClose = { ( ) => onLayersOpenChange ( false ) }
11891085 />
0 commit comments