add future nonbinary crossing

assets/nonbinaryflag.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
+    <path fill="#2D2D2D" d="m0,0h300v200H0"/>
+    <path fill="#9B59D0" d="m0,0h300v150H0"/>
+    <path fill="#FFFFFF" d="m0,0h300v100H0"/>
+    <path fill="#FFF433" d="m0,0h300v50H0"/>
+</svg>

assets/prideflag-hallein.svg

@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 777 480" width="777" height="480">
-    <path fill="#750787" d="M0 0h777v480H0z"/>
-    <path fill="#004dff" d="M0 0h777v400H0z"/>
-    <path fill="#008026" d="M0 0h777v320H0z"/>
-    <path fill="#ffed00" d="M0 0h777v240H0z"/>
-    <path fill="#e40303" d="M0 0h777v160H0z"/>
-    <path fill="#ff8c00" d="M0 0h777v80H0z"/>
-</svg>

data/Wien.json

@@ -1841,5 +1841,45 @@
       ],
       "length": 21.03
     }
+  },
+  {
+    "id": 1166723159,
+    "name": "Am Heumarkt",
+    "type": "nonbinaryFlag",
+    "bezirk": 3,
+    "comment": "existiert noch nicht",
+    "sources": [
+      {
+        "type": "proposal",
+        "url": "https://www.ggg.at/2023/09/29/exklusiv-wien-bekommt-seinen-ersten-nonbinary-zebrastreifen/",
+        "date": "2023-09-29"
+      }
+    ],
+    "geosource": {
+      "type": "RawCoords",
+      "coords": [
+        [
+          16.3801164,
+          48.2016298
+        ],
+        [
+          16.3802898,
+          48.2017652
+        ]
+      ]
+    },
+    "geo": {
+      "coords": [
+        [
+          16.3801164,
+          48.2016298
+        ],
+        [
+          16.3802898,
+          48.2017652
+        ]
+      ],
+      "length": 19.79
+    }
   }
 ]

data/schema.json

@@ -138,7 +138,8 @@
           "type": "string",
           "enum": [
             "prideFlag",
-            "transFlag"
+            "transFlag",
+            "nonbinaryFlag"
           ]
         },
         "geo": {

interfaces.ts

@@ -1,4 +1,4 @@
-export type FlagType = "prideFlag" | "transFlag"
+export type FlagType = "prideFlag" | "transFlag" | "nonbinaryFlag"
 
 export type Coord = number[]
 export type Coords = Coord[]

package-lock.json

@@ -17,7 +17,7 @@
         "micromodal": "^0.4.10",
         "navigo": "^8.11.1",
         "node-fetch": "^3.2.10",
-        "ol": "^7.0.0",
+        "ol": "^8.0.0",
         "ts-node": "^10.9.1"
       },
       "devDependencies": {
@@ -413,49 +413,10 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
-    "node_modules/@mapbox/jsonlint-lines-primitives": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
-      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/@mapbox/mapbox-gl-style-spec": {
-      "version": "13.28.0",
-      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.28.0.tgz",
-      "integrity": "sha512-B8xM7Fp1nh5kejfIl4SWeY0gtIeewbuRencqO3cJDrCHZpaPg7uY+V8abuR+esMeuOjRl5cLhVTP40v+1ywxbg==",
-      "dependencies": {
-        "@mapbox/jsonlint-lines-primitives": "~2.0.2",
-        "@mapbox/point-geometry": "^0.1.0",
-        "@mapbox/unitbezier": "^0.0.0",
-        "csscolorparser": "~1.0.2",
-        "json-stringify-pretty-compact": "^2.0.0",
-        "minimist": "^1.2.6",
-        "rw": "^1.3.3",
-        "sort-object": "^0.3.2"
-      },
-      "bin": {
-        "gl-style-composite": "bin/gl-style-composite.js",
-        "gl-style-format": "bin/gl-style-format.js",
-        "gl-style-migrate": "bin/gl-style-migrate.js",
-        "gl-style-validate": "bin/gl-style-validate.js"
-      }
-    },
-    "node_modules/@mapbox/point-geometry": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
-      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
-    },
-    "node_modules/@mapbox/unitbezier": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
-      "integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA=="
-    },
     "node_modules/@petamoriken/float16": {
-      "version": "3.8.3",
+      "version": "3.8.4",
-      "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.8.3.tgz",
+      "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.8.4.tgz",
-      "integrity": "sha512-an2OZ7/6er9Jja8EDUvU/tmtGIutdlb6LwXOwgjzoCjDRAsUd8sRZMBjoPEy78Xa9iOp+Kglk2CHgVwZuZbWbw=="
+      "integrity": "sha512-kB+NJ5Br56ZhElKsf0pM7/PQfrDdDVMRz8f0JM6eVOGE+L89z9hwcst9QvWBBnazzuqGTGtPsJNZoQ1JdNiGSQ=="
     },
     "node_modules/@tsconfig/node10": {
       "version": "1.0.9",
@@ -484,9 +445,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "20.5.7",
+      "version": "20.8.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.7.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.0.tgz",
-      "integrity": "sha512-dP7f3LdZIysZnmvP3ANJYTSwg+wLLl8p7RqniVlV7j+oXSXAbt9h0WIBFmJy5inWZoX9wZN6eXx+YXd9Rh3RBA=="
+      "integrity": "sha512-LzcWltT83s1bthcvjBmiBvGJiiUe84NWRHkw+ZV6Fr41z2FbIzvc815dk2nQ3RAKMuN2fkenM/z3Xv2QzEpYxQ=="
     },
     "node_modules/acorn": {
       "version": "8.10.0",
@@ -579,9 +540,9 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/axios": {
-      "version": "1.5.0",
+      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.1.tgz",
-      "integrity": "sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==",
+      "integrity": "sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==",
       "dependencies": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",
@@ -679,11 +640,6 @@
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ=="
     },
