diff --git a/devenv/dev-dashboards/panel-geomap/geomap-route-layer.json b/devenv/dev-dashboards/panel-geomap/geomap-route-layer.json index f91036ace8b..c6b1752bd2a 100644 --- a/devenv/dev-dashboards/panel-geomap/geomap-route-layer.json +++ b/devenv/dev-dashboards/panel-geomap/geomap-route-layer.json @@ -29,20 +29,22 @@ "liveNow": false, "panels": [ { - "datasource": { - "type": "testdata", - "uid": "PD8C576611E62080A" + "id": 2, + "type": "geomap", + "title": "Multiple Layer Types", + "gridPos": { + "x": 0, + "y": 0, + "h": 16, + "w": 18 }, "fieldConfig": { "defaults": { - "color": { - "mode": "continuous-RdYlGr" - }, "custom": { "hideFrom": { - "legend": false, "tooltip": false, - "viz": false + "viz": false, + "legend": false } }, "mappings": [], @@ -51,7 +53,7 @@ "steps": [ { "color": "dark-red", - "value": 0 + "value": null }, { "color": "yellow", @@ -62,18 +64,59 @@ "value": 100 } ] + }, + "color": { + "mode": "continuous-RdYlGr" } }, "overrides": [] }, - "gridPos": { - "h": 16, - "w": 18, - "x": 0, - "y": 0 + "pluginVersion": "11.6.0-pre", + "targets": [ + { + "csvContent": "lat,lon,val\n-5,2,0\n1,5,25\n6,10,50\n9,15,75\n10,20,100", + "datasource": { + "type": "testdata", + "uid": "PD8C576611E62080A" + }, + "refId": "A", + "scenarioId": "csv_content" + }, + { + "scenarioId": "csv_content", + "refId": "B", + "datasource": { + "uid": "PD8C576611E62080A", + "type": "grafana-testdata-datasource" + }, + "csvContent": "lat,lon,alt\n45,0,0\n40,5,5\n35,10,10\n30,15, 15\n25,20,20" + } + ], + "datasource": { + "type": "testdata", + "uid": "PD8C576611E62080A" }, - "id": 2, "options": { + "view": { + "allLayers": true, + "id": "fit", + "lat": 2.359794, + "lon": 8.135816, + "zoom": 15, + "lastOnly": false, + "layer": "markers" + }, + "controls": { + "showZoom": true, + "mouseWheelZoom": true, + "showAttribution": true, + "showScale": false, + "showMeasure": false, + "showDebug": false + }, + "tooltip": { + "mode": "details" + }, "basemap": { "config": { "server": "streets" @@ -81,14 +124,6 @@ "name": "Layer 0", "type": "esri-xyz" }, - "controls": { - "mouseWheelZoom": true, - "showAttribution": true, - "showDebug": false, - "showMeasure": false, - "showScale": false, - "showZoom": true - }, "layers": [ { "config": { @@ -128,36 +163,108 @@ "location": { "mode": "auto" }, - "name": "Layer 2", + "name": "route", "tooltip": true, "type": "route" - } - ], - "tooltip": { - "mode": "details" - }, - "view": { - "allLayers": true, - "id": "coords", - "lat": 2.359794, - "lon": 8.135816, - "zoom": 4.45 - } - }, - "pluginVersion": "9.4.0-pre", - "targets": [ - { - "csvContent": "lat,lon,val\n-5,2,0\n1,5,25\n6,10,50\n9,15,75\n10,20,100", - "datasource": { - "type": "testdata", - "uid": "PD8C576611E62080A" }, - "refId": "A", - "scenarioId": "csv_content" - } - ], - "title": "Route with Colors", - "type": "geomap" + { + "type": "geojson", + "name": "geojson", + "config": { + "src": "public/maps/example-with-style.geojson", + "rules": [], + "style": { + "size": { + "fixed": 5, + "min": 2, + "max": 15 + }, + "color": { + "fixed": "dark-green" + }, + "opacity": 0.4, + "symbol": { + "mode": "fixed", + "fixed": "img/icons/marker/circle.svg" + }, + "symbolAlign": { + "horizontal": "center", + "vertical": "center" + }, + "textConfig": { + "fontSize": 12, + "textAlign": "center", + "textBaseline": "middle", + "offsetX": 0, + "offsetY": 0 + }, + "rotation": { + "fixed": 0, + "mode": "mod", + "min": -360, + "max": 360 + } + } + }, + "location": { + "mode": "auto" + }, + "tooltip": true, + "filterData": { + "id": "byRefId", + "options": "B" + } + }, + { + "type": "markers", + "name": "markers", + "config": { + "style": { + "size": { + "fixed": 5, + "min": 2, + "max": 15 + }, + "color": { + "fixed": "dark-green", + "field": "alt" + }, + "opacity": 0.4, + "symbol": { + "mode": "fixed", + "fixed": "img/icons/marker/circle.svg" + }, + "symbolAlign": { + "horizontal": "center", + "vertical": "center" + }, + "textConfig": { + "fontSize": 12, + "textAlign": "center", + "textBaseline": "middle", + "offsetX": 0, + "offsetY": 0 + }, + "rotation": { + "fixed": 0, + "mode": "mod", + "min": -360, + "max": 360 + } + }, + "showLegend": true + }, + "location": { + "mode": "auto" + }, + "tooltip": true, + "filterData": { + "id": "byRefId", + "options": "B" + } + } + ] + } } ], "schemaVersion": 37, @@ -171,7 +278,7 @@ }, "timepicker": {}, "timezone": "", - "title": "Panel Tests - Geomap Route Layer", + "title": "Panel Tests - Geomap Fit to Data - Multiple Layer Types", "uid": "OYTKK3DVk", "version": 25, "weekStart": "" diff --git a/public/app/plugins/panel/geomap/editor/FitMapViewEditor.tsx b/public/app/plugins/panel/geomap/editor/FitMapViewEditor.tsx index 51817507c8a..d0a05b262af 100644 --- a/public/app/plugins/panel/geomap/editor/FitMapViewEditor.tsx +++ b/public/app/plugins/panel/geomap/editor/FitMapViewEditor.tsx @@ -54,7 +54,7 @@ export const FitMapViewEditor = ({ labelWidth, value, onChange, context }: Props const allLayersEditorFragment = ( - ); diff --git a/public/app/plugins/panel/geomap/utils/getLayersExtent.ts b/public/app/plugins/panel/geomap/utils/getLayersExtent.ts index 2ab535a61d7..ed5a46442d9 100644 --- a/public/app/plugins/panel/geomap/utils/getLayersExtent.ts +++ b/public/app/plugins/panel/geomap/utils/getLayersExtent.ts @@ -14,14 +14,19 @@ export function getLayersExtent( return layers .filter((l) => l.layer instanceof VectorLayer || l.layer instanceof LayerGroup || l.layer instanceof VectorImage) .flatMap((ll) => { + const layerName = ll.options.name; const l = ll.layer; if (l instanceof LayerGroup) { - return getLayerGroupExtent(l); + // If not all layers check for matching layer name + if (!allLayers && layerName !== layer) { + return []; + } + return getLayerGroupExtent(l, lastOnly); } else if (l instanceof VectorLayer || l instanceof VectorImage) { if (allLayers) { // Return everything from all layers return [l.getSource().getExtent()]; - } else if (lastOnly && layer === ll.options.name) { + } else if (lastOnly && layer === layerName) { // Return last only for selected layer const feat = l.getSource().getFeatures(); const featOfInterest = feat[feat.length - 1]; @@ -30,7 +35,7 @@ export function getLayersExtent( return [geo.getExtent()]; } return []; - } else if (!lastOnly && layer === ll.options.name) { + } else if (!lastOnly && layer === layerName) { // Return all points for selected layer return [l.getSource().getExtent()]; } @@ -42,13 +47,30 @@ export function getLayersExtent( .reduce(extend, createEmpty()); } -export function getLayerGroupExtent(lg: LayerGroup) { +export function getLayerGroupExtent(lg: LayerGroup, lastOnly: boolean) { return lg .getLayers() .getArray() - .filter((l) => l instanceof VectorLayer) + .filter((l) => l instanceof VectorLayer || l instanceof VectorImage) .map((l) => { - if (l instanceof VectorLayer) { + if (l instanceof VectorLayer || l instanceof VectorImage) { + if (lastOnly) { + // Return last coordinate only + const feat = l.getSource().getFeatures(); + const featOfInterest = feat[feat.length - 1]; + const geo = featOfInterest?.getGeometry(); + if (geo) { + // Look at flatCoordinates for more robust support including route layer + const flatCoordinates = geo.flatCoordinates; + const flatCoordinatesLength = flatCoordinates.length; + if (flatCoordinatesLength > 1) { + const lastX = flatCoordinates[flatCoordinatesLength - 2]; + const lastY = flatCoordinates[flatCoordinatesLength - 1]; + return [lastX, lastY, lastX, lastY]; + } + } + return []; + } return l.getSource().getExtent() ?? []; } else { return [];