Geomap: Update markers layer styles (#43446)

* update markerslayer styles

* use static style when possible

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>

public/app/plugins/panel/geomap/layers/data/markersLayer.tsx

@@ -7,9 +7,8 @@ import {
   FrameGeometrySourceMode,
 } from '@grafana/data';
 import Map from 'ol/Map';
-import Feature from 'ol/Feature';
+import Feature, { FeatureLike } from 'ol/Feature';
 import { Point } from 'ol/geom';
-import * as layer from 'ol/layer';
 import * as source from 'ol/source';
 import { dataFrameToPoints, getLocationMatchers } from '../../utils/location';
 import { getScaledDimension, getColorDimension, getTextDimension, getScalarDimension } from 'app/features/dimensions';
@@ -20,6 +19,8 @@ import { getFeatures } from '../../utils/getFeatures';
 import { defaultStyleConfig, StyleConfig, StyleDimensions } from '../../style/types';
 import { StyleEditor } from './StyleEditor';
 import { getStyleConfigState } from '../../style/utils';
+import VectorLayer from 'ol/layer/Vector';
+import { isNumber } from 'lodash';
 
 // Configuration options for Circle overlays
 export interface MarkersConfig {
@@ -61,7 +62,6 @@ export const markersLayer: MapLayerRegistryItem<MarkersConfig> = {
    */
   create: async (map: Map, options: MapLayerOptions<MarkersConfig>, theme: GrafanaTheme2) => {
     const matchers = await getLocationMatchers(options.location);
-    const vectorLayer = new layer.Vector({});
     // Assert default values
     const config = {
       ...defaultOptions,
@@ -74,12 +74,41 @@ export const markersLayer: MapLayerRegistryItem<MarkersConfig> = {
       legend = <ObservablePropsWrapper watch={legendProps} initialSubProps={{}} child={MarkersLegend} />;
     }
 
-    // Set the default style
     const style = await getStyleConfigState(config.style);
-    if (!style.fields) {
-      vectorLayer.setStyle(style.maker(style.base));
-    }
 
+    // eventually can also use resolution for dynamic style
+    const vectorLayer = new VectorLayer();
+
+    if(!style.fields) {
+      // Set a global style
+      vectorLayer.setStyle(style.maker(style.base));
+    } else {
+      vectorLayer.setStyle((feature: FeatureLike) => {
+        const idx = feature.get("rowIndex") as number;
+        const dims = style.dims;
+        if(!dims || !(isNumber(idx))) {
+          return style.maker(style.base);
+        }
+
+        const values = {...style.base};
+
+        if (dims.color) {
+          values.color = dims.color.get(idx);
+        }
+        if (dims.size) {
+          values.size = dims.size.get(idx);
+        }
+        if (dims.text) {
+          values.text = dims.text.get(idx);
+        }
+        if (dims.rotation) {
+          values.rotation = dims.rotation.get(idx);
+        }
+        return style.maker(values)
+      }
+      );
+    }
+    
     return {
       init: () => vectorLayer,
       legend: legend,
@@ -114,7 +143,7 @@ export const markersLayer: MapLayerRegistryItem<MarkersConfig> = {
             style.dims = dims;
           }
 
-          const frameFeatures = getFeatures(frame, info, style);
+          const frameFeatures = getFeatures(frame, info);
 
           if (frameFeatures) {
             features.push(...frameFeatures);

public/app/plugins/panel/geomap/utils/getFeatures.ts

@@ -2,45 +2,21 @@ import { DataFrame, SelectableValue } from '@grafana/data';
 import { Feature } from 'ol';
 import { FeatureLike } from 'ol/Feature';
 import { Point } from 'ol/geom';
-import { GeometryTypeId, StyleConfigState } from '../style/types';
+import { GeometryTypeId } from '../style/types';
 import { LocationInfo } from './location';
 
-export const getFeatures = (
-  frame: DataFrame,
-  info: LocationInfo,
-  style: StyleConfigState
-): Array<Feature<Point>> | undefined => {
+export const getFeatures = (frame: DataFrame, info: LocationInfo): Array<Feature<Point>> | undefined => {
   const features: Array<Feature<Point>> = [];
-  const { dims } = style;
-  const values = { ...style.base };
 
   // Map each data value into new points
   for (let i = 0; i < frame.length; i++) {
-    // Create a new Feature for each point returned from dataFrameToPoints
-    const dot = new Feature(info.points[i]);
-    dot.setProperties({
-      frame,
-      rowIndex: i,
-    });
-
-    // Update values used in dynamic styles
-    if (dims) {
-      if (dims.color) {
-        values.color = dims.color.get(i);
-      }
-      if (dims.size) {
-        values.size = dims.size.get(i);
-      }
-      if (dims.rotation) {
-        values.rotation = dims.rotation.get(i);
-      }
-      if (dims.text) {
-        values.text = dims.text.get(i);
-      }
-
-      dot.setStyle(style.maker(values));
-    }
-    features.push(dot);
+    features.push(
+      new Feature({
+        frame,
+        rowIndex: i,
+        geometry: info.points[i],
+      })
+    );
   }
 
   return features;