diff --git a/remix/app/fb/components/Map/Airspaces.tsx b/remix/app/fb/components/Map/Airspaces.tsx index d2f9100..73c5bec 100644 --- a/remix/app/fb/components/Map/Airspaces.tsx +++ b/remix/app/fb/components/Map/Airspaces.tsx @@ -20,10 +20,13 @@ export const Airspaces = ({ mapBounds }: { mapBounds: MapBounds }) => { const { filters: { showAirspacesStartingBelowFL }, airspaceTypesToDisplay, + map, } = useMainMap(); const highlightedAirspaces = airspaces.map((a) => a.name); + console.log('airspacesInView', airspacesInView); + return ( {mapBounds && @@ -40,6 +43,7 @@ export const Airspaces = ({ mapBounds }: { mapBounds: MapBounds }) => { ctr={airspace} i={i} highlighted={highlightedAirspaces.includes(airspace.name)} + displayLabels={map!.getZoom() >= 10} /> ))} diff --git a/remix/app/fb/components/Map/CtrSVGPolygon/AirspaceSVGPolygon.tsx b/remix/app/fb/components/Map/CtrSVGPolygon/AirspaceSVGPolygon.tsx index b333256..2242c2d 100644 --- a/remix/app/fb/components/Map/CtrSVGPolygon/AirspaceSVGPolygon.tsx +++ b/remix/app/fb/components/Map/CtrSVGPolygon/AirspaceSVGPolygon.tsx @@ -1,5 +1,6 @@ import { memo } from 'react'; import { Polygon, SVGOverlay } from 'react-leaflet'; +import styled from 'styled-components'; import type { LatLng } from 'ts-aerodata-france'; import { toLeafletLatLng } from '~/domain'; import { boundingBox } from '~/domain/boundingBox'; @@ -18,6 +19,7 @@ type Props = { thickBorderWidth?: number; thinBorderWidth?: number; highlightedThinBorderWidth?: number; + displayLabels: boolean; }; export const AirspaceSVGPolygon = memo(function AirspaceSVGPolygon({ @@ -32,9 +34,10 @@ export const AirspaceSVGPolygon = memo(function AirspaceSVGPolygon({ thinBorderWidth = 0.6, highlightedThinBorderWidth = thinBorderWidth * 3, prefix, + displayLabels, }: Props) { // remove spaces - const id = `${prefix}-${name}`.replace(/\s/g, ''); + const id = `${name}`.replace(/\s/g, '_'); const leafletGeom = geometry.map(toLeafletLatLng); const geom = leafletGeom .map(convertToWebMercator) @@ -66,7 +69,7 @@ export const AirspaceSVGPolygon = memo(function AirspaceSVGPolygon({ (maxlat - minlat) / 1000 }`} > - + - + + {displayLabels && ( + + + {name} + + + )} {/* Polygon is only required for tooltip */} ); }); + +const AirspaceNameText = styled.text` + /* transform: scale(+1, -1); */ +`; + +const AirspaceNameTextPath = styled.textPath<{ $color: string }>` + font-size: 0.1rem; + fill: ${({ $color }) => $color}; + font-family: 'Futura'; + font-weight: 900; +`; diff --git a/remix/app/fb/components/Map/CtrSVGPolygon/CtrSVGPolygon.tsx b/remix/app/fb/components/Map/CtrSVGPolygon/CtrSVGPolygon.tsx index 2a3f9d4..c878e1c 100644 --- a/remix/app/fb/components/Map/CtrSVGPolygon/CtrSVGPolygon.tsx +++ b/remix/app/fb/components/Map/CtrSVGPolygon/CtrSVGPolygon.tsx @@ -9,12 +9,14 @@ type CtrSVGPolygonProps = { ctr: Airspace; i: number; highlighted?: boolean; + displayLabels: boolean; }; export const CtrSVGPolygon = memo(function CtrSVGPolygon({ ctr: airspace, i, highlighted, + displayLabels, }: CtrSVGPolygonProps) { const { geometry, name, type } = airspace; @@ -31,6 +33,7 @@ export const CtrSVGPolygon = memo(function CtrSVGPolygon({ thinBorderWidth={thinBorderWidth(airspace)} highlightedThinBorderWidth={highlightedThinBorderWidth(type)} prefix="ctr-tma-siv" + displayLabels={displayLabels} /> ); });