Maps

Maps

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

Funktion

generateLeafletMap(id, config, useCases);

Parameter	Required	Typ	Beschreibung
id	Ja	string	ID des HTML-Containers.
config	Ja	object	Kartenkonfiguration.
useCases	Ja	object[]	Array mit Usecase-Konfigurationen und Grafana-Variablen.

Panel-Aufbau

Maps folgen dem gleichen Grundaufbau wie alle Custom Panels: Ein eindeutiger HTML-Container wird angelegt, danach werden config und useCases definiert und an generateLeafletMap() übergeben.

<div id="device_map"></div>
<script>
  var id = 'device_map';

  var config = {
    display: {
      showStreetMap: true,
      showInitLayer: 'Streets',
    },
  };

  var useCases = [
    {
      name: 'Gerät',
      icon: 'Hole_White',
      varGraf: '${mapdata_devices}',
    },
  ];

  generateLeafletMap(id, config, useCases);
</script>

Config Optionen

Pfad	Required	Typ	Default	Beschreibung
general.worldCopyJump	Nein	boolean	false	Aktiviert/deaktiviert Weltkartenumsprung bei Erreichen des Randes.
general.doubleClickZoom	Nein	boolean	true	Aktiviert/deaktiviert Zoom bei Doppelklick.
general.zoomSnap	Nein	number	1	Schrittweite der Zoomstufen.
general.minZoom	Nein	number	3	Minimalzoom der Layers und Leaflet.
general.maxZoom	Nein	number	22	Maximalzoom der Layers und Leaflet.
general.useSimpleCrs	Nein	boolean	false	Nutzt L.CRS.Simple für XY-/Bildkarten statt geografischer CRS.
display.showStreetMap	Nein	boolean	false	Aktiviert Mapbox Street/Satellite/Combined Base-Layer.
display.showInitLayer	Nein	'Streets' | 'Satellite' | 'Combined'	Streets	Initialer Base-Layer, wenn display.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. Pflicht bei Custom Image Overlays.
rotation.isRotated	Nein	boolean	false	Aktiviert Kartenrotation.
rotation.rotateBearing	Nein	number	0	Rotationswinkel von 0 bis 360 Grad.
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. Pflicht bei bounds.hasFixedBounds.
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' | 'beaconTracker' | false	false	ExtraHTML-Variante für Legenden oder Beacon/Tracker-Control.
marker.extraHtmlConfig	Nein	object	{}	Zusatzkonfiguration für marker.extraHtml: 'beaconTracker'.
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 bounds.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.

ExtraHTML

marker.extraHtml wählt eine optionale Zusatzanzeige. fieldtester und tracking rendern eine Legende unten links. beaconTracker rendert zusätzliche Beacon- und Tracker-Layer sowie ein Bedienfeld rechts unten.

// Keine ExtraHTML-Box
marker: {
  extraHtml: false,
};

// Fieldtester-Legende
marker: {
  extraHtml: 'fieldtester',
};

// Tracking-Legende
marker: {
  extraHtml: 'tracking',
};

// Beacon/Tracker-Control
marker: {
  extraHtml: 'beaconTracker',
  extraHtmlConfig: {
    beaconsVarGraf: '${mapdata_beacon}',
    trackersVarGraf: '${mapdata_tracker}',
    parentDeviceId: '${deviceid_parent}',
    autoUpdate: false,
  },
};

BeaconTracker Konfiguration

marker.extraHtmlConfig wird aktuell nur von marker.extraHtml: 'beaconTracker' ausgewertet.

Pfad	Required	Typ	Default	Beschreibung
marker.extraHtmlConfig.beaconsVarGraf	Ja	string	''	Grafana-Variable mit Beacon-Daten.
marker.extraHtmlConfig.trackersVarGraf	Ja	string	''	Grafana-Variable mit Tracker-Daten.
marker.extraHtmlConfig.parentDeviceId	Nein	string	''	Device-ID zum Speichern des aktuellen Base-Layers, falls vorhanden.
marker.extraHtmlConfig.beaconLayerName	Nein	string	Beacons	Layer-Name für Beacon-Marker.
marker.extraHtmlConfig.trackerLayerName	Nein	string	Tracker	Layer-Name für Tracker-Marker.
marker.extraHtmlConfig.beaconIcon	Nein	string	BLE-Beacon	Marker-Icon für Beacons.
marker.extraHtmlConfig.trackerIcon	Nein	string	Tracking	Marker-Icon für Tracker.
marker.extraHtmlConfig.roundDecimals	Nein	number	3	Rundung der gespeicherten XY-Positionen.
marker.extraHtmlConfig.trackerOffset	Nein	number	2900	Abstand der Tracker-Marker um den zugeordneten Beacon.
marker.extraHtmlConfig.showInitOverlay	Nein	boolean	true	Zeigt Beacon- und Tracker-Layer initial an.
marker.extraHtmlConfig.autoUpdate	Nein	boolean	false	Aktiviert automatische Karten-Neuladung.
marker.extraHtmlConfig.followGrafanaRefresh	Nein	boolean	true	Nutzt das Grafana-Refresh-Intervall, wenn intervalMs leer ist.
marker.extraHtmlConfig.intervalMs	Nein	number	null	Festes Auto-Update-Intervall in Millisekunden.

