@mapsight/traffic-style 5.0.0

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@mapsight/traffic-style",
+  "description": "Mapsight Traffic Style",
+  "version": "5.0.0",
+  "type": "module",
+  "bin": {
+    "traffic-icon-sprite": "scripts/traffic-icon-sprite.ts",
+    "traffic-optimize-icons": "scripts/optimize-icons.ts"
+  },
+  "dependencies": {
+    "merge-stream": "^2.0.0",
+    "ol": "^10.9.0",
+    "sharp": "^0.34.5",
+    "svgo": "^4.0.1",
+    "vinyl": "^3.0.1",
+    "zod": "^4.4.3",
+    "@mapsight/lib-ol": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/markdown-table": "^2.0.0",
+    "@types/node": "^24.12.4",
+    "chokidar": "^5.0.0",
+    "fs-extra": "^11.3.5",
+    "markdown-table": "^2.0.0",
+    "vitest": "^4.1.6",
+    "@mapsight/vector-style-compiler": "^8.0.0"
+  },
+  "license": "UNLICENSED",
+  "main": "default.js",
+  "publishConfig": {
+    "directory": "dist",
+    "linkDirectory": true
+  },
+  "scripts": {
+    "build": "npm-run-all build:setup build:meta --parallel build:icons build:icons2x build:iconsSvg build:docs --sequential build:icon-sprites build:styles copy",
+    "build:docs": "run-p build:docs:overview",
+    "build:docs:overview": "node scripts/create-overview-md.ts ./src/icons/ ../img/mapsight-icons-svg/ > dist/docs/overview.md",
+    "build:icon-sprites": "run-p build:icon-sprites:*",
+    "build:icon-sprites:1x": "node scripts/traffic-icon-sprite.ts ./dist/img/mapsight-icons/ --sprite-name mapsight-traffic-style-icon-sprite-1x",
+    "build:icon-sprites:2x": "node scripts/traffic-icon-sprite.ts ./dist/img/mapsight-icons-2x/ --sprite-name mapsight-traffic-style-icon-sprite-2x",
+    "build:icons": "node scripts/optimize-icons.ts --src ./src/icons/ --dest ./dist/img/mapsight-icons/",
+    "build:icons2x": "node scripts/optimize-icons.ts --scale 2 --src ./src/icons/ --dest ./dist/img/mapsight-icons-2x/",
+    "build:iconsSvg": "node scripts/optimize-icons.ts --target svg --src ./src/icons/ --dest ./dist/img/mapsight-icons-svg/",
+    "build:meta": "node scripts/create-meta-json.ts ./src/meta.json ./src/icons/ > dist/meta.json",
+    "build:setup": "mkdirp dist/docs && mkdirp dist/img",
+    "build:styles": "vector-style-compiler src/scss/default.scss --output tmp/mapsight-vector-styles --name default && cp tmp/mapsight-vector-styles/default.css dist",
+    "clean": "rimraf tmp/* dist/*",
+    "clean-build": "run-s clean build",
+    "copy": "run-p copy:src copy:misc",
+    "copy:misc": "cp package.json README.md *.scss dist/",
+    "copy:scripts": "mkdirp dist; cp -r scripts dist/",
+    "copy:src": "mkdirp dist/src; cp -r src/scss dist/src/",
+    "lint": "eslint scripts",
+    "typecheck": "tsc --noEmit",
+    "watch": "echo \"Currently traffic-style does not support watch\""
+  }
+}

package/src/scss/_base.scss

@@ -0,0 +1,4 @@
+@use "./global";
+@use "./traffic";
+@use "./user-geolocation";
+@use "./features/base";

package/src/scss/_draw.scss

@@ -0,0 +1,12 @@
+#draw {
+	stroke-width: 4;
+	stroke-color: #467aff;
+	image-type: circle;
+
+	circle: {
+		radius: 5;
+		fill-color: white;
+		stroke-width: 2;
+		stroke-color: #467aff;
+	}
+}

package/src/scss/_full.scss

@@ -0,0 +1,5 @@
+@use "./base";
+@use "./traffic2";
+@use "./features/cluster";
+@use "./features/spread";
+@use "./draw";

package/src/scss/_global.scss