-    "node_modules/csscolorparser": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
-      "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w=="
-    },
     "node_modules/data-uri-to-buffer": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
@@ -818,9 +774,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.2",
+      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
       "funding": [
         {
           "type": "individual",
@@ -1038,11 +994,6 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
     },
-    "node_modules/json-stringify-pretty-compact": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
-      "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ=="
-    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -1064,11 +1015,6 @@
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
     },
-    "node_modules/mapbox-to-css-font": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.4.2.tgz",
-      "integrity": "sha512-f+NBjJJY4T3dHtlEz1wCG7YFlkODEjFIYlxDdLIDMNpkSksqTt+l/d4rjuwItxuzkuMFvPyrjzV2lxRM4ePcIA=="
-    },
     "node_modules/matomo-lite-tracker": {
       "version": "1.0.0",
       "resolved": "git+ssh://git@github.com/Findus23/MatomoLiteTracker.git#0a2a2cb305305ea7c178fb54c67bef54cbe6e688",
@@ -1188,13 +1134,12 @@
       }
     },
     "node_modules/ol": {
-      "version": "7.5.1",
+      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/ol/-/ol-7.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-8.1.0.tgz",
-      "integrity": "sha512-CFXDhO8YdQt7I+zwrGYSONo/ZM2oLr7vUvxqpLEUyy+USaQjUeE8L6FBOWIPboopGVhnSVYd5hdEirn9ifKBZQ==",
+      "integrity": "sha512-cx3SH2plpFS9fM8pp1nCypgQXGJD7Mcb1E3mEySmy5XEw1DUEo+kkNzgtAZz5qupekqi7aU9iBJEjCoMfqvO2Q==",
       "dependencies": {
         "earcut": "^2.2.3",
         "geotiff": "^2.0.7",
-        "ol-mapbox-style": "^10.1.0",
         "pbf": "3.2.1",
         "rbush": "^3.0.1"
       },
@@ -1203,16 +1148,6 @@
         "url": "https://opencollective.com/openlayers"
       }
     },
-    "node_modules/ol-mapbox-style": {
-      "version": "10.7.0",
-      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-10.7.0.tgz",
-      "integrity": "sha512-S/UdYBuOjrotcR95Iq9AejGYbifKeZE85D9VtH11ryJLQPTZXZSW1J5bIXcr4AlAH6tyjPPHTK34AdkwB32Myw==",
-      "dependencies": {
-        "@mapbox/mapbox-gl-style-spec": "^13.23.1",
-        "mapbox-to-css-font": "^2.4.1",
-        "ol": "^7.3.0"
-      }
-    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -1270,9 +1205,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.28",
+      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "dev": true,
       "funding": [
         {
@@ -1368,9 +1303,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "3.28.1",
+      "version": "3.29.4",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.28.1.tgz",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
-      "integrity": "sha512-R9OMQmIHJm9znrU3m3cpE8uhN0fGdXiawME7aZIpQqvpS/85+Vt1Hq1/yVIcYfOmaQiHjvXkQAoJukvLpau6Yw==",
+      "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
       "dev": true,
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -1383,15 +1318,10 @@
         "fsevents": "~2.3.2"
       }
     },
-    "node_modules/rw": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
-      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
-    },
     "node_modules/sass": {
-      "version": "1.66.1",
+      "version": "1.68.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.66.1.tgz",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.68.0.tgz",
-      "integrity": "sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==",
+      "integrity": "sha512-Lmj9lM/fef0nQswm1J2HJcEsBUba4wgNx2fea6yJHODREoMFnwRpZydBnX/RjyXw2REIwdkbqE4hrTo4qfDBUA==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -1405,34 +1335,6 @@
         "node": ">=14.0.0"
       }
     },