Das Legacy-Datenformat wird nur für dieses ExtraHTML geparst.

Beacon-Daten:

deviceid|serial|posy|posx|color|beacon_id|§

Tracker-Daten:

mapAttribute€$€color€$€serial

Das mapAttribute wird über § zerlegt. Pro Segment wird der erste Pipe-Wert als Beacon-ID interpretiert und case-insensitive gegen beacon_id gematcht.

Usecase Optionen

Pfad	Required	Typ	Default	Beschreibung
useCases[].varGraf	Ja	string	-	Grafana-Variable mit Mapdaten, getrennt durch §.
useCases[].name	Nein	string	Gerät	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 in Metern 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	object	-	Parst mehrere Devices aus einem $-getrennten Wert.
useCases[].options.multipleDevices.structure	Ja	string[]	-	Struktur eines einzelnen $-Chunks. Muss Lat/Lng enthalten.
useCases[].options.multipleDevices.key	Ja	string | ((el) => string)	-	Datenquelle für den $-getrennten Multiple-Devices-String.

SQL-Usecase-Variable

Die Grafana-Variable in useCases[].varGraf muss die Basisattribute in dieser Reihenfolge liefern. Jeder Datensatz endet mit §.

SELECT CONCAT(
  deviceid,
  '|',
  serial,
  '|',
  attributes.value('(/attributes/attribute[@name="latitude"])[1]', 'VARCHAR(21)'),
  '|',
  attributes.value('(/attributes/attribute[@name="longitude"])[1]', 'VARCHAR(21)'),
  '|',
  devicetype,
  '|',
  attributes.value('(/attributes/attribute[@name="last_timestamp"])[1]', 'VARCHAR(23)'),
  'Z',
  '|',
  status,
  '|',
  attributes.value('(/attributes/attribute[@name="offline_status"])[1]', 'FLOAT'),
  '|',
  attributes.value('(/attributes/attribute[@name="app_color"])[1]', 'FLOAT'),
  '|',
  attributes.value('(/attributes/attribute[@name="app_blinking"])[1]', 'FLOAT'),
  '|',
  attributes.value('(/attributes/attribute[@name="is_gps"])[1]', 'FLOAT'),
  '§'
)
FROM RI.Devices
WHERE deviceId = '$deviceid'

Vor dem § können weitere Custom Attributes ausgegeben werden. Diese müssen in useCases[].structure in der gleichen Reihenfolge definiert werden.

SELECT CONCAT(
  deviceid,
  '|',
  serial,
  '|',
  attributes.value('(/attributes/attribute[@name="latitude"])[1]', 'VARCHAR(21)'),
  '|',
  attributes.value('(/attributes/attribute[@name="longitude"])[1]', 'VARCHAR(21)'),
  '|',
  devicetype,
  '|',
  attributes.value('(/attributes/attribute[@name="last_timestamp"])[1]', 'VARCHAR(23)'),
  'Z',
  '|',
  status,
  '|',
  attributes.value('(/attributes/attribute[@name="offline_status"])[1]', 'FLOAT'),
  '|',
  attributes.value('(/attributes/attribute[@name="app_color"])[1]', 'FLOAT'),
  '|',
  attributes.value('(/attributes/attribute[@name="app_blinking"])[1]', 'FLOAT'),
  '|',
  attributes.value('(/attributes/attribute[@name="is_gps"])[1]', 'FLOAT'),
  '|',
  attributes.value('(/attributes/attribute[@name="installation_place"])[1]', 'VARCHAR(MAX)'),
  '|',
  attributes.value('(/attributes/attribute[@name="humidity_threshold_low"])[1]', 'FLOAT'),
  '|',
  attributes.value('(/attributes/attribute[@name="humidity_threshold_high"])[1]', 'FLOAT'),
  '§'
)
FROM RI.Devices
WHERE deviceId = '$deviceid'