@@ -0,0 +1,24 @@
+@use "./variables";
+
+* {
+	zIndex: variables.$MAPSIGHT_TRAFFIC_STYLE__BASE_Z_INDEX;
+	fill-color: variables.$MAPSIGHT_TRAFFIC_STYLE__FILL_COLOR;
+	stroke-color: variables.$MAPSIGHT_TRAFFIC_STYLE__STROKE_COLOR;
+
+	text: {
+		font: variables.$MAPSIGHT_TRAFFIC_STYLE__TEXT_FONT;
+		fill-color: variables.$MAPSIGHT_TRAFFIC_STYLE__TEXT_FILL_COLOR;
+		stroke-color: variables.$MAPSIGHT_TRAFFIC_STYLE__TEXT_STROKE_COLOR;
+		stroke-width: variables.$MAPSIGHT_TRAFFIC_STYLE__TEXT_STROKE_WIDTH;
+	}
+
+	//[state = "modify"] {
+	//	image-type: circle;
+	//	icon-opacity: 1;
+	//	circle-radius: 6;
+	//	stroke-color: blue;
+	//	fill-color: rgba(0, 0, 255, 0.4);
+	//	stroke-width: 2;
+	//	icon-src: "";
+	//}
+}

package/src/scss/_icons-1x.scss

@@ -0,0 +1,9 @@
+@use "../../mapsight-traffic-style-icon-sprite-1x" as sprite;
+
+$MAPSIGHT_TRAFFIC_STYLE__SPRITE_PATH: "/img/mapsight-traffic-style-icon-sprite-1x.png?v=2023-08-07-16-00" !default;
+$MAPSIGHT_TRAFFIC_STYLE__ICONS: sprite.$mapsight-traffic-style-icon-sprite-1x !default;
+
+@use "./variables" with (
+	$MAPSIGHT_TRAFFIC_STYLE__SPRITE_PATH: $MAPSIGHT_TRAFFIC_STYLE__SPRITE_PATH,
+	$MAPSIGHT_TRAFFIC_STYLE__ICONS: $MAPSIGHT_TRAFFIC_STYLE__ICONS,
+);

package/src/scss/_icons-2x.scss

@@ -0,0 +1,9 @@
+@use "../../mapsight-traffic-style-icon-sprite-2x" as sprite;
+
+$MAPSIGHT_TRAFFIC_STYLE__SPRITE_PATH: "/img/mapsight-traffic-style-icon-sprite-2x.png?v=2023-08-07-16-00" !default;
+$MAPSIGHT_TRAFFIC_STYLE__ICONS: sprite.$mapsight-traffic-style-icon-sprite-2x !default;
+
+@use "./variables" with (
+	$MAPSIGHT_TRAFFIC_STYLE__SPRITE_PATH: $MAPSIGHT_TRAFFIC_STYLE__SPRITE_PATH,
+	$MAPSIGHT_TRAFFIC_STYLE__ICONS: $MAPSIGHT_TRAFFIC_STYLE__ICONS,
+);

package/src/scss/_street-labels.scss

@@ -0,0 +1,16 @@
+#streetLabels {
+	[|js="env.zoom >= 14"] {
+		text: {
+			text: attr(name);
+			font: normal 11px sans-serif;
+			stroke: {
+				width: 3;
+				color: black;
+			}
+			fill-color: white;
+			offsetX: 0;
+			offsetY: 0;
+			placement: line;
+		}
+	}
+}

package/src/scss/_traffic.scss

