diff --git a/docs/sources/panels-visualizations/visualizations/geomap/index.md b/docs/sources/panels-visualizations/visualizations/geomap/index.md
index ce21ee42621..8abc60912e7 100644
--- a/docs/sources/panels-visualizations/visualizations/geomap/index.md
+++ b/docs/sources/panels-visualizations/visualizations/geomap/index.md
@@ -282,6 +282,26 @@ The GeoJSON layer allows you to select and load a static GeoJSON file from the f
- **Add style rule** creates additional style rules.
- **Display tooltip** allows you to toggle tooltips for the layer.
+{{% admonition type="note" %}}
+Styles can be set within the "properties" object of the GeoJSON with support for the following geometries:
+
+- Polygon, MultiPolygon
+
+ - **"fill"** - The color of the interior of the polygon(s)
+ - **"fill-opacity"** - The opacity of the interior of the polygon(s)
+ - **"stroke-width"** - The width of the line component of the polygon(s)
+
+- Point, MultiPoint
+
+ - **"marker-color"** - The color of the point(s)
+ - **"marker-size"** - The size of the point(s)
+
+- LineString, MultiLineString
+ - **"stroke"** - The color of the line(s)
+ - **"stroke-width"** - The width of the line(s)
+
+{{% /admonition %}}
+
## Night / Day layer
The Night / Day layer displays night and day regions based on the current time range.
@@ -457,7 +477,7 @@ A map from a collaborative free geographic world database.
### More Information
-- [**About Open Street Map**](https://www.openstreetmap.org/about)\
+- [**About Open Street Map**](https://www.openstreetmap.org/about)
## ArcGIS layer
@@ -536,7 +556,7 @@ Displays measure tools in the upper right corner. Measurements appear only when
- **Double-click** to end measurement
{{% admonition type="note" %}}
-
= {
});
}
+ const polyStyleStrings: string[] = Object.values(GeoJSONPolyStyles);
+ const pointStyleStrings: string[] = Object.values(GeoJSONPointStyles);
+ const lineStyleStrings: string[] = Object.values(GeoJSONLineStyles);
const vectorLayer = new VectorLayer({
source,
style: (feature: FeatureLike) => {
- const isPoint = feature.getGeometry()?.getType() === 'Point';
+ const featureType = feature.getGeometry()?.getType();
+ const isPoint = featureType === 'Point' || featureType === 'MultiPoint';
+ const isPolygon = featureType === 'Polygon' || featureType === 'MultiPolygon';
+ const isLine = featureType === 'LineString' || featureType === 'MultiLineString';
for (const check of styles) {
if (check.rule && !checkFeatureMatchesStyleRule(check.rule, feature)) {
@@ -131,6 +139,29 @@ export const geojsonLayer: MapLayerRegistryItem = {
return polyStyle(values);
}
+ // Support styling polygons from Feature properties
+ const featureProps = feature.getProperties();
+ if (isPolygon && Object.keys(featureProps).some((property) => polyStyleStrings.includes(property))) {
+ const values: StyleConfigValues = {
+ color: featureProps[GeoJSONPolyStyles.color] ?? check.state.base.color,
+ opacity: featureProps[GeoJSONPolyStyles.opacity] ?? check.state.base.opacity,
+ lineWidth: featureProps[GeoJSONPolyStyles.lineWidth] ?? check.state.base.lineWidth,
+ };
+ return polyStyle(values);
+ } else if (isLine && Object.keys(featureProps).some((property) => lineStyleStrings.includes(property))) {
+ const values: StyleConfigValues = {
+ color: featureProps[GeoJSONLineStyles.color] ?? check.state.base.color,
+ lineWidth: featureProps[GeoJSONLineStyles.lineWidth] ?? check.state.base.lineWidth,
+ };
+ return check.state.maker(values);
+ } else if (isPoint && Object.keys(featureProps).some((property) => pointStyleStrings.includes(property))) {
+ const values: StyleConfigValues = {
+ color: featureProps[GeoJSONPointStyles.color] ?? check.state.base.color,
+ size: featureProps[GeoJSONPointStyles.size] ?? check.state.base.size,
+ };
+ return check.state.maker(values);
+ }
+
// Lazy create the style object
if (isPoint) {
if (!check.point) {
@@ -196,4 +227,3 @@ export const geojsonLayer: MapLayerRegistryItem = {
},
defaultOptions,
};
-
diff --git a/public/app/plugins/panel/geomap/style/types.ts b/public/app/plugins/panel/geomap/style/types.ts
index cf8bc2c96ce..7d7d35af89a 100644
--- a/public/app/plugins/panel/geomap/style/types.ts
+++ b/public/app/plugins/panel/geomap/style/types.ts
@@ -127,6 +127,22 @@ export interface StyleConfigValues {
textConfig?: TextStyleConfig;
}
+export enum GeoJSONPolyStyles {
+ color = 'fill',
+ opacity = 'fill-opacity',
+ lineWidth = 'stroke-width',
+}
+
+export enum GeoJSONPointStyles {
+ color = 'marker-color',
+ size = 'marker-size',
+}
+
+export enum GeoJSONLineStyles {
+ color = 'stroke',
+ lineWidth = 'stroke-width',
+}
+
/** When the style depends on a field */
export interface StyleConfigFields {
color?: string;
diff --git a/public/maps/example-with-style.geojson b/public/maps/example-with-style.geojson
new file mode 100644
index 00000000000..932ed42bce7
--- /dev/null
+++ b/public/maps/example-with-style.geojson
@@ -0,0 +1,150 @@
+{
+ "type": "FeatureCollection",
+ "name": "Example with Style",
+ "features": [
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "Bermuda Triangle",
+ "fill": "red",
+ "fill-opacity": 0.5,
+ "stroke-width": 10
+ },
+ "geometry": {
+ "type": "Polygon",
+ "coordinates": [
+ [
+ [-80.226529, 25.789106],
+ [-66.1057427, 18.4663188],
+ [-64.78138, 32.294887]
+ ]
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "Bermuda Triangles",
+ "fill": "red",
+ "fill-opacity": 0.1,
+ "stroke-width": 1
+ },
+ "geometry": {
+ "type": "MultiPolygon",
+ "coordinates": [
+ [
+ [
+ [-72.5039545, 29.0419965],
+ [-73.16613585, 22.1277124],
+ [-80.226529, 25.789106]
+ ],
+ [
+ [-65.44356135, 25.3806029],
+ [-73.16613585, 22.12771244],
+ [-66.1057427, 18.4663188]
+ ],
+ [
+ [-65.44356135, 25.3806029],
+ [-72.5039545, 29.0419965],
+ [-64.78138, 32.294887]
+ ]
+ ]
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "geometry": { "type": "Point", "coordinates": [-80.226529, 25.789106] },
+ "properties": {
+ "name": "Miami",
+ "marker-color": "rgb(255,255,0)",
+ "marker-size": 20
+ }
+ },
+ {
+ "type": "Feature",
+ "geometry": {
+ "type": "MultiPoint",
+ "coordinates": [
+ [-66.1057427, 18.4663188],
+ [-64.78138, 32.294887]
+ ]
+ },
+ "properties": {
+ "name": "San Juan and Hamilton",
+ "marker-color": "#F99E26",
+ "marker-size": 10
+ }
+ },
+ {
+ "type": "Feature",
+ "geometry": {
+ "type": "LineString",
+ "coordinates": [
+ [-77.76975242, 13.2503978],
+ [-73.16613585, 22.1277124]
+ ]
+ },
+ "properties": {
+ "name": "Line 1",
+ "stroke": "red",
+ "stroke-width": 2
+ }
+ },
+ {
+ "type": "Feature",
+ "geometry": {
+ "type": "LineString",
+ "coordinates": [
+ [-55.48910779, 24.42726436],
+ [-65.44356135, 25.3806029]
+ ]
+ },
+ "properties": {
+ "name": "Line 2",
+ "stroke": "white",
+ "stroke-width": 2
+ }
+ },
+ {
+ "type": "Feature",
+ "geometry": {
+ "type": "LineString",
+ "coordinates": [
+ [-76.38582213, 38.25780378],
+ [-72.5039545, 29.0419965]
+ ]
+ },
+ "properties": {
+ "name": "Line 3",
+ "stroke": "blue",
+ "stroke-width": 2
+ }
+ },
+ {
+ "type": "Feature",
+ "geometry": {
+ "type": "MultiLineString",
+ "coordinates": [
+ [
+ [-80.226529, 25.789106],
+ [-66.1057427, 18.4663188]
+ ],
+ [
+ [-66.1057427, 18.4663188],
+ [-64.78138, 32.294887]
+ ],
+ [
+ [-64.78138, 32.294887],
+ [-80.226529, 25.789106]
+ ]
+ ]
+ },
+ "properties": {
+ "name": "Bermuda Triangle Thin Line",
+ "stroke": "yellow",
+ "stroke-width": 1
+ }
+ }
+ ]
+}