var useCases = [
  {
    icon: 'Current_Metering',
    name: 'Stromzähler PV',
    structure: ['installation_place', 'humidity_threshold_low', 'humidity_threshold_high'],
    popup: (el) => {
      return (
        '<div>Schwellwert Low: ' +
        el.data.humidity_threshold_low +
        '</div><br><div>Schwellwert High: ' +
        el.data.humidity_threshold_high +
        '</div>'
      );
    },
    varGraf: '${mapdata_devices}',
  },
];

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

posY ist Latitude, posX ist Longitude. Das SQL-Attribut is_gps wird in der Runtime als isGPS bereitgestellt.

Popup

useCases[].popup ist eine Funktion mit el als Parameter. Seriennummer und timestamp werden im Standard-Popup immer angezeigt; darunter wird der HTML-String aus popup(el) angehängt.

Auf diese Keys kann direkt zugegriffen werden:

Key	Beschreibung
el.deviceid	Device-ID vom Marker.
el.serial	IOTA-Serial.
el.posY	Latitude.
el.posX	Longitude.
el.devicetype	IOTA-Devicetype-ID.
el.timestamp	Timestamp im ISO-Format.
el.status	0/1 für disabled/enabled.
el.offline_status	IOTA-Attribut offline_status.
el.app_color	IOTA-Attribut app_color.
el.app_blinking	IOTA-Attribut app_blinking.
el.isGPS	IOTA-Attribut is_gps.
el.data.*	Alle in useCases[].structure definierten Zusatzattribute.

Popup Beispiele

popup: (el) => {
  return 'Seriennummer: ' + el.serial;
};

structure: ['installation_place'],
popup: (el) => {
  return 'Installationsort: ' + el.data.installation_place;
};

structure: ['installation_place', 'humidity_threshold_low', 'humidity_threshold_high'],
popup: (el) => {
  return (
    '<div>Schwellwert Low: ' +
    el.data.humidity_threshold_low +
    '</div><br><div>Schwellwert High: ' +
    el.data.humidity_threshold_high +
    '</div>'
  );
};

structure: ['input', 'output'],
popup: (el) => {
  var returnString = '';
  if (el.data.input != undefined) {
    returnString += ifEmpty(el.data.input, el.data.input == '1.0' ? 'Eingang: Ein' : 'Eingang: Aus');
  }
  if (el.data.output != undefined) {
    returnString += returnString != '' ? '<br>' : '';
    returnString += ifEmpty(el.data.output, el.data.output == '1.0' ? 'Ausgang: Ein' : 'Ausgang: Aus');
  }
  return returnString != '' ? returnString : 'keine Daten';
};

Options.circle

useCases[].options.circle(el) funktioniert wie popup(el). Die Funktion muss entweder false oder ein Objekt mit radius in Metern zurückgeben. Zusätzlich können Leaflet Path Options wie color, fillColor oder fillOpacity gesetzt werden.

options: {
  circle: (el) => {
    return {
      radius: '20',
    };
  },
};

structure: ['radius'],
options: {
  circle: (el) => {
    return {
      radius: el.data.radius,
      fillOpacity: 0.1,
    };
  },
};

structure: ['tracker_status', 'ble0_distance'],
options: {
  circle: (el) => {
    if (el.data.tracker_status != 'ble') return false;
    return {
      radius: el.data.ble0_distance,
      color: getAppColorHex(el.app_color),
      fillColor: getAppColorHex(el.app_color),
    };
  },
};

Beispiele

Minimale Streetmap

var mapConfigMinimal = {
  display: {
    showStreetMap: true,
    showInitLayer: 'Streets',
  },
};

var useCasesMinimal = [
  {
    varGraf: '${minimal_data}',
  },
];

generateLeafletMap('device_map', mapConfigMinimal, useCasesMinimal);

Satellitenansicht mit initialen Overlays

var mapConfigSatellite = {
  general: {
    worldCopyJump: true,
    doubleClickZoom: false,
    zoomSnap: 0.5,
  },
  display: {
    showStreetMap: true,
    showInitLayer: 'Satellite',
    showInitOverlay: ['UseCase A', 'UseCase B'],
  },
  interaction: {
    showCoorOnClick: true,
  },
  marker: {
    showDetailsInPopup: true,
  },
  other: {
    showAllMarkerInbound: true,
  },
};