@@ -0,0 +1,114 @@
+@use "./variables";
+
+@use "./mixins/icon-base";
+@use "./mixins/icon";
+
+#traffic {
+	image-type: none;
+	stroke-width: 4;
+
+	[|js="env.zoom < 15"] {
+		stroke-width: 3;
+	}
+
+	[|js="env.zoom < 12"] {
+		stroke-width: 2;
+	}
+
+	stroke-color: rgba(255, 156, 4, 0.7);
+
+	[|js="env.zoom < 9"] {
+		stroke-color: rgba(255, 156, 4, 0.5);
+	}
+
+	[state="highlight"],
+	[state="select"] {
+		stroke-color: rgba(255, 156, 4, 1);
+	}
+
+	// should not end up in the map (filtered by pulp)
+	[trafficSituation=""],
+	[trafficSituation="Unbekannt"],
+	[trafficSituation="UNKNOWN_ERROR"],
+	[los=""],
+	[los="0"] {
+		stroke-color: rgba(0, 0, 0, 0.7);
+
+		[|js="env.zoom < 15"] {
+			stroke-color: rgba(0, 0, 0, 0.5);
+		}
+
+		[|js="env.zoom < 9"] {
+			stroke-color: rgba(0, 0, 0, 0.3);
+		}
+
+		[state="highlight"],
+		[state="select"] {
+			stroke-color: rgba(0, 0, 0, 1);
+		}
+	}
+
+	[trafficSituation="Frei"],
+	[los="1"] {
+		stroke-color: rgba(0, 179, 26, 0.7);
+
+		[|js="env.zoom < 9"] {
+			stroke-color: rgba(0, 179, 26, 0.2);
+		}
+
+		[state="highlight"],
+		[state="select"] {
+			stroke-color: rgba(0, 179, 26, 1);
+		}
+	}
+
+	[trafficSituation="Zaehfliessend"],
+	[los="2"] {
+		stroke-color: rgba(255, 156, 0, 0.8);
+
+		[|js="env.zoom < 17"] {
+			stroke-color: rgba(255, 156, 0, 0.75);
+		}
+
+		[|js="env.zoom < 9"] {
+			stroke-color: rgba(255, 156, 0, 0.5);
+		}
+
+		[state="highlight"],
+		[state="select"] {
+			stroke-color: rgba(255, 156, 0, 1);
+		}
+	}
+
+	[trafficSituation="Stau"],
+	[los="3"],
+	[los="4"] {
+		// Icon
+		@include icon-base.iconBase;
+		@include icon.icon("stau", "default");
+
+		[|js="env.zoom >= 1 && env.zoom <= 10"]
+			:not([state="highlight"])
+			:not([state="select"]) {
+			@include icon.icon("stau", "xsmall");
+		}
+
+		[|js="env.zoom >= 11 && env.zoom <= 12"]
+			:not([state="highlight"])
+			:not([state="select"]) {
+			@include icon.icon("stau", "small");
+		}
+
+		stroke-color: rgba(255, 0, 0, 0.8);
+		zIndex: variables.$MAPSIGHT_TRAFFIC_STYLE__BASE_Z_INDEX + 7;
+
+		[|js="env.zoom < 9"] {
+			stroke-color: rgba(255, 0, 0, 0.6);
+		}
+
+		[state="highlight"],
+		[state="select"] {
+			stroke-color: rgb(255, 0, 102);
+		}
+	}
+}

package/src/scss/_traffic2.scss

