Add option to add a custom tile layer to the map

provisioning/dashboards/dashboard.json

@@ -34,11 +34,7 @@
         "y": 0
       },
       "id": 1,
-      "options": {
-        "seriesCountSize": "sm",
-        "showSeriesCount": false,
-        "text": "Default value of text input option"
-      },
+      "options": {},
       "targets": [
         {
           "datasource": {
@@ -64,11 +60,7 @@
         "y": 0
       },
       "id": 2,
-      "options": {
-        "seriesCountSize": "sm",
-        "showSeriesCount": false,
-        "text": "Default value of text input option"
-      },
+      "options": {},
       "targets": [
         {
           "alias": "",

src/TrackMapPanel.tsx

@@ -8,10 +8,17 @@ import {
   PanelData,
 } from '@grafana/data';
 import { Subscription } from 'rxjs';
-import { CircleMarker, Control, LatLng, Map as LeafMap, LeafletEventHandlerFn, Polyline } from 'leaflet';
+import { CircleMarker, Control, LatLng, Map as LeafMap, LeafletEventHandlerFn, Polyline, TileLayer } from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 
-import { BoxZoomEndEvent, InputRows, Point, TrackMapProps, setDashboardTimeRangeFunction } from './types';
+import {
+  BoxZoomEndEvent,
+  InputRows,
+  CustomLayerOptions,
+  Point,
+  TrackMapProps,
+  setDashboardTimeRangeFunction,
+} from './types';
 import { LAYERS } from './layers';
 
 function log(...args: any) {
@@ -198,15 +205,23 @@ class TrackMapState {
     }
   }
 
-  setDefaultLayer(layerName: string) {
-    log('setDefaultLayer', layerName);
+  setDefaultLayer(layerName: string, customLayer: CustomLayerOptions) {
+    log('setDefaultLayer', layerName, customLayer);
     this.removeLines();
 
-    // Remove all layers and add the new default
+    // Remove all layers and add the new one
     this.leafMap.eachLayer((layer) => {
       layer.removeFrom(this.leafMap);
     });
-    this.leafMap.addLayer(LAYERS[layerName]);
+    if (customLayer.enabled) {
+      this.leafMap.addLayer(
+        new TileLayer(customLayer.template, {
+          attribution: customLayer.attribution,
+        })
+      );
+    } else {
+      this.leafMap.addLayer(LAYERS[layerName]);
+    }
 
     this.addLinesToMap();
   }
@@ -474,8 +489,8 @@ export const TrackMapPanel: React.FC<TrackMapProps> = ({
   }, [options.scrollWheelZoom]);
 
   useEffect(() => {
-    mapState.current?.setDefaultLayer(options.defaultLayer);
-  }, [options.defaultLayer]);
+    mapState.current?.setDefaultLayer(options.defaultLayer, options.customLayer);
+  }, [options.defaultLayer, options.customLayer]);
 
   useEffect(() => {
     mapState.current?.setShowLayerChanger(options.showLayerChanger);

src/module.ts

@@ -45,5 +45,30 @@ export const plugin = new PanelPlugin<TrackMapOptions>(TrackMapPanel).setPanelOp
       description: 'The color to use to render the individual points',
       category: ['Colors'],
       defaultValue: 'royalblue',
+    })
+    .addNestedOptions({
+      path: 'customLayer',
+      category: ['Custom tile layer'],
+      build(subbuilder) {
+        subbuilder
+          .addBooleanSwitch({
+            path: 'enabled',
+            name: 'Custom layer',
+            description: 'Use a custom tile layer? This will disable all other layers',
+            defaultValue: false,
+          })
+          .addTextInput({
+            path: 'template',
+            name: 'URL template',
+            description: 'Must include {x}, {y} or {-y}, and {z} placeholders',
+            defaultValue: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+          })
+          .addTextInput({
+            name: 'attribution',
+            path: 'attribution',
+            description: 'Attribution text for the tiles',
+            defaultValue: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+          });
+      },
     });
 });

src/types.ts

@@ -1,13 +1,19 @@
 import { PanelProps } from '@grafana/data';
 import { LatLng, LatLngBounds, LeafletEvent } from 'leaflet';
 
+export interface CustomLayerOptions {
+  enabled: boolean;
+  template: string;
+  attribution: string;
+}
 export interface TrackMapOptions {
   autoZoom: boolean;
   scrollWheelZoom: boolean;
   defaultLayer: string;
   showLayerChanger: boolean;
   lineColor: string;
   pointColor: string;
+  customLayer: CustomLayerOptions;
 }
 
 export interface TrackMapProps extends PanelProps<TrackMapOptions> {}

tests/panel.spec.ts

@@ -1,10 +1,10 @@
 import { test, expect } from '@grafana/plugin-e2e';
 
-test('should display "No data" in case panel data is empty', async ({
-  gotoPanelEditPage,
-  readProvisionedDashboard,
-}) => {
+test('panels should be defined', async ({ gotoPanelEditPage, readProvisionedDashboard }) => {
   const dashboard = await readProvisionedDashboard({ fileName: 'dashboard.json' });
-  const panelEditPage = await gotoPanelEditPage({ dashboard, id: '2' });
-  await expect(panelEditPage.panel.locator).toContainText('No data');
+  const panel1EditPage = await gotoPanelEditPage({ dashboard, id: '1' });
+  await expect(panel1EditPage.panel.locator).toBeDefined();
+
+  const panel2EditPage = await gotoPanelEditPage({ dashboard, id: '2' });
+  await expect(panel2EditPage.panel.locator).toBeDefined();
 });