feat(demo): add style context demo. (#702)

* feat(demo): add style context demo. * wip
infra-geo-ouverte · Dec 8, 2021 · a4f7bf5 · a4f7bf5
1 parent e8acc0e
commit a4f7bf5
Show file tree

Hide file tree

Showing 7 changed files with 350 additions and 4 deletions.
diff --git a/src/app/pages/portal/portal.component.html b/src/app/pages/portal/portal.component.html
@@ -41,7 +41,9 @@
       igoSearchPointerSummary
       [igoSearchPointerSummaryDelay]="500"
       [igoSearchPointerSummaryEnabled]=igoSearchPointerSummaryEnabled
-
+      igoHoverFeature
+      [igoHoverFeatureDelay]="250"
+      [igoHoverFeatureEnabled]="true"
       #mapBrowser
       igoQuery
       [waitForAllQueries]="true"

diff --git a/src/assets/images/styles/fire-hydrant.svg b/src/assets/images/styles/fire-hydrant.svg
diff --git a/src/assets/mapboxStyleExample-vectortile.json b/src/assets/mapboxStyleExample-vectortile.json
@@ -0,0 +1,92 @@
+{
+  "version": 8,
+  "name": "Example Style Vector Tile",
+  "metadata": {"maputnik:renderer": "mbgljs"},
+  "sources": {
+    "ahocevar": {
+      "type": "vector",
+      "minZoom": 0,
+      "maxZoom": 22
+    }
+  },
+  "sprite": "",
+  "layers": [
+    {
+      "id": "line_style_canada",
+      "type": "line",
+      "source": "ahocevar",
+      "source-layer": "ne_10m_admin_0_countries",
+      "filter": ["any", ["==", "admin", "Canada"]],
+      "paint": {
+        "line-color": "rgba(0, 0, 0, 1)"
+      },
+      "layout": {
+        "visibility": "visible",
+        "line-cap": "round",
+        "line-join": "round"
+       }
+    },
+    {
+      "id": "fill_style_canada",
+      "type": "fill",
+      "source": "ahocevar",
+      "source-layer": "ne_10m_admin_0_countries",
+      "filter": ["any", ["==", "admin", "Canada"]],
+      "paint": {
+        "fill-color": "rgba(255, 10, 10, 0.5)"
+      },
+      "layout": {
+        "visibility": "visible",
+        "line-cap": "round",
+        "line-join": "round"
+       }
+    },
+    {
+      "id": "line_style_usa",
+      "type": "line",
+      "source": "ahocevar",
+      "source-layer": "ne_10m_admin_0_countries",
+      "filter": ["any", ["==", "admin", "United States of America"]],
+      "paint": {
+        "line-color": "rgba(0, 50, 255, 1)",
+        "line-width": 3
+      },
+      "layout": {
+        "visibility": "visible",
+        "line-cap": "round",
+        "line-join": "round"
+       }
+    },
+    {
+      "id": "fill_style_usa",
+      "type": "fill",
+      "source": "ahocevar",
+      "source-layer": "ne_10m_admin_0_countries",
+      "filter": ["any", ["==", "admin", "United States of America"]],
+      "paint": {
+        "fill-color": "rgba(0, 50, 255, 0.5)"
+      },
+      "layout": {
+        "visibility": "visible",
+        "line-cap": "round",
+        "line-join": "round"
+       }
+    },
+    {
+      "id": "fill_style_usa",
+      "type": "fill",
+      "source": "ahocevar",
+      "source-layer": "ne_10m_admin_0_countries",
+      "filter": ["any", ["==", "admin", "Liechtenstein"]],
+      "paint": {
+        "fill-color": "rgba(255, 255, 0, 1)"
+      },
+      "layout": {
+        "visibility": "visible",
+        "line-cap": "round",
+        "line-join": "round"
+       }
+    }
+  ],
+  "id": "vectortileid"
+}
diff --git a/src/contexts/_base.json b/src/contexts/_base.json
@@ -131,7 +131,7 @@
         "attributions": "<a href='https://www.igouverte.org/' target='_blank'>IGO2</a>",
         "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII=",
         "type": "xyz",
-        "maxZoom": 19
+        "maxZoom": 22
       }
     },
     {

diff --git a/src/contexts/_contexts.json b/src/contexts/_contexts.json
@@ -38,5 +38,9 @@
   {
     "uri": "variousFormats",
     "title": "Divers format à titre d'exemple"
+  },
+  {
+    "uri": "variousStyles",
+    "title": "Divers styles à titre d'exemple"
   }
 ]
diff --git a/src/contexts/variousFormats.json b/src/contexts/variousFormats.json
@@ -100,7 +100,7 @@
           "url": "https://www.donneesquebec.ca/recherche/dataset/f647f5ed-a8f3-4a47-8ceb-977cbf090675/resource/68e0e20a-415d-44f5-af82-a90311784616/download/bornes-incendies.geojson",
           "queryable": true,
           "queryFormat": "geojson",
