Merge branches

Logic/Osm/Overpass.ts

@@ -4,7 +4,10 @@ import {Utils} from "../../Utils";
 import {UIEventSource} from "../UIEventSource";
 import {BBox} from "../BBox";
 import * as osmtogeojson from "osmtogeojson";
+<<<<<<< HEAD
 
+=======
+>>>>>>> b54b5061cc72488ceb007177275fb600cce0a0dd
 
 /**
  * Interfaces overpass to get all the latest data
@@ -57,6 +60,8 @@ export class Overpass {
     }
 
     /**
+     * Constructs the actual script
+     * 
      * import {Tag} from "../Tags/Tag";
      * 
      * new Overpass(new Tag("key","value"), [], "").buildScript("{{bbox}}") // => `[out:json][timeout:90]{{bbox}};(nwr["key"="value"];);out body;out meta;>;out skel qt;`

assets/layers/climbing_area/climbing_area.json

@@ -93,7 +93,7 @@
   },
   "calculatedTags": [
     "_contained_climbing_routes_properties=feat.overlapWith('climbing_route').map(f => f.feat.properties).map(p => {return {id: p.id, name: p.name, 'climbing:grade:french': p['climbing:grade:french'], 'climbing:length': p['climbing:length']} })",
-    "_contained_climbing_routes=feat.get('_contained_climbing_routes_properties')?.map(p => `<li><a href='#${p.id}'>${p.name ?? 'climbing route'}</a> (<b>${p['climbing:grade:french'] ?? 'unknown difficulty'}</b>, ${p['climbing:length'] ?? 'unkown length'} meter)</li>`).join('')",
+    "_contained_climbing_routes=feat.get('_contained_climbing_routes_properties')?.map(p => `<li><a href='#${p.id}'>${p.name ?? 'climbing route'}</a> (<b class='climbing-${p['__difficulty:char']} rounded-full p-l-1 p-r-1'>${p['climbing:grade:french'] ?? 'unknown difficulty'}</b>, ${p['climbing:length'] ?? 'unkown length'} meter)</li>`).join('')",
     "_contained_climbing_route_ids=feat.get('_contained_climbing_routes_properties')?.map(p => p.id)",
     "_difficulty_hist=feat.get('_contained_climbing_routes_properties')?.map(p => p['climbing:grade:french'])?.filter(p => (p ?? null) !== null)?.sort()",
     "_difficulty_max=feat.get('_difficulty_hist')?.at(-1)",

assets/layers/climbing_route/climbing_route.json

@@ -217,9 +217,18 @@
       ],
       "label": {
         "mappings": [
+          {
+            "if": {
+              "and": [
+              "climbing:grade:french~*",
+                "name~*"
+              ]
+            },
+            "then": "<div class='w-max p-1 rounded-xl' style='background: white;'>{name} <span class='climbing-{__difficulty:char}'>{climbing:grade:french}</span></div>"
+          },
           {
             "if": "name~*",
-            "then": "<div style='background: white; padding: 0.25em; border-radius:0.5em'>{name}</div>"
+            "then": "<div  class='w-max p-1 rounded-xl' style='background: white;'>{name}</div>"
           }
         ]
       }

assets/themes/climbing/climbing.css

@@ -0,0 +1,48 @@
+/* a few extra colours, mostly colours difficulties. Debuggable in css-test.html */
+
+.climbing- {
+    /*Fallback in case of unrecognized difficulty*/
+    background: white;
+    border: 1px solid black;
+    
+    background: repeating-linear-gradient( -45deg, #a7b9ae, #a7b9ae 10px, #f7f7f7 10px, #f7f7f7 20px );
+    
+}
+
+.climbing-2 {
+    background: #a2ff00;
+}
+
+.climbing-3 {
+    background: yellow;
+}
+
+.climbing-4 {
+    background: orange;
+}
+
+.climbing-5 {
+    background: blue;
+    color: white;
+}
+
+.climbing-6 {
+    background: red;
+    color: white;
+}
+
+.climbing-7 {
+    background: #ef47ec;
+}
+
+.climbing-8 {
+    background: black;
+    color: white;
+}
+
+.climbing-9 {
+    background: white;
+    color: black;
+    border: 1px solid black;
+}
+

assets/themes/climbing/climbing.json

@@ -42,16 +42,17 @@
   "startLon": 0,
   "startZoom": 1,
   "widenFactor": 1.5,
+  "customCss": "./assets/themes/climbing/climbing.css",
   "layers": [
     {
       "builtin": [
-    "climbing_club",
-    "climbing_gym",
-    "climbing_route",
-    "climbing_area",
-    "climbing_opportunity"
+        "climbing_club",
+        "climbing_gym",
+        "climbing_route",
+        "climbing_area",
+        "climbing_opportunity"
       ],
-      "override":  {
+      "override": {
         "allowMove": {
           "enableRelocation": false,
           "enableImproveAccuracy": true
@@ -76,93 +77,15 @@
           {
             "id": "Min difficulty",
             "condition": "__difficulty_min~*",
-            "then": "<div class='w-8 flex justify-center rounded-left-full border border-black' style='margin-right: -5px; background-color:#ebf224'> {__difficulty_min}</div>",
-
-            "mappings": [
-              {
-                "if": "__difficulty_min~(2|3).*",
-                "then": "<div class='w-8 flex justify-center rounded-left-full' style='margin-right: -5px; background-color:#ebf224'> {__difficulty_min}</div>"
-              },
-              {
-                "if": "__difficulty_min~4.*",
-                "then": "<div class='w-8 flex justify-center rounded-left-full' style='margin-right: -5px; background-color:#7af224'> {__difficulty_min}</div>"
-              },
-              {
-                "if": "__difficulty_min~5.*",
-                "then": "<div class='w-8 flex justify-center rounded-left-full' style='margin-right: -5px; background-color:#f24a24'> {__difficulty_min}</div>"
-              },
-              {
-                "if": "__difficulty_min~6.*",
-                "then": "<div class='w-8 flex justify-center rounded-left-full' style='margin-right: -5px; background-color:#244af2'> {__difficulty_min}</div>"
-              },
-              {
-                "if": "__difficulty_min~(7|8).*",
-                "then": "<div class='w-8 flex justify-center rounded-left-full' style='margin-right: -5px; background-color:#e904ed'> {__difficulty_min}</div>"
-              },
-              {
-                "if": "__difficulty_min~*",
-                "then": "<div class='w-8 flex justify-center rounded-left-full' style='margin-right: -5px; background-colour:black'> {__difficulty_min}</div>"
-              }
-            ]
+            "render": "<div class='w-8 flex justify-center rounded-left-full climbing-{__difficulty_min:char}' style='margin-right: -5px;'> {__difficulty_min}</div>"
           },
           {
             "id": "max difficulty",
             "condition": "__difficulty_max~*",
-            "then": "<div class='w-8 flex justify-center rounded-right-full border border-black' style='background-color:#ebf224'> {__difficulty_max}</div>",
-            "mappings": [
-              {
-                "if": "__difficulty_max~(2|3).*",
-                "then": "<div class='w-8 flex justify-center rounded-right-full' style='background-color:#ebf224'> {__difficulty_max}</div>"
-              },
-              {
-                "if": "__difficulty_max~4.*",
-                "then": "<div class='w-8 flex justify-center rounded-right-full' style='background-color:#7af224'> {__difficulty_max}</div>"
-              },
-              {
-                "if": "__difficulty_max~5.*",
-                "then": "<div class='w-8 flex justify-center rounded-right-full' style='background-color:#f24a24'> {__difficulty_max}</div>"
-              },
-              {
-                "if": "__difficulty_max~6.*",
-                "then": "<div class='w-8 flex justify-center rounded-right-full' style='background-color:#244af2'> {__difficulty_max}</div>"
-              },
-              {
-                "if": "__difficulty_max~(7|8).*",
-                "then": "<div class='w-8 flex justify-center rounded-right-full' style='background-color:#e904ed'> {__difficulty_max}</div>"
-              },
-              {
-                "if": "__difficulty_max~*",
-                "then": "<div class='w-8 flex justify-center rounded-right-full' style='background-colour:black'> {__difficulty_max}</div>"
-              }
-            ]
+            "render": "<div class='w-8 flex justify-center rounded-right-full climbing-{__difficulty_max:char}'> {__difficulty_max}</div>"
           },
           {
-            "mappings": [
-              {
-                "if": "climbing:grade:french~3.*",
-                "then": "<div class='rounded-full px-1' style='background-color:#ebf224'> {climbing:grade:french}</div>"
-              },
-              {
-                "if": "climbing:grade:french~4.*",
-                "then": "<div class='rounded-full pl-2 pr-2' style='background-color:#7af224'> {climbing:grade:french}</div>"
-              },
-              {
-                "if": "climbing:grade:french~5.*",
-                "then": "<div class='rounded-full pl-2 pr-2' style='background-color:#f24a24'> {climbing:grade:french}</div>"
-              },
-              {
-                "if": "climbing:grade:french~6.*",
-                "then": "<div class='text-white rounded-full pl-2 pr-2' style='background-color:#244af2'> {climbing:grade:french}</div>"
-              },
-              {
-                "if": "climbing:grade:french~7.*",
-                "then": "<div class='text-white rounded-full pl-2 pr-2' style='background-color:#e904ed'> {climbing:grade:french}</div>"
-              },
-              {
-                "if": "climbing:grade:french~*",
-                "then": "<div class='text-white rounded-full px-2' style='background-colour:black'> {climbing:grade:french}</div>"
-              }
-            ]
+            "render": "<div class='flex justify-center rounded-full pl-1 pr-1 climbing-{__difficulty:char}'> {climbing:grade:french}</div>"
           }
         ],
         "+calculatedTags": [
@@ -176,6 +99,9 @@
           "_embedding_feature:id=feat.get('_embedding_features_with_access')?.id",
           "__difficulty_max= feat.properties['climbing:grade:french:max'] ?? feat.properties['_difficulty_max']",
           "__difficulty_min= feat.properties['climbing:grade:french:min'] ?? feat.properties['_difficulty_min']",
+          "__difficulty_max:char= feat.properties['__difficulty_max']?.at(0)",
+          "__difficulty_min:char= feat.properties['__difficulty_min']?.at(0)",
+          "__difficulty:char= feat.properties['climbing:grade:french']?.at(0)",
           "__bolts_max= feat.get('climbing:bolts:max') ?? feat.get('climbing:bolts') ?? feat.get('_bolts_max')"
         ],
         "units+": [

assets/themes/climbing/css-test.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>CSS-debugging for climbing theme</title>
+    <link href="/css/index-tailwind-output.css" rel="stylesheet"/>
+    <link href="/assets/themes/climbing/climbing.css" rel="stylesheet"/>
+</head>
+<body>
+
+        <div class="rounded-full climbing-2">2</div>
+        
+        <div class="rounded-full climbing-3">3</div>
+        <div class="rounded-full climbing-4">4</div>
+        <div class="rounded-full climbing-5">5</div>
+        <div class="rounded-full climbing-6">6</div>
+        <div class="rounded-full climbing-7">7</div>
+        <div class="rounded-full climbing-8">8</div>
+        <div class="rounded-full climbing-9">9</div>
+        <div class="rounded-full climbing-">X</div>
+
+</body>
+</html>

assets/themes/natuurpunt/natuurpunt.css

@@ -20,12 +20,12 @@
 
 @font-face{
     font-family:"Open Sans Regular";
-    src:url("./assets/themes/natuurpunt/fonts/OpenSans-Regular.ttf");
+    src:url("/assets/themes/natuurpunt/fonts/OpenSans-Regular.ttf");
 }
 
 @font-face{
     font-family:"Amaranth";
-    src:url("./assets/themes/natuurpunt/fonts/Amaranth-Regular.otf");
+    src:url("/assets/themes/natuurpunt/fonts/Amaranth-Regular.otf");
 }
 
 body {
@@ -109,4 +109,4 @@ h1, h2, h3, h4 {
 .first-filter-panel {
     /* Additional class on the first layer filter */
     border-top: unset !important;
-}
+}

assets/themes/toerisme_vlaanderen/custom.css

@@ -4,12 +4,12 @@
 
 @font-face{
     font-family:"FlandersArt";
-    src:url("./assets/themes/toerisme_vlaanderen/FlandersArtSans-Light.woff");
+    src:url("/assets/themes/toerisme_vlaanderen/FlandersArtSans-Light.woff");
 }
 
 @font-face{
     font-family:"FlandersArtSerif";
-    src:url("./assets/themes/toerisme_vlaanderen/FlandersArtSerif-Medium.woff");
+    src:url("/assets/themes/toerisme_vlaanderen/FlandersArtSerif-Medium.woff");
 }
 
 h1, h2, h3, h4 {

package.json

@@ -8,7 +8,7 @@
   "main": "index.js",
   "scripts": {
     "start": "npm run generate:layeroverview && npm run strt",
-    "strt": "export NODE_OPTIONS=--max_old_space_size=8364 && parcel serve *.html UI/** Logic/** assets/*.json assets/svg/* assets/generated/* assets/layers/*/*.svg assets/layers/*/*/*/*.svg assets/layers/*/*.jpg assets/layers/*/*.png assets/layers/*/*.css assets/tagRenderings/*.json assets/themes/*/*.svg assets/themes/*/*.ttf assets/themes/*/*/*.ttf aassets/themes/*/*.otf assets/themes/*/*/*.otf ssets/themes/*/*.css assets/themes/*/*.jpg assets/themes/*/*.png vendor/* vendor/*/*",
+    "strt": "export NODE_OPTIONS=--max_old_space_size=8364 && parcel serve *.html UI/** Logic/** assets/*.json assets/svg/* assets/generated/* assets/layers/*/*.svg assets/layers/*/*/*/*.svg assets/layers/*/*.jpg assets/layers/*/*.png assets/layers/*/*.css assets/tagRenderings/*.json assets/themes/*/*.svg assets/themes/*/*.ttf assets/themes/*/*/*.ttf assets/themes/*/*.otf assets/themes/*/*/*.otf assets/themes/*/*.css assets/themes/*/*.jpg assets/themes/*/*.woff assets/themes/*/*.png vendor/* vendor/*/*",
     "strttest": "export NODE_OPTIONS=--max_old_space_size=8364 && parcel serve test.html",
     "watch:css": "tailwindcss -i index.css -o css/index-tailwind-output.css --watch",
     "generate:css": "tailwindcss -i index.css -o css/index-tailwind-output.css",