Widget reference

For live data, set preserveViewportOnRefresh: true to fit the initial non-empty result while retaining the camera on subsequent updates. Optional viewportKeyField names a row field whose changed values trigger a new fit, such as a selected region. Camera-option changes or a new map also refit. 2D and 3D markers with stable trackByField IDs update in place; classic and advanced 2D markers retain their identity while position, title, colors and icons update. Missing targets are removed and open details use the latest row. Ordinary refreshes retain available map content while loading. These options require frontend support.

Map widget: volledige instelling reference

Map widgets tonen geolocaties met statuskleurregels, marker-iconen, info window velden, viewport gedrag en geavanceerde map options.

Veldmapping Viewport Markers en status 2D en 3D Advanced options

1. Kernvelden en defaults

Map widget editor — Kaartinstellingen zijn pas nuttig als de locatiebasis correct is en de hoeveelheid markers beheersbaar blijft.

Defaults

defaultMarkerColor=#3367d6, showLegend=true, autoFit=true.
fitPadding=32, mapTypeId=roadmap, height=320px.
infoWindowEnabled=true, markerLimit=50.

Key	Type	Beschrijving
`filter`	object	Widget filter JSON.
`latField`, `lngField`	string	Bronvelden met coordinaten.
`titleField`, `subtitleField`, `descriptionField`	string	Tekstvelden in marker/info popup.
`statusField`	string	Statusbron voor kleurmapping.
`infoFields`	string[]	Extra velden in info window.
`trackByField`	string	Stabiele marker-identiteit over refreshes.
`renderMode`	string	`2d` (default) of `3d`.

2. Kaartgedrag en viewport

Instelling	Beschrijving
`showLegend`	Toont statuslegend bij statuskleurregels.
`autoFit`	Auto zoom/center op marker-bounds.
`defaultZoom`	Fallback startzoom.
`maxAutoZoom`	Bovengrens voor auto-fit zoom.
`fitPadding`	Padding rondom marker-bounds in pixels.
`defaultCenter.lat/lng`	Fallback center als auto-fit niet mogelijk is.
`mapTypeId`	`roadmap`, `satellite`, `hybrid`, `terrain`.
`height`	CSS hoogte van de kaartcontainer.
`markerLimit`	Maximaal aantal markers dat gerenderd wordt.

3. Marker en statusconfiguratie

Status rules

statusColors is een map van statuswaarde naar kleur.
statusPriority bepaalt sorteer-/weergaveprioriteit.
defaultMarkerColor wordt gebruikt bij missende statusmatch.
colorByComparisonSet laat kleuren door compare-set context sturen.

Marker iconen

markerIconField gebruikt datawaarde als icon bron.
markerIconClass is statische fallback icon class.
infoWindow aan/uit bepaalt popup-rendering.
apiKey kan widget-specifieke map key overriden.

4. 2D- en 3D-rendering

2D-modus

Gebruikt de standaard Google Maps-renderer.
Ondersteunt de bestaande kaarttypes, infovensters, custom markericonen en Dashview dark-mode styling.

3D-modus

Gebruikt Google Maps 3D met tilt, heading en range. Zoom uit naar de wereldbol en in naar terrein en beschikbare 3D-gebouwen.
Individuele punten ondersteunen afbeeldings-URL's en data-afbeeldingen via markerIconField; groepen gebruiken pins met aantallen.
Met een ondersteunende frontend opent een klik op een marker een sluitbaar detailpaneel met de ingestelde infovelden. Icoonfontklassen en volledige dark-mode kaartstyling blijven beperkt in 3D.

5. Geavanceerde opties

Key	Type	Notities
`libraries`	string[]	Komma-lijst in editor, als array opgeslagen.
`mapOptions`	object	Advanced map opties JSON; moet object zijn.
`apiKey`	string	Alleen invullen wanneer override nodig is.

Validatie

defaultCenter wordt alleen opgeslagen als zowel lat als lng numeriek zijn.
Ongeldige JSON in advanced options blokkeert save.
Statusregels zonder key/kleur worden genegeerd.

6. Voorbeeld map options JSON

{
  "latField": "latitude",
  "lngField": "longitude",
  "titleField": "store_name",
  "statusField": "store_status",
  "statusColors": {
    "open": "#22c55e",
    "maintenance": "#f59e0b",
    "closed": "#ef4444"
  },
  "defaultMarkerColor": "#3367d6",
  "autoFit": true,
  "maxAutoZoom": 13,
  "mapTypeId": "roadmap",
  "height": "360px",
  "infoFields": ["city", "region", "manager"],
  "markerIconClass": "pi pi-map-marker",
  "markerLimit": 200
}