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}
/>
);
});