@lad-sapienza/scms-core 0.1.0-alpha.12 → 0.1.0-alpha.13

package/components/Map/Map.tsx

@@ -78,6 +78,8 @@ export function Map({
   csv,
   json,
   directus,
+  markers,
+  markersZoom,
 }: MapProps) {
   const t = useTranslation();
   const [lng, lat, zoom] = center.split(',').map(Number);
@@ -323,8 +325,29 @@ export function Map({
       
       layers.push(layerConfig);
     }
+
+    if (markers) {
+      const list = Array.isArray(markers) ? markers : [markers];
+      const features = list
+        .filter(m => Number.isFinite(Number(m.lng)) && Number.isFinite(Number(m.lat)))
+        .map(m => ({
+          type: 'Feature' as const,
+          geometry: { type: 'Point' as const, coordinates: [Number(m.lng), Number(m.lat)] },
+          properties: { label: m.label ?? '' }
+        }));
+      if (features.length > 0) {
+        layers.push({
+          name: t('map.markers'),
+          source: { type: 'geojson', data: { type: 'FeatureCollection', features } },
+          popupTemplate: list.some(m => m.label) ? '<b>${label}</b>' : undefined,
+          fitToContent: true,
+          fitZoom: markersZoom,
+          visible: true
+        } as OverlayLayerConfig);
+      }
+    }
     return layers;
-  }, [overlayLayers, implicitSource, geojson, csv, mapStyle, parsedStyleLayers.overlayLayers]);
+  }, [overlayLayers, implicitSource, geojson, csv, markers, markersZoom, mapStyle, parsedStyleLayers.overlayLayers]);
 
   // Initialize and update visibility when layers change
   useEffect(() => {
@@ -479,7 +502,15 @@ export function Map({
           [Math.min(...lons), Math.min(...lats)],
           [Math.max(...lons), Math.max(...lats)]
         ];
-        map.fitBounds(bounds, { padding: 50, duration: 1000 });
+        const [[w, s], [e, n]] = bounds;
+        if (layerToFit.fitZoom !== undefined) {
+          map.easeTo({ center: [(w + e) / 2, (s + n) / 2], zoom: layerToFit.fitZoom, duration: 1000 });
+        } else if (w === e && s === n) {
+          // A lone point has no extent: fitBounds would zoom to maxZoom.
+          map.easeTo({ center: [w, s], zoom: Math.max(map.getZoom(), 12), duration: 1000 });
+        } else {
+          map.fitBounds(bounds, { padding: 50, duration: 1000 });
+        }
       }
     }, 100);
   }, [mapLoaded, layersData, allOverlayLayers]);

package/components/Map/MapMdx.tsx

@@ -22,6 +22,7 @@ export function Map(props: MapProps) {
   const stableGeojson = useMemo(() => props?.geojson, [JSON.stringify(props?.geojson || null)]);
   const stableCsv = useMemo(() => props?.csv, [JSON.stringify(props?.csv || null)]);
   const stableJson = useMemo(() => props?.json, [JSON.stringify(props?.json || null)]);
+  const stableMarkers = useMemo(() => props?.markers, [JSON.stringify(props?.markers || null)]);
   // `directus` feeds the same `implicitSource` → `allOverlayLayers` memo chain
   // as `geojson`/`csv`/`json`; without stabilising it here an inline
   // `directus={{ table: '…' }}` object from MDX gets a new identity on every
@@ -38,6 +39,7 @@ export function Map(props: MapProps) {
       csv={stableCsv}
       json={stableJson}
       directus={stableDirectus}
+      markers={stableMarkers}
     />
   );
 }

package/components/Map/README.md

@@ -31,6 +31,30 @@ touching `overlayLayers` directly:
 <Map directus={{ table: 'sites', geoField: 'location' }} />
 ```
 
+For one or a few hand-placed points (e.g. the location of a single site) use
+`markers` — no data file needed. The map fits to them automatically; a lone
+marker is centred at a regional zoom (≥ 12) rather than zoomed to the max:
+
+```mdx
+<Map markers={{ lng: 12.4964, lat: 41.9028, label: 'Roma' }} />
+
+<Map markers={[
+  { lng: 12.49, lat: 41.90, label: 'Site A' },
+  { lng: 12.51, lat: 41.88, label: 'Site B' },
+]} />
+```
+
+`label` is optional (shown in a popup as plain text). Markers are an extra
+overlay layer and combine with any of the shorthands below.
+
+`markersZoom` fixes the zoom: the map is centred on the markers at that level
+instead of being fitted to their extent — useful to give a single site the
+same geographic context on every page:
+
+```mdx
+<Map markers={{ lng: 12.4964, lat: 41.9028, label: 'Roma' }} markersZoom={9} />
+```
+
 `geojson`/`csv`/`json`/`directus` each accept either a bare string (path/URL)
 or an object with `name`, `style`, `popup`, `fitToContent`, `filter` — see
 `MapProps` in [`types.ts`](./types.ts) for the exact shape of each.

package/components/Map/types.ts

@@ -124,6 +124,12 @@ export interface OverlayLayerConfig {
   /** Fit map bounds to layer content */
   fitToContent?: boolean;
 
+  /**
+   * With `fitToContent`: centre on the content's bounds at this fixed zoom
+   * instead of fitting them (used by the `markers` shorthand).
+   */
+  fitZoom?: number;
+
   /** Optional client-side filter for features */
   filter?: FilterObject | ((feature: any) => boolean);
 
@@ -131,6 +137,17 @@ export interface OverlayLayerConfig {
   searchInFields?: SearchInFields;
 }
 
+/**
+ * A single point marker for the `markers` shorthand — for maps with one or a
+ * few hand-placed points, no data file needed.
+ */
+export interface MarkerConfig {
+  lng: number;
+  lat: number;
+  /** Text shown in the popup on hover/click (plain text, HTML-escaped) */
+  label?: string;
+}
+
 export interface MapProps {
   /** Map height (CSS string) */
   height?: string;
@@ -197,6 +214,19 @@ export interface MapProps {
     filter?: FilterObject | ((row: any) => boolean);
   };
   
+  /**
+   * Inline markers - one or a few hand-placed points, e.g. to give the
+   * geographic context of a single site. Rendered as an extra overlay layer
+   * and, by default, the map is fitted to them.
+   */
+  markers?: MarkerConfig | MarkerConfig[];
+
+  /**
+   * Fixed zoom for the `markers`: the map is centred on them at this zoom
+   * instead of being fitted to their extent. Handy for a single site.
+   */
+  markersZoom?: number;
+
   /** JSON shorthand - for simple single-layer maps */
   json?: any[] | string;
   

package/components/i18n/builtinDictionary.ts

@@ -28,6 +28,7 @@ export const BUILTIN_DICTIONARY: Dictionary = {
   },
   map: {
     defaultLayerName: 'Default Layer',
+    markers: 'Markers',
     baseMaps: 'Base Maps',
     searchLayer: 'Search {name}',
     active: '(Active)',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lad-sapienza/scms-core",
-  "version": "0.1.0-alpha.12",
+  "version": "0.1.0-alpha.13",
   "description": "Framework components and Astro integrations for s:CMS — DataTb, Gallery, Map, ZoteroGeoViewer, Record.",
   "type": "module",
   "license": "BSD-0-Clause",