@@ -0,0 +1,122 @@
+@use "./variables";
+
+@use "./mixins/icon-base";
+@use "./mixins/icon";
+
+#traffic2 {
+	image-type: none;
+	stroke-width: 6;
+
+	[|js="env.zoom < 20"] {
+		stroke-width: 7;
+	}
+
+	[|js="env.zoom < 18"] {
+		stroke-width: 5;
+	}
+
+	[|js="env.zoom < 16"] {
+		stroke-width: 4;
+	}
+
+	[|js="env.zoom < 15"] {
+		stroke-width: 3;
+	}
+
+	[|js="env.zoom < 12"] {
+		stroke-width: 2;
+	}
+
+	stroke-color: rgba(255, 156, 4, 0.7);
+
+	[|js="env.zoom < 9"] {
+		stroke-color: rgba(255, 156, 4, 0.5);
+	}
+
+	[state="highlight"],
+	[state="select"] {
+		stroke-color: rgba(255, 156, 4, 1);
+	}
+
+	// should not end up in the map (filtered by pulp)
+	[trafficSituation=""],
+	[trafficSituation="Unbekannt"],
+	[trafficSituation="UNKNOWN_ERROR"],
+	[los=""],
+	[los="0"] {
+		stroke-color: rgba(0, 0, 0, 0.7);
+
+		[|js="env.zoom < 15"] {
+			stroke-color: rgba(0, 0, 0, 0.5);
+		}
+
+		[|js="env.zoom < 9"] {
+			stroke-color: rgba(0, 0, 0, 0.3);
+		}
+
+		[state="highlight"],
+		[state="select"] {
+			stroke-color: rgba(0, 0, 0, 1);
+		}
+	}
+
+	[trafficSituation="Frei"],
+	[los="1"] {
+		stroke-color: rgba(0, 179, 54, 0.7);
+
+		[|js="env.zoom < 9"] {
+			stroke-color: rgba(0, 179, 54, 0.2);
+		}
+
+		[state="highlight"],
+		[state="select"] {
+			stroke-color: rgba(0, 179, 54, 1);
+		}
+	}
+
+	[trafficSituation="Zaehfliessend"],
+	[los="2"] {
+		stroke-color: rgba(255, 82, 0, 0.7);
+
+		[|js="env.zoom < 9"] {
+			stroke-color: rgba(255, 82, 0, 0.5);
+		}
+
+		[state="highlight"],
+		[state="select"] {
+			stroke-color: rgb(255, 82, 0);
+		}
+	}
+
+	[trafficSituation="Stau"],
+	[los="3"],
+	[los="4"] {
+		// Icon
+		@include icon-base.iconBase;
+		@include icon.icon("stau", "default");
+
+		[|js="env.zoom >= 1 && env.zoom <= 10"]
+			:not([state="highlight"])
+			:not([state="select"]) {
+			@include icon.icon("stau", "xsmall");
+		}
+
+		[|js="env.zoom >= 11 && env.zoom <= 12"]
+			:not([state="highlight"])
+			:not([state="select"]) {
+			@include icon.icon("stau", "small");
+		}
+
+		stroke-color: rgba(174, 0, 5, 0.8);
+		zIndex: variables.$MAPSIGHT_TRAFFIC_STYLE__BASE_Z_INDEX + 7;
+
+		[|js="env.zoom < 9"] {
+			stroke-color: rgba(174, 0, 5, 0.6);
+		}
+
+		[state="highlight"],
+		[state="select"] {
+			stroke-color: rgb(255, 0, 102);
+		}
+	}
+}

package/src/scss/_user-geolocation.scss

@@ -0,0 +1,17 @@
+#userGeolocation {
+	.accuracy {
+		image-type: circle;
+		circle: {
+			radius: calc(attr(accuracy) / attr(--env-resolution));
+			fill-color: rgba(51, 153, 204, 0.61);
+		}
+	}
+
+	.point {
+		image-type: circle;
+		circle: {
+			radius: 6;
+			fill-color: #3399cc;
+		}
+	}
+}

package/src/scss/_variables.scss

@@ -0,0 +1,47 @@
+$MAPSIGHT_TRAFFIC_STYLE__FILL_COLOR: rgba(255, 0, 0, 0.46) !default;
+$MAPSIGHT_TRAFFIC_STYLE__STROKE_COLOR: rgba(224, 109, 208, 0.9) !default;
+
+$MAPSIGHT_TRAFFIC_STYLE__TEXT_FONT: bold !default;
+$MAPSIGHT_TRAFFIC_STYLE__TEXT_FILL_COLOR: #0c6490 !default;
+$MAPSIGHT_TRAFFIC_STYLE__TEXT_STROKE_COLOR: #fff !default;
+$MAPSIGHT_TRAFFIC_STYLE__TEXT_STROKE_WIDTH: 3 !default;
+
+$MAPSIGHT_TRAFFIC_STYLE__BASE_Z_INDEX: 100 !default;
+$MAPSIGHT_TRAFFIC_STYLE__IMG_BASE_SCALE: 0.5 !default;
+
+$MAPSIGHT_TRAFFIC_STYLE__IMAGE_PATH: "img/" !default;
+$MAPSIGHT_TRAFFIC_STYLE__SPRITE_PATH: $MAPSIGHT_TRAFFIC_STYLE__IMAGE_PATH + "sprite.png" !default;
+$MAPSIGHT_TRAFFIC_STYLE__ICONS: (
+	"ort": (
+		x: 0,
+		y: 0,
+		width: 30,
+		height: 30,
+	),
+) !default;
+
+$MAPSIGHT_TRAFFIC_STYLE__STATE_DEFAULT: "default" !default;
+
+$MAPSIGHT_TRAFFIC_STYLE__FEATURE_LABEL_OFFSET_X: 3 !default;
+$MAPSIGHT_TRAFFIC_STYLE__FEATURE_LABEL_OFFSET_Y: 1 !default;
+$MAPSIGHT_TRAFFIC_STYLE__FEATURE_LABEL_DEFAULT_MIN_ZOOM: 15 !default;
+$MAPSIGHT_TRAFFIC_STYLE__FEATURE_LABEL_DEFAULT_PREFIX: "" !default;
+$MAPSIGHT_TRAFFIC_STYLE__FEATURE_LABEL_DEFAULT_SUFFIX: "" !default;
+
+
+$MAPSIGHT_TRAFFIC_STYLE__ICON_MAX_SIZE: (
+	x: 26,
+	y: 28,
+) !default;
+$MAPSIGHT_TRAFFIC_STYLE__ICON_DEFAULT: "ort" !default;
+$MAPSIGHT_TRAFFIC_STYLE__ICON_FALLBACK_MAP: (
+	parkflaeche: (
+		"behindertenparken",
+		"tiefgarage",
+		"parkhaus",
+		"motorradstellplatz",
+		"busparkplatz",
+	),
+) !default;
+
+$MAPSIGHT_TRAFFIC_STYLE__ICON_ENABLE_FORCE_BY_ENV: true !default;

