diff --git a/src/app/pages/portal/portal.component.html b/src/app/pages/portal/portal.component.html index e9a05f764..65f216b65 100644 --- 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 new file mode 100644 index 000000000..1b37e8ac1 --- /dev/null +++ b/src/assets/images/styles/fire-hydrant.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/mapboxStyleExample-vectortile.json b/src/assets/mapboxStyleExample-vectortile.json new file mode 100644 index 000000000..57e7f295d --- /dev/null +++ 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 index fc03bb9ec..e7ba44922 100644 --- a/src/contexts/_base.json +++ b/src/contexts/_base.json @@ -131,7 +131,7 @@ "attributions": "IGO2", "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 index 7687abd30..9d0ad40b3 100644 --- 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 index 47b6ac752..9b5ef4474 100644 --- 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 new file mode 100644 index 000000000..070878de4 --- /dev/null +++ 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" + } + } + ] + }