Maps

Maps

generateLeafletMap(id, config, useCases) rendert Leaflet-Karten mit Usecase-Layern, Popups, Marker-Icons, Custom Image Overlays und Positionsbearbeitung.

Config Optionen

Pfad	Required	Typ	Default	Beschreibung
general.worldCopyJump	Nein	boolean	false	Erlaubt Weltkarten-Umbruch am Rand.
general.doubleClickZoom	Nein	boolean	true	Zoom bei Doppelklick.
general.zoomSnap	Nein	number	1	Schrittweite der Zoomstufen.
general.minZoom	Nein	number	3	Minimaler Zoom.
general.maxZoom	Nein	number	22	Maximaler Zoom.
display.showStreetMap	Nein	boolean	false	Aktiviert Mapbox Street/Satellite/Combined Base-Layer.
display.showInitLayer	Bedingt	'Streets' | 'Satellite' | 'Combined'	Streets	Initialer Base-Layer, wenn showStreetMap aktiv ist.
display.showInitOverlay	Nein	'all' | string | string[]	-	Initial sichtbare Usecase-Overlays.
display.showSimpleCustomImage	Nein	boolean	false	Zeigt ein nicht rotiertes Custom Image Overlay.
display.showRotatedCustomImage	Nein	boolean	false	Zeigt ein rotiertes Custom Image Overlay.
display.imageUrl	Bedingt	string	-	URL des Custom Image Overlays.
rotation.isRotated	Nein	boolean	false	Aktiviert Kartenrotation.
rotation.rotateBearing	Nein	number	0	Rotationswinkel.
rotation.customRotateImageBounds	Bedingt	{ topLeft: [number, number]; topRight: [number, number]; bottomLeft: [number, number] }	-	Drei Punkte für rotiertes Image Overlay.
bounds.hasFixedBounds	Nein	boolean	false	Erzwingt feste Kartenbegrenzung.
bounds.fixedBounds	Bedingt	{ top: number; right: number; bottom: number; left: number }	-	Feste Bounds.
bounds.centerZoom	Nein	{ center: [number, number]; zoom: number }	{ center: [48.208, 16.372], zoom: 12 }	Startposition und Zoom.
bounds.defaultPos	Nein	[number, number]	[48.208, 16.372]	Fallback-Position für Marker ohne Koordinaten.
bounds.customSimpleImageBounds	Bedingt	{ top: number; right: number; bottom: number; left: number }	-	Bounds für einfaches Image Overlay.
interaction.lockScrollWheelZoom	Nein	boolean	false	Scrollrad-Zoom erst bei Kartenfokus.
interaction.showCoorOnClick	Nein	boolean	false	Zeigt Koordinaten bei Kartenklick.
interaction.allowEditPosition	Nein	boolean	false	Marker per Drag oder Eingabe verschiebbar.
interaction.hideMarkerPositionContainer	Nein	boolean	false	Verbirgt Positions-Eingaben.
interaction.serialInput	Nein	boolean	true	Zeigt Seriennummer-Feld in Positionssteuerung.
marker.ignoreAppColor	Nein	boolean	false	Ignoriert app_color und nutzt Defaultfarbe.
marker.ignoreAppBlinking	Nein	boolean	false	Ignoriert app_blinking.
marker.showDetailsInPopup	Nein	boolean	true	Zeigt Details-Link im Popup.
marker.sortUsecases	Nein	boolean	false	Sortiert Usecases alphabetisch, sofern forcePosition nicht greift.
marker.extraHtml	Nein	'fieldtester' | 'tracking' | false	false	Extra-Legende unten links.
marker.forceLayerControl	Nein	'default' | 'show' | 'hide'	default	Steuert, ob die Layer-Control aufgeklappt ist.
marker.allowSpiderfy	Nein	boolean	false	Aktiviert OverlappingMarkerSpiderfier.
marker.showAllMarkerAtDefaultPos	Nein	boolean	false	Setzt fehlende Markerpositionen auf defaultPos.
other.extraZoomOut	Nein	boolean	false	Zoomt beim Fitten der Bounds eine Stufe heraus.
other.showAllMarkerInbound	Nein	boolean	false	Passt die View initial an alle Marker an.

Usecase Optionen