package/src/scss/default.scss

@@ -0,0 +1,10 @@
+// This file is only used to supply pre-compiled style in default.js
+// do NOT import this anywhere
+@use "../../dist/mapsight-traffic-style-icon-sprite-2x" as icons;
+
+@use "./variables" with (
+	$MAPSIGHT_TRAFFIC_STYLE__SPRITE_PATH: "img/mapsight-traffic-style-icon-sprite-2x.png?v=2023-08-07-16-00",
+	$MAPSIGHT_TRAFFIC_STYLE__ICONS: icons.$mapsight-traffic-style-icon-sprite-2x
+);
+
+@use "./full";

package/src/scss/features/_base.scss

@@ -0,0 +1,187 @@
+@use "../variables";
+@use "../mixins/icon-base";
+@use "../mixins/icon";
+@use "../mixins/auto-icon";
+
+#features {
+	stroke-width: 4;
+
+	// Icon
+	@include icon-base.iconBase;
+	@include auto-icon.autoIcon("default");
+
+	[|js="env.zoom >= 1 && env.zoom <= 10"]
+		:not([state="highlight"])
+		:not([state="select"]) {
+		@include auto-icon.autoIcon("xsmall");
+	}
+
+	[|js="env.zoom >= 11 && env.zoom <= 12"]
+		:not([state="highlight"])
+		:not([state="select"]) {
+		@include auto-icon.autoIcon("small");
+	}
+
+	[state="highlight"],
+	[state="select"] {
+		.selectionBackground {
+			image-type: circle;
+
+			circle: {
+				radius: 26;
+				fill-color: rgba(128, 255, 255, 0.4);
+				stroke: none;
+			}
+		}
+	}
+
+	[state="select"] {
+		.selectionBackground {
+			circle-fill-color: rgba(87, 255, 255, 0.8);
+		}
+	}
+
+	[mapsightIconId="stau"] {
+		stroke-color: #f00;
+	}
+
+	[mapsightIconId="umleitung"] {
+		stroke-color: #2aadea;
+	}
+
+	[isTemporaryRestriction] {
+		stroke-lineDash: 5, 15;
+	}
+
+	[type="trunk"],
+	[type="trunk_link"] {
+		stroke-width: 4;
+	}
+
+	[type="primary"],
+	[type="primary_link"] {
+		stroke-width: 3;
+	}
+
+	// z-index
+	zIndex: variables.$MAPSIGHT_TRAFFIC_STYLE__BASE_Z_INDEX + 2;
+
+	[geometry|type="Polygon"],
+	[geometry|type="MultiLineString"] {
+		zIndex: variables.$MAPSIGHT_TRAFFIC_STYLE__BASE_Z_INDEX + 1;
+	}
+
+	[geometry|type="MultiPolygon"] {
+		zIndex: variables.$MAPSIGHT_TRAFFIC_STYLE__BASE_Z_INDEX;
+	}
+
+	// states
+	[state="highlight"],
+	[state="select"] {
+		stroke-color: #3afffe;
+		cursor: pointer;
+	}
+
+	[state="highlight"] {
+		zIndex: variables.$MAPSIGHT_TRAFFIC_STYLE__BASE_Z_INDEX + 5;
+
+		// keep areas in the background
+		[geometry|type="Polygon"],
+		[geometry|type="MultiLineString"],
+		[geometry|type="MultiPolygon"] {
+			zIndex: variables.$MAPSIGHT_TRAFFIC_STYLE__BASE_Z_INDEX;
+		}
+	}
+
+	[state="select"] {
+		zIndex: variables.$MAPSIGHT_TRAFFIC_STYLE__BASE_Z_INDEX + 205;
+
+		// keep areas in the background
+		[geometry|type="Polygon"],
+		[geometry|type="MultiLineString"],
+		[geometry|type="MultiPolygon"] {
+			zIndex: variables.$MAPSIGHT_TRAFFIC_STYLE__BASE_Z_INDEX;
+		}
+	}
+
+	[type="parking"] {
+		// TODO: Use ../mixins/feature-label
+		[title] [|js="env.zoom >= 15"] {
+			text: {
+				font: bold 12px sans-serif;
+				offsetX: 17;
+				offsetY: 1;
+				textAlign: left;
+				fill-color: #03437e;
+				stroke-color: #fff;
+				stroke-width: 1;
+				text: "attr(title)";
+			}
+		}
+
+		[occupancyTrendString] {
+			[|js="env.zoom >= 13"],
+			[state="highlight"],
+			[state="select"] {
+				.background {
+					image-type: icon;
+
+					icon: {
+						anchorX: -14px;
+						anchorY: 12px;
+						src: variables.$MAPSIGHT_TRAFFIC_STYLE__IMAGE_PATH +
+							"parking-dynamic/attr(occupancyTrendString).png";
+					}
+
+					[state="highlight"],
+					[state="select"] {
+						zIndex: variables.$MAPSIGHT_TRAFFIC_STYLE__BASE_Z_INDEX + 5;
+					}
+				}
+			}
+
+			[|js="env.zoom >= 15"] {
+				text-offsetX: 29;
+			}
+		}
+	}
+
+	[type="default"] [mass_restriction],
+	[type="default"] [height_restriction] {
+		[|js="env.zoom >= 12"] {
+			text: {
+				font: bold 11px sans-serif;
+				offsetX: 0;
+				offsetY: 13;
+				textAlign: center;
+				fill-color: #03437e;
+				stroke-color: #fff;
+				stroke-width: 1;
+			}
+		}
+
+		[|js="env.zoom >= 13"] {
+			text: {
+				offsetY: 19;
+				font: bold 13px sans-serif;
+			}
+		}
+
+		[state="highlight"],
+		[state="select"] {
+			text: {
+				fill-color: #003163;
+				stroke-width: 2;
+				offsetY: 22;
+			}
+		}
+	}
+
+	[type="default"] [mass_restriction] [|js="env.zoom >= 12"] {
+		text-text: attr(mass_restriction);
+	}
+
+	[type="default"] [height_restriction] [|js="env.zoom >= 12"] {
+		text-text: "attr(height_restriction)m";
+	}
+}

package/src/scss/features/_cluster.scss

@@ -0,0 +1,29 @@
+@use "../variables";
+@use "../mixins/icon-base";
+@use "../mixins/icon";
+@use "../mixins/auto-icon";
+
+#features [cluster] {
+	.clusterLabel {
+		text: {
+			font: bold 13px sans-serif;
+			offsetX: 5;
+			offsetY: 5;
+			textAlign: center;
+			fill-color: #ad1a00;
+			stroke-color: #fff;
+			stroke-width: 1;
+			text: attr(clusterSize);
+		}
+
+		zIndex: variables.$MAPSIGHT_TRAFFIC_STYLE__BASE_Z_INDEX + 2;
+
+		[state="highlight"] {
+			zIndex: variables.$MAPSIGHT_TRAFFIC_STYLE__BASE_Z_INDEX + 5 + 2;
+		}
+
+		[state="select"] {
+			zIndex: variables.$MAPSIGHT_TRAFFIC_STYLE__BASE_Z_INDEX + 205 + 2;
+		}
+	}
+}