CnMapPage

Manifest-driven map page. Resolved automatically by CnPageRenderer for pages[] entries with type: "map" — composes CnPageHeader + CnMapWidget and forwards the manifest's config.{center, zoom, layers, markers, height, clustering, autoFit} shape. Spec: REQ-MMW-* (manifest-map-widget).

Try it

Loading CnMapPage playground…

Manifest example

{
  "id": "CaseMap",
  "route": "/map",
  "type": "map",
  "title": "procest.case_map.title",
  "config": {
    "center": [52.1326, 5.2913],
    "zoom": 7,
    "layers": [
      { "type": "tile",
        "url":  "https://service.pdok.nl/brt/achtergrondkaart/wmts/v2_0/standaard/EPSG:3857/{z}/{x}/{y}.png",
        "options": { "attribution": "© Kadaster", "maxZoom": 19 } },
      { "type": "wms",
        "url":  "https://service.pdok.nl/lv/bag/wms/v2_0",
        "options": { "layers": "pand", "transparent": true, "opacity": 0.6 } }
    ],
    "markers": {
      "dataSource": { "url": "/index.php/apps/procest/api/cases/geo" },
      "latField":   "lat",
      "lngField":   "lng",
      "popupField": "title",
      "clustering": true
    },
    "height": "calc(100vh - 200px)"
  }
}

Slots

Slot	Scope	Purpose
#header	{ title, description }	Override the default CnPageHeader.
#filters	—	Render filter chrome between header and map.
#legend	{ layers, markers }	Custom legend overlay (passes through to CnMapWidget).
#popup	{ feature, properties }	Override default popup HTML (passes through to CnMapWidget).

Events

@map-ready, @marker-click, @bounds-change, @click — all forward verbatim from the underlying CnMapWidget. See the CnMapWidget docs for payload shapes.

Reference

Props

| Name | Type | Required | Default | Description | | ------------------ | --------- | -------- | ---------------------------------------------------------- | ------------------------------------------------------------------------- | ---------------------------------------------- | | title | string | | '' | Page title. Forwarded to CnPageHeader. @type {string} | | description | string | | '' | Page description. Forwarded to CnPageHeader. @type {string} | | center | array | ✓ | — | Initial map center as [latitude, longitude]. @type {[number, number]} | | zoom | number | | 7 | Initial zoom level. @type {number} | | layers | array | | [] | Layer definitions. See CnMapWidget docs. @type {Array<object>} | | markers | object | | null | Marker config. See CnMapWidget docs. @type {object|null} | | clustering | boolean | | false | Enable marker clustering. @type {boolean} | | height | string | number | | 'calc(100vh - 200px)' | Map container height. @type {string|number} | | autoFit | boolean | | true | Auto-fit bounds to loaded features. @type {boolean} | | ariaLabel | string | | () => t('nextcloud-vue', 'Map') | Aria-label for the map application region. @type {string} | | unavailableLabel | string | | () => t('nextcloud-vue', 'Map library not available') | Label shown when Leaflet is unavailable. @type {string} |

Events

Name	Payload	Description
map-ready	—	Map ready event. Fired once after Leaflet has loaded and the map is mounted. Pass-through from CnMapWidget.
marker-click	—	Marker click event. Pass-through from CnMapWidget.
bounds-change	—	Viewport bounds change event. Fired (debounced) after pan / zoom settles. Pass-through from CnMapWidget.
click	—	Map background click event. Pass-through from CnMapWidget.

Slots

Name	Bindings	Description
header	title, description	header
filters	—	filters
legend	—	legend
popup	—	popup
fallback	—	fallback