Skip to content

Commit 1184dc5

Browse files
jbelienjbelien
committed
Refactor styling (#151)
1 parent 474b3ec commit 1184dc5

File tree

10 files changed

+289
-132
lines changed

10 files changed

+289
-132
lines changed

‎resources/javascript/map/style.ts

+30-132
Original file line numberDiff line numberDiff line change
@@ -5,151 +5,49 @@ import Feature from "ol/Feature";
55
import { Circle, Fill, RegularShape, Stroke, Style } from "ol/style";
66
import Text from "ol/style/Text";
77

8-
function setImage(
9-
symbol: string,
10-
stroke: Stroke,
11-
fill: Fill,
12-
size: number
13-
): Circle | RegularShape {
14-
switch (symbol.toLowerCase()) {
15-
case "circle":
16-
default:
17-
return new Circle({
18-
fill: fill,
19-
stroke: stroke,
20-
radius: size,
21-
});
22-
case "cross":
23-
return new RegularShape({
24-
fill: fill,
25-
stroke: stroke,
26-
points: 4,
27-
radius: size,
28-
radius2: 0,
29-
angle: Math.PI / 4,
30-
});
31-
case "square":
32-
return new RegularShape({
33-
fill: fill,
34-
stroke: stroke,
35-
points: 4,
36-
radius: size,
37-
angle: Math.PI / 4,
38-
});
39-
case "star":
40-
return new RegularShape({
41-
fill: fill,
42-
stroke: stroke,
43-
points: 5,
44-
radius: size,
45-
radius2: size - 5,
46-
angle: 0,
47-
});
48-
case "triangle":
49-
return new RegularShape({
50-
fill: fill,
51-
stroke: stroke,
52-
points: 3,
53-
radius: size,
54-
angle: 0,
55-
});
56-
}
57-
}
8+
import stylePoint from "./style/point";
9+
import styleLine from "./style/line";
10+
import stylePolygon from "./style/polygon";
11+
import text from "./style/text";
5812

59-
export default function style(
13+
export default function (
6014
feature: Feature,
6115
labelColumn: string,
62-
color: string | Color,
16+
layerColor: string | Color | null,
6317
resolution: number
6418
) {
6519
const type = feature.getGeometry().getType();
6620
const properties = feature.getProperties();
6721

68-
const fill = new Fill({
69-
color: "rgba(0,0,0,0.4)",
70-
});
71-
const stroke = new Stroke({
72-
color: "#000",
73-
width: 1.25,
74-
});
75-
76-
// Color defined in layers settings.
77-
if (color !== null) {
78-
stroke.setColor(color);
79-
80-
const fillColor = colorAsArray(color);
81-
fillColor[3] = type === "Point" || type === "MultiPoint" ? 0.7 : 0.4;
82-
fill.setColor(fillColor);
83-
}
84-
// Color from Feature properties.
85-
else if (
86-
typeof properties.color !== "undefined" &&
87-
properties.color !== null
88-
) {
89-
stroke.setColor(colorAsArray(properties.color));
90-
91-
const fillColor = colorAsArray(properties.color);
92-
fillColor[3] = type === "Point" || type === "MultiPoint" ? 0.7 : 0.4;
93-
fill.setColor(fillColor);
94-
}
95-
96-
const symbol = properties["marker-symbol"] || "circle";
97-
const image = setImage(symbol, stroke, fill, properties["marker-size"] || 5);
98-
99-
return [
100-
new Style({
101-
image,
102-
fill: fill,
103-
stroke: stroke,
104-
text: text(feature, labelColumn),
105-
}),
106-
];
107-
}
108-
109-
function text(feature: Feature, labelColumn: string) {
110-
const type = feature.getGeometry().getType();
111-
const properties = feature.getProperties();
112-
113-
const label =
114-
labelColumn !== null && typeof properties[labelColumn] !== "undefined"
115-
? properties[labelColumn]
22+
const color =
23+
layerColor !== null
24+
? layerColor
25+
: typeof properties.color !== "undefined"
26+
? properties.color
11627
: null;
11728

118-
if (label !== null) {
119-
const textOptions = {
120-
stroke: new Stroke({
121-
color: "#fff",
122-
width: 2,
123-
}),
124-
text: label.toString(),
125-
};
126-
127-
switch (type) {
128-
case "Point":
129-
case "MultiPoint":
130-
Object.assign(textOptions, {
131-
offsetY: 12,
132-
});
133-
break;
29+
let style = new Style();
13430

135-
case "LineString":
136-
case "MultiLineString":
137-
Object.assign(textOptions, {
138-
overflow: true,
139-
placement: "line",
140-
});
141-
break;
31+
switch (type) {
32+
case "Point":
33+
case "MultiPoint": {
34+
const symbol = properties["marker-symbol"] || null;
35+
const size = properties["marker-size"] || null;
14236

143-
case "Polygon":
144-
case "MultiPolygon":
145-
Object.assign(textOptions, {
146-
overflow: true,
147-
});
148-
break;
37+
style = stylePoint(color, size, symbol);
38+
break;
14939
}
150-
151-
return new Text(textOptions);
40+
case "LineString":
41+
case "MultiLineString":
42+
style = styleLine(color, null, null);
43+
break;
44+
case "Polygon":
45+
case "MultiPolygon":
46+
style = stylePolygon(color, null, null, color, null);
47+
break;
15248
}
15349

154-
return null;
50+
style.setText(text(feature, labelColumn));
51+
52+
return style;
15553
}

‎resources/javascript/map/style/line.ts

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
"use strict";
2+
3+
import { asArray, Color } from "ol/color";
4+
import { Stroke, Style } from "ol/style";
5+
6+
export default function (
7+
color: string | Color | null,
8+
width: number | null,
9+
opacity: number | null
10+
): Style {
11+
if (color === null) {
12+
color = [0, 0, 0] as Color;
13+
}
14+
if (width === null) {
15+
width = 2.5;
16+
}
17+
if (opacity === null) {
18+
opacity = 0.4;
19+
}
20+
21+
const colorArray = asArray(color);
22+
colorArray[3] = opacity;
23+
24+
return new Style({
25+
stroke: new Stroke({
26+
color: colorArray,
27+
width,
28+
}),
29+
});
30+
}

‎resources/javascript/map/style/marker/circle.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
"use strict";
2+
3+
import { Circle, Fill, Stroke } from "ol/style";
4+
5+
export default function (stroke: Stroke, fill: Fill, size: number): Circle {
6+
return new Circle({
7+
fill,
8+
stroke,
9+
radius: size,
10+
});
11+
}

‎resources/javascript/map/style/marker/cross.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
"use strict";
2+
3+
import { Fill, RegularShape, Stroke } from "ol/style";
4+
5+
export default function (
6+
stroke: Stroke,
7+
fill: Fill,
8+
size: number
9+
): RegularShape {
10+
return new RegularShape({
11+
fill,
12+
stroke,
13+
points: 4,
14+
radius: size,
15+
radius2: 0,
16+
angle: Math.PI / 4,
17+
});
18+
}

‎resources/javascript/map/style/marker/square.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
"use strict";
2+
3+
import { Fill, RegularShape, Stroke } from "ol/style";
4+
5+
export default function (
6+
stroke: Stroke,
7+
fill: Fill,
8+
size: number
9+
): RegularShape {
10+
return new RegularShape({
11+
fill,
12+
stroke,
13+
points: 4,
14+
radius: size,
15+
angle: Math.PI / 4,
16+
});
17+
}

‎resources/javascript/map/style/marker/star.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
"use strict";
2+
3+
import { Fill, RegularShape, Stroke } from "ol/style";
4+
5+
export default function (
6+
stroke: Stroke,
7+
fill: Fill,
8+
size: number
9+
): RegularShape {
10+
return new RegularShape({
11+
fill,
12+
stroke,
13+
points: 5,
14+
radius: size,
15+
radius2: size - 5,
16+
angle: 0,
17+
});
18+
}

‎resources/javascript/map/style/marker/triangle.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
"use strict";
2+
3+
import { Fill, RegularShape, Stroke } from "ol/style";
4+
5+
export default function (
6+
stroke: Stroke,
7+
fill: Fill,
8+
size: number
9+
): RegularShape {
10+
return new RegularShape({
11+
fill,
12+
stroke,
13+
points: 3,
14+
radius: size,
15+
angle: 0,
16+
});
17+
}

‎resources/javascript/map/style/point.ts

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
"use strict";
2+
3+
import { asArray, Color } from "ol/color";
4+
import { Fill, Stroke, Style } from "ol/style";
5+
6+
import markerCircle from "./marker/circle";
7+
import markerCross from "./marker/cross";
8+
import markerSquare from "./marker/square";
9+
import markerStar from "./marker/star";
10+
import markerTriangle from "./marker/triangle";
11+
12+
export default function (
13+
color: string | Color | null,
14+
size: number | null,
15+
symbol: string | null
16+
): Style {
17+
if (color === null) {
18+
color = [0, 0, 0] as Color;
19+
}
20+
if (size === null) {
21+
size = 5;
22+
}
23+
if (symbol === null) {
24+
symbol = "circle";
25+
}
26+
27+
const colorArray = asArray(color);
28+
colorArray[3] = 0.8;
29+
30+
const fill = new Fill({
31+
color: colorArray,
32+
});
33+
const stroke = new Stroke({
34+
color,
35+
width: 1.25,
36+
});
37+
38+
switch (symbol.toLowerCase()) {
39+
case "circle":
40+
default:
41+
return new Style({ image: markerCircle(stroke, fill, size) });
42+
case "cross":
43+
return new Style({ image: markerCross(stroke, fill, size) });
44+
case "square":
45+
return new Style({ image: markerSquare(stroke, fill, size) });
46+
case "star":
47+
return new Style({ image: markerStar(stroke, fill, size) });
48+
case "triangle":
49+
return new Style({ image: markerTriangle(stroke, fill, size) });
50+
}
51+
}

‎resources/javascript/map/style/polygon.ts

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
"use strict";
2+
3+
import { asArray, Color } from "ol/color";
4+
import { Fill, Stroke, Style } from "ol/style";
5+
6+
export default function (
7+
strokeColor: string | Color | null,
8+
strokeWidth: number | null,
9+
strokeOpacity: number | null,
10+
fillColor: string | Color | null,
11+
fillOpacity: number | null
12+
): Style {
13+
if (strokeColor === null) {
14+
strokeColor = [0, 0, 0] as Color;
15+
}
16+
if (strokeWidth === null) {
17+
strokeWidth = 1.25;
18+
}
19+
if (strokeOpacity === null) {
20+
strokeOpacity = 1;
21+
}
22+
if (fillColor === null) {
23+
fillColor = [0, 0, 0] as Color;
24+
}
25+
if (fillOpacity === null) {
26+
fillOpacity = 0.4;
27+
}
28+
29+
const strokeColorArray = asArray(strokeColor);
30+
strokeColorArray[3] = strokeOpacity;
31+
32+
const fillColorArray = asArray(fillColor);
33+
fillColorArray[3] = fillOpacity;
34+
35+
return new Style({
36+
stroke: new Stroke({
37+
color: strokeColorArray,
38+
width: strokeWidth,
39+
}),
40+
fill: new Fill({
41+
color: fillColorArray,
42+
}),
43+
});
44+
}

0 commit comments

Comments
 (0)