-    "node_modules/sort-asc": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.1.0.tgz",
-      "integrity": "sha512-jBgdDd+rQ+HkZF2/OHCmace5dvpos/aWQpcxuyRs9QUbPRnkEJmYVo81PIGpjIdpOcsnJ4rGjStfDHsbn+UVyw==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/sort-desc": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.1.1.tgz",
-      "integrity": "sha512-jfZacW5SKOP97BF5rX5kQfJmRVZP5/adDUTY8fCSPvNcXDVpUEe2pr/iKGlcyZzchRJZrswnp68fgk3qBXgkJw==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/sort-object": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-0.3.2.tgz",
-      "integrity": "sha512-aAQiEdqFTTdsvUFxXm3umdo04J7MRljoVGbBlkH7BgNsMvVNAJyGj7C/wV1A8wHWAJj/YikeZbfuCKqhggNWGA==",
-      "dependencies": {
-        "sort-asc": "^0.1.0",
-        "sort-desc": "^0.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",

package.json

@@ -27,7 +27,7 @@
     "micromodal": "^0.4.10",
     "navigo": "^8.11.1",
     "node-fetch": "^3.2.10",
-    "ol": "^7.0.0",
+    "ol": "^8.0.0",
     "ts-node": "^10.9.1"
   },
   "author": "",

src/features.ts

@@ -19,10 +19,10 @@ export function loadData(data: Crossing[], vectorSource: VectorSource): void {
         put trans flag on top (so they are not covered,
         but apart from that keep the drawing order random
          */
-        if (a.type == "transFlag") {
+        if (a.type == "transFlag" || a.type == "nonbinaryFlag") {
             return 1
         }
-        if (b.type == "transFlag") {
+        if (b.type == "transFlag" || b.type == "nonbinaryFlag") {
             return -1
         }
         return Math.random() - 0.5;

src/map.ts

@@ -9,6 +9,7 @@ import {Line, Vector2d} from "./vectorUtils";
 import {drawZebraCrossing, zebraPatterns} from "./zebraUtils";
 import prideFlag from "../assets/prideflag.svg"
 import transFlag from "../assets/transflag.svg"
+import nonbinaryFlag from "../assets/nonbinaryflag.svg"
 import {FeatureProperties} from "./features";
 import {areas, viewFromArea, Wien} from "./areaData";
 import {Crossing} from "../interfaces";
@@ -99,6 +100,12 @@ const transFlagStyle = new Style({
         scale: 0.05
     })
 })
+const nonbinaryFlagStyle = new Style({
+    image: new Icon({
+        src: nonbinaryFlag,
+        scale: 0.05*800/300
+    })
+})
 
 const vectorLineLayer = new VectorLayer({
     source: vectorSource,
@@ -121,9 +128,11 @@ const vectorLineLayer = new VectorLayer({
         }
         switch (crossing.type) {
             case "prideFlag":
-                return prideFlagStyle;
+                return prideFlagStyle
             case "transFlag":
-                return transFlagStyle;
+                return transFlagStyle
+            case "nonbinaryFlag":
+                return nonbinaryFlagStyle
         }
     }
 });
@@ -156,6 +165,6 @@ import("./popups").then(popups => {
     popups.initPopups(map, vectorSource);
 })
 
-map.on('click', function(evt){
+map.on('click', function (evt) {
     console.log(transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'));
 });

src/simpledraw.ts

@@ -1,6 +1,12 @@
 import "./style.scss"
 import {Line, Vector2d} from "./vectorUtils";
-import {drawZebraCrossing, prideZebraPattern, transZebraPattern, zebraPattern} from "./zebraUtils";
+import {
+    drawZebraCrossing,
+    nonbinaryZebraPattern,
+    prideZebraPattern,
+    transZebraPattern,
+    zebraPattern
+} from "./zebraUtils";
 
 
 function main() {
@@ -14,6 +20,7 @@ function main() {
     drawZebraCrossing(ctx, new Line(start, new Vector2d(50, 50)),30, zebraPattern)
     drawZebraCrossing(ctx, line,30, prideZebraPattern)
     drawZebraCrossing(ctx, new Line(end, new Vector2d(160, 80)),30, transZebraPattern)
+    drawZebraCrossing(ctx, new Line(new Vector2d(160, 80), new Vector2d(120, 150)),30, nonbinaryZebraPattern)
     // line.draw(ctx)
     // const line = new Line(start, end)
     //

src/zebraUtils.ts

@@ -3,6 +3,7 @@ import {FlagType} from "../interfaces";
 
 export const prideFlagColors = ["#e40303", "#ff8c00", "#ffed00", "#008026", "#004dff", "#750787"]
 export const transFlagColors = ["#5BCEFA", "#F5A9B8"]
+export const nonbinaryFlagColors = ["#FFF433", "#9B59D0", "#2D2D2D"] // I assume they will skip the white stripe
 export type PatternFunction = (i: number) => string
 
 export function zebraPattern(i: number): string {
@@ -22,10 +23,12 @@ export function generateFlagZebraPattern(colors: string[]): PatternFunction {
 
 export const prideZebraPattern = generateFlagZebraPattern(prideFlagColors)
 export const transZebraPattern = generateFlagZebraPattern(transFlagColors)
+export const nonbinaryZebraPattern = generateFlagZebraPattern(nonbinaryFlagColors)
 
 export const zebraPatterns: { [d in FlagType]: PatternFunction } = {
     "prideFlag": prideZebraPattern,
-    "transFlag": transZebraPattern
+    "transFlag": transZebraPattern,
+    "nonbinaryFlag": nonbinaryZebraPattern
 }