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 + } + } + ] +}