Pfad	Required	Typ	Default	Beschreibung
useCases[].varGraf	Ja	string	-	Grafana-Variable mit Mapdaten, getrennt durch §.
useCases[].name	Nein	string	Device	Usecase-Name für Layer und Legende.
useCases[].icon	Nein	string	Hole_White	Marker-Icon vom Fileserver.
useCases[].showIconInLegend	Nein	boolean	false	Zeigt Icon in Layer-Legende.
useCases[].forcePosition	Nein	number	-	Erzwingt Sortierposition in der Legende.
useCases[].popup	Nein	(el) => string	-	Custom HTML für Marker-Popup.
useCases[].structure	Nein	string[]	-	Benennung zusätzlicher Werte nach den Basisattributen.
useCases[].polygon	Nein	boolean	-	Rendert Polyline-Daten statt Marker.
useCases[].options.circle	Nein	(el) => false | LeafletPathOptions & { radius: string | number }	-	Kreis um Marker. Muss radius liefern.
useCases[].options.hideMarker	Nein	boolean | (el) => boolean	-	Unterdrückt Marker je Sensor.
useCases[].options.multiplePositions	Nein	(el) => Array<{ lat: string | number; lng: string | number }>	-	Zusätzliche Markerpositionen für denselben Sensor.
useCases[].options.multipleDevices	Nein	{ structure: string[]; key: string | ((el) => string) }	-	Parst mehrere Devices aus einem $-getrennten Wert.

Basisattribute

Die Runtime erwartet die Basisattribute in dieser Reihenfolge:

1. deviceid
2. serial
3. posY
4. posX
5. devicetype
6. timestamp
7. status
8. offline_status
9. app_color
10. app_blinking
11. isGPS

Zusatzwerte werden über useCases[].structure benannt und in el.data abgelegt.

Beispiele

general: Zoom und Kartenverhalten

var config = {
  general: {
    worldCopyJump: true,
    doubleClickZoom: false,
    zoomSnap: 0.5,
    minZoom: 5,
    maxZoom: 19,
  },
};

display: Streets, Satellite und initiale Overlays

var config = {
  display: {
    showStreetMap: true,
    showInitLayer: 'Satellite',
    showInitOverlay: ['Temperatur', 'Gateway'],
  },
};

bounds: Startposition und feste Kartenbegrenzung

var config = {
  bounds: {
    centerZoom: {
      center: [48.208, 16.372],
      zoom: 13,
    },
    hasFixedBounds: true,
    fixedBounds: {
      top: 48.3,
      right: 16.6,
      bottom: 48.1,
      left: 16.1,
    },
  },
};

interaction: Markerposition bearbeiten

var config = {
  interaction: {
    allowEditPosition: true,
    serialInput: true,
    lockScrollWheelZoom: true,
    showCoorOnClick: true,
  },
};

marker: Details, Zusatzlegende und Spiderfy

var config = {
  marker: {
    showDetailsInPopup: true,
    extraHtml: 'fieldtester',
    forceLayerControl: 'show',
    allowSpiderfy: true,
  },
};

Custom Image Overlay

var config = {
  display: {
    showSimpleCustomImage: true,
    imageUrl: 'https://example.com/floorplan.png',
  },
  bounds: {
    customSimpleImageBounds: {
      top: 48.3,
      right: 16.6,
      bottom: 48.1,
      left: 16.1,
    },
  },
};

Minimale Streetmap

var config = {
  display: {
    showStreetMap: true,
    showInitLayer: 'Streets',
  },
};
var useCases = [{ name: 'Device', icon: 'Temperature', varGraf: '${mapdata_devices}' }];
generateLeafletMap('device_map', config, useCases);

Popup mit structure

var useCases = [
  {
    name: 'Temperature',
    icon: 'Temperature',
    structure: ['installation_place', 'threshold_high'],
    popup: (el) => 'Ort: ' + el.data.installation_place + '<br>High: ' + el.data.threshold_high,
    varGraf: '${mapdata_devices}',
  },
];

Circle und hideMarker

var useCases = [
  {
    name: 'BLE Tracker',
    icon: 'Tracking',
    structure: ['tracker_status', 'ble_distance'],
    options: {
      hideMarker: (el) => el.data.tracker_status !== 'ble',
      circle: (el) => ({
        radius: el.data.ble_distance,
        color: 'blue',
        fillOpacity: 0.1,
      }),
    },
    varGraf: '${mapdata_devices}',
  },
];

Mehrere Positionen pro Device

var useCases = [
  {
    name: 'Tracking',
    icon: 'Tracking',
    structure: ['lat_2', 'lng_2'],
    options: {
      multiplePositions: (el) => [
        {
          lat: el.data.lat_2,
          lng: el.data.lng_2,
        },
      ],
    },
    varGraf: '${mapdata_devices}',
  },
];