-          "queryTitle": "Le titre",
+          "queryTitle": "MARQUE",
 
           "formatOptions": {
             "dataProjection": "EPSG:4326",
@@ -116,7 +116,7 @@
           "url": "https://ws.mapserver.transports.gouv.qc.ca/swtq?service=WFS&request=GetFeature&version=1.1.0&typename=aeroport_piste&outputFormat=geojson",
           "queryable": true,
           "queryFormat": "geojson",
-          "queryTitle": "desclocal"
+          "queryTitle": "nomnavcana"
         }
       }
     ]

diff --git a/src/contexts/variousStyles.json b/src/contexts/variousStyles.json
@@ -0,0 +1,245 @@
+{
+    "uri": "variousStyles",
+    "base": "_base",
+    "layers": [
+
+      {
+        "title": "World, MVT mapboxStyle",
+        "zIndex": 10,
+        "id": "mvt-mapboxStyle",
+        "sourceOptions": {
+          "queryable": false,
+          "type": "mvt",
+          "url": "https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/ne:ne_10m_admin_0_countries@EPSG:900913@pbf/{z}/{x}/{-y}.pbf"
+        },
+        "mapboxStyle": {
+          "url": "assets/mapboxStyleExample-vectortile.json",
+          "source": "ahocevar"
+        }
+      },
+
+      {
+        "title": "Line - Geojson - style",
+        "id": "dq-1",
+        "sourceOptions": {
+          "type": "vector",
+          "url": "https://ws.mapserver.transports.gouv.qc.ca/swtq?service=wfs&version=2.0.0&request=getfeature&typename=ms:liaison_maritime&outputformat=geojson&srsname=EPSG:4326",
+          "queryable": true,
+          "queryFormat": "geojson",
+          "queryTitle": "MARQUE",
+
+          "formatOptions": {
+            "dataProjection": "EPSG:4326",
+            "featureProjection":"EPSG:3857"
+          }
+        },
+        "style": {
+          "stroke": { 
+            "color": "blue",
+            "lineDash": [10, 5]
+          },
+          "width": 5
+        }
+      },
+
+      {
+        "title": "Points - Geojson - hover",
+        "id": "dq0",
+        "hoverStyle": {
+          "attribute": "",
+          "data": [""],
+          "stroke": [""],
+          "width": [5],
+          "label": {
+            "attribute": "MARQUE: ${MARQUE}"
+          }
+        },
+        "sourceOptions": {
+          "type": "vector",
+          "url": "https://www.donneesquebec.ca/recherche/dataset/f647f5ed-a8f3-4a47-8ceb-977cbf090675/resource/68e0e20a-415d-44f5-af82-a90311784616/download/bornes-incendies.geojson",
+          "queryable": true,
+          "queryFormat": "geojson",
+          "queryTitle": "MARQUE",
+
+          "formatOptions": {
+            "dataProjection": "EPSG:4326",
+            "featureProjection":"EPSG:3857"
+          }
+        }
+      },
+
+      {
+        "title": "Points - Geojson - Style by attribute",
+        "id": "dq1",
+        "styleByAttribute": {
+          "type": "circle",
+          "attribute": "MODELE",
+          "data": ["^2.5\" X 2.5\" X 4\"$","^2.5\" X 2.5\"$","^2.5\" X 2.5\" X 4\" STORZ$", null],
+          "color": ["orange","red","green","blue"],
+          "fill": ["orange","red","green","blue"],
+          "hstroke": ["orange","red","green","blue"],
+          "radius": [8,8,8,2],
+          "label" : ""
+          },
+        "sourceOptions": {
+          "type": "vector",
+          "url": "https://www.donneesquebec.ca/recherche/dataset/f647f5ed-a8f3-4a47-8ceb-977cbf090675/resource/68e0e20a-415d-44f5-af82-a90311784616/download/bornes-incendies.geojson",
+          "queryable": true,
+          "queryFormat": "geojson",
+          "queryTitle": "MARQUE",
+
+          "formatOptions": {
+            "dataProjection": "EPSG:4326",
+            "featureProjection":"EPSG:3857"
+          }
+        }
+      },
+      {
+        "title": "Points -Geojson - Style by attribute - icons",
+        "id": "dq2",
+        "styleByAttribute": {
+          "type": "circle",
+          "attribute": "MODELE",
+          "data": ["^2.5\" X 2.5\" X 4\"$","^2.5\" X 2.5\"$","^2.5\" X 2.5\" X 4\" STORZ$"],
+          "fill": ["orange","red","green"],
+          "icon": ["./assets/images/styles/fire-hydrant.svg","./assets/images/styles/fire-hydrant.svg","./assets/images/styles/fire-hydrant.svg"],
+          "anchor": [[0.5,1],[0.5,1],[0.5,1]],
+          "maxLabelScale": [4000,4000,4000],
+          "baseStyle": {
+            "icon": {
+                "src": "./assets/images/styles/fire-hydrant.svg",
+                "color": "purple",
+                "anchor": [0.5,1]
+              }
+
+          }
+          },
+        "sourceOptions": {
+          "type": "vector",
+          "url": "https://www.donneesquebec.ca/recherche/dataset/f647f5ed-a8f3-4a47-8ceb-977cbf090675/resource/68e0e20a-415d-44f5-af82-a90311784616/download/bornes-incendies.geojson",
+          "queryable": true,
+          "queryFormat": "geojson",
+          "queryTitle": "MARQUE",
+          "formatOptions": {
+            "dataProjection": "EPSG:4326",
+            "featureProjection":"EPSG:3857"
+          }
+        }
+      },
+
+      {
+        "title": "Polygons - MVT - Hover",
+        "id": "mvtsbap",
+        "visible": false,
+        "hoverStyle": {
+          "attribute": "",
+          "data": [""],
+          "stroke": [""],
+          "width": [5, 8, 9],
+          "label": {
+            "attribute": "Centre de service: ${nom_unite_}",
+            "style": {
+              "textAlign": "left",
+              "textBaseline": "top",
+              "font": "12px Calibri,sans-serif",
+              "fill": { "color": "#000" },
+              "backgroundFill": { "color": "rgba(255, 255, 255, 0.5)" },
+              "backgroundStroke": { "color": "rgba(200, 200, 200, 0.75)", "width": 2 },
+              "stroke": { "color": "#fff", "width": 3 },
+              "overflow": true,
+              "offsetX": 20,
+              "offsetY": 10,
+              "padding": [2.5, 2.5, 2.5, 2.5]
+            }
+          }
+        },
+        "sourceOptions": {
+          "queryable": true,
+          "queryTitle": "nom_unite_",
+          "featureClass": "feature",
+          "type": "mvt",
+          "url": "https://ws.mapserver.transports.gouv.qc.ca/swtq?mode=tile&tilemode=gmap&tile={x}+{y}+{z}&layers=bgr_v_centr_servc_geomt_act&map.imagetype=mvt"
+        }
+      },
+      {
+        "title": "Lines - MVT - Style by attribute + hover",
+        "id": "mvtsbal",
+        "visible": true,
+        "declutter": true,
+        "styleByAttribute": {
+          "type": "regular",
+          "attribute": "des_clasf_",
+          "data": ["Nationale", "Autoroute", ".*"],
+          "stroke": ["rgba(240,0,0)","rgba(255,235,190)", "black"],
+          "width": [5,5,3],
+          "label": {
+            "attribute": "RTSS: ${num_rts} \n Classe fonctionnelle: ${des_clasf_}",
+            "style": {
+              "overflow": false,
+              "placement": "line",
+              "fill": {
+                "color": "#88AE13"
+              },
+              "scale": 1.9,
+              "stroke": {
+                "color": "white",
+                "width": 5
+              }
+            }
+          },
+          "hoverStyle": {
+            "attribute": "des_clasf_",
+            "data": ["Nationale", "Autoroute", ".*"],
+            "stroke": ["yellow", "green", "black"],
+            "width": [5, 8, 9],
+            "label": {
+              "attribute": "RTSS: ${num_rts} \n Classe fonctionnelle: ${des_clasf_}",
+              "style": {
+                "textAlign": "left",
+                "textBaseline": "top",
+                "font": "12px Calibri,sans-serif",
+                "fill": { "color": "#000" },
+                "backgroundFill": { "color": "rgba(255, 255, 255, 0.5)" },
+                "backgroundStroke": { "color": "rgba(200, 200, 200, 0.75)", "width": 2 },
+                "stroke": { "color": "#fff", "width": 3 },
+                "overflow": true,
+                "offsetX": 20,
+                "offsetY": 10,
+                "padding": [2.5, 2.5, 2.5, 2.5]
+             }
+            }
+        }
+        },
+        "sourceOptions": {
+          "queryable": true,
+          "queryTitle": "num_rts",
+          "type": "mvt",
+          "url": "https://ws.mapserver.transports.gouv.qc.ca/swtq?mode=tile&tilemode=gmap&tile={x}+{y}+{z}&layers=bgr_v_sous_route_res_sup_act&map.imagetype=mvt",
+
+          "geojsontype": "vector",
+          "geojsonurl": "https://ws.mapserver.transports.gouv.qc.ca/swtq?service=wfs&version=2.0.0&request=getfeature&typename=ms:bgr_v_sous_route_res_sup_act&outputformat=geojson&srsname=EPSG:4326"
+        }
+      },
+      {
+        "title": "Point - MVT - Hover ",
+        "id": "mvtsbapt",
+        "visible": true,
+        "declutter": true,
+        "hoverStyle": {
+          "attribute": "",
+          "data": [""],
+          "stroke": [""],
+          "width": [5],
+          "label": {
+            "attribute": "RTSS-Ch: ${etiquette}"
+          }
+        },
+        "sourceOptions": {
+          "queryable": true,
+          "queryTitle": "etiquette",
+          "type": "mvt",
+          "url": "https://ws.mapserver.transports.gouv.qc.ca/swtq?mode=tile&tilemode=gmap&tile={x}+{y}+{z}&layers=bgr_reperage_metrique&map.imagetype=mvt"
+        }
+      }
+    ]
+  }