Mercurial > gemma

changeset 2568:c546e38008de

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: improved gauge layer icon
author Markus Kottlaender <markus@intevation.de>
date Mon, 11 Mar 2019 12:05:38 +0100
parents 1cac2e58ef7d
children 2d18b8d5b9db
files client/src/assets/marker-gauge.png client/src/store/map.js
diffstat 2 files changed, 28 insertions(+), 26 deletions(-) [+]
line wrap: on
line diff
Binary file client/src/assets/marker-gauge.png has changed
--- a/client/src/store/map.js	Mon Mar 11 12:02:47 2019 +0100
+++ b/client/src/store/map.js	Mon Mar 11 12:05:38 2019 +0100
@@ -20,15 +20,7 @@
 import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
 import OSM from "ol/source/OSM";
 import Draw from "ol/interaction/Draw.js";
-import {
-  Icon,
-  Stroke,
-  Style,
-  Fill,
-  Text,
-  Circle,
-  RegularShape
-} from "ol/style.js";
+import { Icon, Stroke, Style, Fill, Text, Circle } from "ol/style.js";
 import VectorSource from "ol/source/Vector.js";
 import Point from "ol/geom/Point.js";
 import { bbox as bboxStrategy } from "ol/loadingstrategy";
@@ -425,25 +417,35 @@
           source: new VectorSource({
             strategy: bboxStrategy
           }),
-          style: function(feature) {
-            return new Style({
-              image: new RegularShape({
-                radius: 6,
-                fill: new Fill({ color: "rgba(255, 255, 0, 0.1)" }),
-                stroke: new Stroke({ color: "red", width: 1 }),
-                points: 3,
-                rotation: 0,
-                angle: 0
+          style: function(feature, resolution, isLegend) {
+            return [
+              new Style({
+                image: new Icon({
+                  src: require("../assets/marker-gauge.png"),
+                  anchor: [0.5, isLegend ? 0.5 : 1],
+                  scale: isLegend ? 0.5 : 1
+                }),
+                text: new Text({
+                  font: '10px "Open Sans", "sans-serif"',
+                  offsetY: 8,
+                  fill: new Fill({
+                    color: "white"
+                  }),
+                  text: feature.get("objname")
+                })
               }),
-              text: new Text({
-                font: '10px "Open Sans", "sans-serif"',
-                offsetY: 10,
-                fill: new Fill({
-                  color: "black"
-                }),
-                text: feature.get("objname")
+              new Style({
+                text: new Text({
+                  font: '10px "Open Sans", "sans-serif"',
+                  offsetY: 7,
+                  offsetX: -1,
+                  fill: new Fill({
+                    color: "black"
+                  }),
+                  text: feature.get("objname")
+                })
               })
-            });
+            ];
           },
           maxResolution: 100,
           minResolution: 0