var useCasesSatellite = [
  { name: 'UseCase A', icon: 'Current_Metering', varGraf: '${usecase_A_data}' },
  { name: 'UseCase B', icon: 'Temperature', varGraf: '${usecase_B_data}' },
];

Feste Grenzen und einfaches Custom Image

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

var useCasesFixedBounds = [
  {
    varGraf: '${fixed_bounds_data}',
  },
];

Rotation und gedrehtes Custom Image

var mapConfigRotatedImage = {
  rotation: {
    isRotated: true,
    rotateBearing: 45,
    customRotateImageBounds: {
      topLeft: [48.3, 16.2],
      topRight: [48.3, 16.5],
      bottomLeft: [48.1, 16.2],
    },
  },
  display: {
    showRotatedCustomImage: true,
    imageUrl: 'https://example.com/rotated_image.png',
  },
};

var useCasesRotatedImage = [
  {
    varGraf: '${rotated_image_data}',
  },
];

Bearbeitung und Serial-Eingabe

var mapConfigInteractive = {
  interaction: {
    allowEditPosition: true,
    serialInput: true,
    lockScrollWheelZoom: true,
  },
  marker: {
    allowSpiderfy: true,
    extraHtml: 'fieldtester',
  },
  other: {
    extraZoomOut: true,
    showAllMarkerInbound: true,
  },
};

var useCasesInteractive = [
  {
    name: 'Temperature_Humidity',
    icon: 'Temperature_Humidity',
    popup: (el) => `Seriennummer: ${el.serial}`,
    varGraf: '${interactive_data}',
  },
];

BeaconTracker auf XY-Bildkarte

<div id="device_map" style="width: 100%; height: 100%"></div>

<script>
  var generateMap = function () {
    var id = 'device_map';

    var config = {
      general: {
        useSimpleCrs: true,
        doubleClickZoom: false,
        zoomSnap: 1,
        minZoom: -30,
        maxZoom: 18,
      },
      display: {
        showSimpleCustomImage: true,
        imageUrl: 'https://sens-fileserver.xaas-a0a0.cloud/sens/PoC/Rectangle_SENS.svg',
      },
      bounds: {
        centerZoom: { center: [50000, 80000], zoom: -8 },
        customSimpleImageBounds: {
          top: 100000,
          right: 100000,
          bottom: 0,
          left: 0,
        },
      },
      interaction: {
        lockScrollWheelZoom: true,
      },
      marker: {
        extraHtml: 'beaconTracker',
        forceLayerControl: 'show',
        extraHtmlConfig: {
          beaconsVarGraf: '${mapdata_beacon}',
          trackersVarGraf: '${mapdata_tracker}',
          parentDeviceId: '${deviceid_parent}',
          autoUpdate: false,
        },
      },
    };

    var useCases = [];

    generateLeafletMap(id, config, useCases);
  };

  generateMap();
</script>

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}',
  },
];

Multiple Devices aus einem Attribut

var useCases = [
  {
    name: 'Gateways',
    icon: 'Gateway',
    structure: ['gatewayData'],
    options: {
      multipleDevices: {
        structure: ['serial', 'latitude', 'longitude'],
        key: (el) => el.data.gatewayData,
      },
    },
    varGraf: '${mapdata_gateways}',
  },
];

Helper Funktion

var ifEmpty = (value, string) => {
  if (value != '' && typeof value != 'undefined') {
    return string;
  }
};

SQL-Values

app_blinking

app_blinking sollte eine Zahl sein.

Wert	Bedeutung
1	slow
2	fast
3	medium
0 oder Default	kein Blinken

app_color

app_color sollte eine Zahl aus dem gemeinsamen app_color Farbkatalog sein. Die Tabelle mit Namen und Hex-Werten steht in den Grundlagen unter Icons & Farben.

Die Markerfarbe wird so bestimmt:

var determineIconColor = (data, ignoreAppColor) => {
  if (!data.status) return 'Blue';
  if (data.offline_status === 1) return 'Gray';
  if (data.timestamp === '0Z' || data.timestamp === 'Z') return 'Gray';
  if (!ignoreAppColor) {
    return getAppColorName(data.app_color);
  }
  return getAppColorName();
};

Icons-Liste

Die verfügbaren Map-Marker-Icons stehen in den Grundlagen unter Icons & Farben.