@panoramax/web-viewer 4.4.0-develop-746bcb00 → 4.4.0-develop-d8b38e70

package/docs/tutorials/semantics_overlays.md

@@ -1,74 +0,0 @@
-# Add custom semantics overlays
-
-You can take profit of [Panoramax Tags](https://docs.panoramax.fr/tags/) in your own web viewer using _Semantics overlays_. They allow to display pictures having specific tags directly over the map, like traffic signs overlay.
-
-This can be done after viewer initial load:
-
-```js
-var viewer = document.getElementById("viewer");
-
-viewer.onceMapReady().then(() => {
-	viewer.map.addSemanticOverlay(
-		// Overlay ID, used by MapLibre and for URL
-		"animals",
-
-		// API semantics filter
-		"\"semantics.osm|traffic_sign\"='FR:A15b'",
-
-		// MapLibre layer style, with custom metadata for viewer widget
-		{
-			metadata: { "name": "Wild animals" },
-			type: "circle",
-			paint: {
-				"circle-color": "blue"
-			}
-		}
-	);
-});
-```
-
-You can have any kind of complex MapLibre style rendering, including sprites. For example, that's how we manage the traffic signs overlay:
-
-```js
-var viewer = document.getElementById("viewer");
-
-viewer.onceMapReady().then(() => {
-	viewer.map.addSemanticOverlay(
-		// Overlay ID, used by MapLibre and for URL
-		"tfsigns",
-
-		// API semantics filter
-		"\"semantics.osm|traffic_sign\" IS NOT NULL",
-
-		// MapLibre layer style, with custom metadata for viewer widget
-		{
-			metadata: { "name": "Traffic signs" },
-			type: "symbol",
-			layout: {
-				// Define initial visibility
-				visibility: "none",
-				"icon-overlap": "never",
-				// Icon based on sprite defined below, with conditional rendering
-				"icon-image": ["case",
-					// Many signs
-					["in", ";", ["get", "osm|traffic_sign"]],
-					"pnx-tfsigns-fr:0_many",
-					// Single FR sign
-					["==", ["slice", ["get", "osm|traffic_sign"], 0, 2], "FR"],
-					["concat", "pnx-tfsigns-fr:", ["slice", ["get", "osm|traffic_sign"], 3]],
-					// Generic value
-					["==", ["get", "osm|traffic_sign"], "yes"],
-					"pnx-tfsigns-fr:0_unknown",
-					// Fallbacks
-					["has", "osm|traffic_sign"],
-					"pnx-tfsigns-fr:0_unknown",
-					""
-				]
-			}
-		},
-
-		// Required sprites, you can even define many if necessary
-		{ "pnx-tfsigns-fr": "https://presets.panoramax.fr/sprites/trafficsigns_fr" }
-	);
-});
-```

package/docs/tutorials/synced_coverage.md

@@ -1,43 +0,0 @@
-# Coverage map synced with external component
-
-Let's say you want to list all sequences of an user. You can display a standalone map which can be synced with your custom list. Create your _Coverage Map_ web component:
-
-```html
-<pnx-coverage-map
-  id="coverage"
-  class="fullpage"
-  endpoint="https://api.panoramax.xyz/api"
-/>
-```
-
-Then, access it through JavaScript for further interaction:
-
-```js
-// Retrieve component from DOM
-var coverage = document.getElementById("coverage");
-
-// Wait for map initial load
-coverage.addEventListener("ready", () => {
-	// Change visible map area
-	coverage.map.fitBounds([0, 0, 180, 90]);
-
-	// Listen to sequence hovered on map
-	// You can alternatively use: coverage.addEventListener("map:sequence-hover", ...)
-	coverage.map.on("sequence-hover", e => {
-		console.log("Hovered sequence", e.seqId);
-	});
-
-	// Listen to user clicks on map
-	coverage.addEventListener("select", e => {
-		console.log("Selected sequence", e.detail.seqId, "picture", e.detail.picId);
-	});
-
-	// You can also programmatically change selection on map
-	coverage.select(
-		"c463d190-06b0-47fb-98a8-b4a775a39ad6", // A sequence ID
-		"bdea1eb4-4496-46da-a4d5-b22b16e75fa8"  // A picture ID (can be null if unknown)
-	);
-}, {once: true});
-```
-
-All available interaction are listed in [Coverage Map reference](../reference/components/core/CoverageMap.md).

package/mkdocs.yml

@@ -1,131 +0,0 @@
-site_name: 'Panoramax - Web viewer'
-site_url: https://docs.panoramax.fr
-
-theme:
-  name: material
-  logo: https://gitlab.com/panoramax/gitlab-profile/-/raw/main/images/panoramax_favicon.svg
-  features:
-    - navigation.footer
-    - navigation.tracking
-    - navigation.sections
-    - search.suggest
-    - search.share
-    - content.code.annotate
-    - content.code.copy
-    - content.code.select
-
-plugins:
-  - search
-
-markdown_extensions:
-  - admonition
-  - pymdownx.superfences
-  - pymdownx.details
-  - pymdownx.tabbed:
-      alternate_style: true
-  - pymdownx.highlight:
-      anchor_linenums: true
-      line_spans: __span
-      pygments_lang_class: true
-  - pymdownx.inlinehilite
-  - pymdownx.snippets
-  - attr_list
-  - pymdownx.emoji:
-      emoji_index: !!python/name:material.extensions.emoji.twemoji
-      emoji_generator: !!python/name:material.extensions.emoji.to_svg
-
-nav:
-  - 'Quick start': 'index.md'
-  - 'Migrating':
-    - 'v4 to v5': 'tutorials/migrate_v5.md'
-    - 'v3 to v4': 'tutorials/migrate_v4.md'
-  - Tips:
-    - 'URL settings': '03_URL_settings.md'
-    - Shortcuts: 'shortcuts.md'
-  - Tutorials:
-    - 'Change map style': 'tutorials/map_style.md'
-    - 'Add aerial imagery': 'tutorials/aerial_imagery.md'
-    - 'Server authentication': 'tutorials/authentication.md'
-    - 'Custom widgets': 'tutorials/custom_widgets.md'
-    - 'Synced coverage map': 'tutorials/synced_coverage.md'
-    - 'Semantics overlays': 'tutorials/semantics_overlays.md'
-    - 'Indoor maps': 'tutorials/indoor_maps.md'
-  - Develop:
-    - 'Where to start': '09_Develop.md'
-    - 'STAC API compatibility': '05_Compatibility.md'
-    - 'Make a release': '90_Releases.md'
-  - 'API reference':
-    - Overview: 'reference.md'
-    - components:
-      - core:
-        - Basic: 'reference/components/core/Basic.md'
-        - CoverageMap: 'reference/components/core/CoverageMap.md'
-        - Editor: 'reference/components/core/Editor.md'
-        - PhotoViewer: 'reference/components/core/PhotoViewer.md'
-        - Viewer: 'reference/components/core/Viewer.md'
-      - layout:
-        - BottomDrawer: 'reference/components/layout/BottomDrawer.md'
-        - CorneredGrid: 'reference/components/layout/CorneredGrid.md'
-        - Mini: 'reference/components/layout/Mini.md'
-        - Tabs: 'reference/components/layout/Tabs.md'
-      - menus:
-        - LocationPrecisionDoc: 'reference/components/menus/LocationPrecisionDoc.md'
-        - MapBackground: 'reference/components/menus/MapBackground.md'
-        - MapFilters: 'reference/components/menus/MapFilters.md'
-        - MapLayers: 'reference/components/menus/MapLayers.md'
-        - MapLegend: 'reference/components/menus/MapLegend.md'
-        - MiniPictureLegend: 'reference/components/menus/MiniPictureLegend.md'
-        - PictureLegend: 'reference/components/menus/PictureLegend.md'
-        - PictureMetadata: 'reference/components/menus/PictureMetadata.md'
-        - PlayerOptions: 'reference/components/menus/PlayerOptions.md'
-        - QualityScoreDoc: 'reference/components/menus/QualityScoreDoc.md'
-        - ReportForm: 'reference/components/menus/ReportForm.md'
-        - SemanticsDoc: 'reference/components/menus/SemanticsDoc.md'
-        - SemanticsDownload: 'reference/components/menus/SemanticsDownload.md'
-        - SemanticsFilters: 'reference/components/menus/SemanticsFilters.md'
-        - SemanticsList: 'reference/components/menus/SemanticsList.md'
-        - SemanticsMetadata: 'reference/components/menus/SemanticsMetadata.md'
-        - ShareMenu: 'reference/components/menus/ShareMenu.md'
-      - ui:
-        - widgets:
-          - CopyCoordinates: 'reference/components/ui/widgets/CopyCoordinates.md'
-          - GeoSearch: 'reference/components/ui/widgets/GeoSearch.md'
-          - Legend: 'reference/components/ui/widgets/Legend.md'
-          - LevelSelect: 'reference/components/ui/widgets/LevelSelect.md'
-          - MapFiltersButton: 'reference/components/ui/widgets/MapFiltersButton.md'
-          - MapLayersButton: 'reference/components/ui/widgets/MapLayersButton.md'
-          - OSMEditors: 'reference/components/ui/widgets/OSMEditors.md'
-          - PictureLegendActions: 'reference/components/ui/widgets/PictureLegendActions.md'
-          - Player: 'reference/components/ui/widgets/Player.md'
-          - SemanticsFiltersButton: 'reference/components/ui/widgets/SemanticsFiltersButton.md'
-          - Zoom: 'reference/components/ui/widgets/Zoom.md'
-        - AnnotationsSwitch: 'reference/components/ui/AnnotationsSwitch.md'
-        - Button: 'reference/components/ui/Button.md'
-        - ButtonGroup: 'reference/components/ui/ButtonGroup.md'
-        - CopyButton: 'reference/components/ui/CopyButton.md'
-        - Grade: 'reference/components/ui/Grade.md'
-        - GradeFilter: 'reference/components/ui/GradeFilter.md'
-        - IconSwitch: 'reference/components/ui/IconSwitch.md'
-        - LinkButton: 'reference/components/ui/LinkButton.md'
-        - ListGroup: 'reference/components/ui/ListGroup.md'
-        - ListItem: 'reference/components/ui/ListItem.md'
-        - Loader: 'reference/components/ui/Loader.md'
-        - Map: 'reference/components/ui/Map.md'
-        - MapMore: 'reference/components/ui/MapMore.md'
-        - Photo: 'reference/components/ui/Photo.md'
-        - Popup: 'reference/components/ui/Popup.md'
-        - ProgressBar: 'reference/components/ui/ProgressBar.md'
-        - QualityScore: 'reference/components/ui/QualityScore.md'
-        - SearchBar: 'reference/components/ui/SearchBar.md'
-        - SemanticsEditor: 'reference/components/ui/SemanticsEditor.md'
-        - SemanticsTable: 'reference/components/ui/SemanticsTable.md'
-        - Switch: 'reference/components/ui/Switch.md'
-        - TogglableGroup: 'reference/components/ui/TogglableGroup.md'
-    - utils:
-      - API: 'reference/utils/API.md'
-      - InitParameters: 'reference/utils/InitParameters.md'
-      - MapStyleComposer: 'reference/utils/MapStyleComposer.md'
-      - PanoraMapProtocol: 'reference/utils/PanoraMapProtocol.md'
-      - PresetsManager: 'reference/utils/PresetsManager.md'
-      - URLHandler: 'reference/utils/URLHandler.md'
-      - SemanticsMapProtocol: 'reference/utils/SemanticsMapProtocol.md'

package/public/editor.html

@@ -1,53 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <title>Panoramax Editor</title>
-  <style>
-    #editor {
-      position: relative;
-      width: 95%;
-      margin: 2.5%;
-      height: 400px;
-    }
-    #editor.fullpage {
-      position: fixed;
-      inset: 0;
-      height: unset;
-      width: unset;
-      margin: 0;
-    }
-  </style>
-</head>
-<body>
-<noscript>
-  You need to enable JavaScript to run this app.
-</noscript>
-
-<pnx-editor
-  id="editor"
-  class="fullpage"
-  sequence="ecfe4b2c-0acd-4d3a-a10d-c3e6818755c8"
-  picture="329af5c6-4761-4a6d-9c1e-674fd6daa8b6"
-  background="aerial"
-  raster='{
-    type: "raster",
-    tiles: [
-      "https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&STYLE=normal&FORMAT=image/jpeg&TILEMATRIXSET=PM_0_19&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
-    ],
-    minzoom: 0,
-    maxzoom: 19,
-    attribution: "&copy; IGN",
-    tileSize: 256
-  }'
-></pnx-editor>
-
-<script src="./servers.js"></script>
-<script>
-	var editor = document.getElementById("editor");
-	editor.setAttribute("endpoint", server);
-</script>
-
-</body>
-</html>

package/public/index.html

@@ -1,70 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-  <title>Panoramax JS Library</title>
-  <style>
-    body {
-      font-family: sans-serif;
-      text-align: center;
-    }
-    .allViews {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-around;
-      align-items: flex-start;
-      gap: 10px;
-    }
-    .oneView {
-      text-align: center;
-      flex: 1;
-      min-width: 400px;
-    }
-    iframe {
-      width: 100%;
-      height: 300px;
-      border: none;
-    }
-  </style>
-</head>
-<body>
-  <noscript>
-    You need to enable JavaScript to run this app.
-  </noscript>
-  <h1>Panoramax JavaScript Client</h1>
-  <p>Panoramax JS library offers different views to suit your needs.<br />You can also give a look at the <a href="./widgets.html">widgets test page</a>.</p>
-
-  <div class="allViews">
-    <div class="oneView">
-      <h2>Viewer</h2>
-      <p>General-purpose map and picture display.<br /><a href="./viewer.html">Full page</a> | <a href="https://viewer.geovisio.fr/docs/reference/components/core/Viewer/">Docs</a></p>
-      <iframe src="./viewer.html"></iframe>
-    </div>
-
-    <div class="oneView">
-      <h2>Photo Viewer</h2>
-      <p>Picture-only display.<br /><a href="./photo.html">Full page</a> | <a href="https://viewer.geovisio.fr/docs/reference/components/core/PhotoViewer/">Docs</a></p>
-      <iframe src="./photo.html"></iframe>
-    </div>
-
-    <div class="oneView">
-      <h2>Coverage Map</h2>
-      <p>A map-only view, to locate sequences and pictures.<br /><a href="./map.html">Full page</a> | <a href="https://viewer.geovisio.fr/docs/reference/components/core/CoverageMap/">Docs</a></p>
-      <iframe src="./map.html"></iframe>
-    </div>
-
-    <div class="oneView">
-      <h2>Editor</h2>
-      <p>A map and picture view, focused around metadata editing.<br /><a href="./editor.html">Full page</a> | <a href="https://viewer.geovisio.fr/docs/reference/components/core/Editor/">Docs</a></p>
-      <iframe src="./editor.html"></iframe>
-    </div>
-
-    <div class="oneView">
-      <h2>Viewer with Indoor Maps</h2>
-      <p>Using OSM & indoor= map data.<br /><a href="./viewer_indoor.html">Full page</a> | <a href="https://viewer.geovisio.fr/docs/tutorials/indoor_maps/">Docs</a></p>
-      <iframe src="./viewer_indoor.html"></iframe>
-    </div>
-  </div>
-</body>
-</html>

package/public/map.html

@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <title>Panoramax Coverage Map</title>
-  <style>
-    #coverage {
-      position: relative;
-      width: 95%;
-      margin: 2.5%;
-      height: 400px;
-    }
-    #coverage.fullpage {
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: unset;
-      width: unset;
-      margin: 0;
-    }
-  </style>
-</head>
-<body>
-<noscript>
-  You need to enable JavaScript to run this app.
-</noscript>
-
-<pnx-coverage-map
-  id="coverage"
-  class="fullpage"
-></pnx-coverage-map>
-
-<script src="./servers.js"></script>
-<script>
-	// Retrieve component from DOM
-	var coverage = document.getElementById("coverage");
-	coverage.setAttribute("endpoint", server);
-
-	coverage.addEventListener("ready", () => {
-		// Listen to sequence hovered on map
-		coverage.map.on("sequence-hover", e => {
-			console.log("Hovered sequence", e.seqId);
-		});
-
-		// Listen to user clicks on map
-		coverage.addEventListener("select", e => {
-			console.log("Selected sequence", e.detail.seqId, "picture", e.detail.picId);
-		});
-	}, {once: true});
-</script>
-</body>
-</html>

package/public/photo.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-  <title>Panoramax Photo Viewer</title>
-  <style>
-    #viewer {
-      position: relative;
-      width: 95%;
-      margin: 2.5%;
-      height: 400px;
-    }
-    #viewer.fullpage {
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: unset;
-      width: unset;
-      margin: 0;
-    }
-  </style>
-</head>
-<body>
-<noscript>
-  You need to enable JavaScript to run this app.
-</noscript>
-
-<pnx-photo-viewer
-  id="viewer"
-  class="fullpage"
-  picture="329af5c6-4761-4a6d-9c1e-674fd6daa8b6"
-></pnx-photo-viewer>
-
-<script src="./servers.js"></script>
-<script>
-	var viewer = document.getElementById("viewer");
-	viewer.setAttribute("endpoint", server);
-</script>
-</body>
-</html>

package/public/servers.js

@@ -1,15 +0,0 @@
-var servers = {
-	meta: "https://explore.panoramax.fr/api",
-	ign: "https://panoramax.ign.fr/api",
-	osmfr: "https://panoramax.openstreetmap.fr/api",
-	local: "http://localhost:5000/api",
-	dev: "https://dev.panoramax.xyz/api",
-	cartocite: "https://panoramax.cartocite.fr/api",
-};
-var urlParams = new URLSearchParams(window.location.search);
-// eslint-disable-next-line no-unused-vars
-var server = servers[urlParams.get("server") || "meta"];
-if(!server) {
-	console.error("Unrecognized server: "+urlParams.get("server"));
-	server = servers.meta;
-}

package/public/viewer.html

@@ -1,79 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-  <title>Panoramax Web Viewer</title>
-  <style>
-    #viewer {
-      position: relative;
-      width: 95%;
-      margin: 2.5%;
-      height: 400px;
-    }
-    #viewer.fullpage {
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: unset;
-      width: unset;
-      margin: 0;
-    }
-  </style>
-</head>
-<body>
-<noscript>
-  You need to enable JavaScript to run this app.
-</noscript>
-
-<pnx-viewer
-  id="viewer"
-  class="fullpage"
-  map-options='{
-    raster: {
-      type: "raster",
-      tiles: [
-        "https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&STYLE=normal&FORMAT=image/jpeg&TILEMATRIXSET=PM_0_19&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
-      ],
-      minzoom: 0,
-      maxzoom: 19,
-      attribution: "&copy; IGN",
-      tileSize: 256
-    },
-    basemaps: {
-      "OSM Topo": "https://tile-vect.openstreetmap.fr/styles/topo/style.json",
-      "OSM FR": "https://a.tile.openstreetmap.fr/osmfr/{z:19}/{x}/{y}.png",
-      osmbzh: {
-        sources: {
-            "osmbzh": {
-                "type": "raster",
-                "tiles": ["https://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png"],
-                "tileSize": 256,
-                "minzoom": 0,
-                "maxzoom": 19,
-                "attribution": "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> & <a href=\"http://www.openstreetmap.bzh/\">Breton OpenStreetMap Team</a>",
-            }
-        },
-        "layers": [
-            {
-                "id": "osmbzh",
-                "type": "raster",
-                "source": "osmbzh",
-                "metadata": {"name": "OSM e brezhoneg"}
-            }
-        ]
-      }
-    }
-  }'
-></pnx-viewer>
-
-<script src="./servers.js"></script>
-<script>
-	var viewer = document.getElementById("viewer");
-	if(server === servers.meta) { viewer.setAttribute("metacatalog", "false"); }
-	viewer.setAttribute("endpoint", server);
-</script>
-</body>
-</html>

package/public/viewer_indoor.html

@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-  <title>Panoramax Web Viewer - Indoor</title>
-  <script src="https://unpkg.com/maplibre-gl-indoorequal@1.3.0/dist/maplibre-gl-indoorequal.umd.min.js"></script>
-  <link href="https://unpkg.com/maplibre-gl-indoorequal@1.3.0/maplibre-gl-indoorequal.css" rel="stylesheet" />
-  <style>
-    #viewer {
-      position: relative;
-      width: 95%;
-      margin: 2.5%;
-      height: 400px;
-    }
-    #viewer.fullpage {
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: unset;
-      width: unset;
-      margin: 0;
-    }
-  </style>
-</head>
-<body>
-<noscript>
-  You need to enable JavaScript to run this app.
-</noscript>
-
-<pnx-viewer
-  id="viewer"
-  class="fullpage"
-  endpoint="https://panoramax.openstreetmap.fr/api"
-  map-options='{
-	center: [-1.55958, 47.2135],
-	zoom: 19,
-    indoor: {
-      apiKey: "iek_yFQp8AMQpK78c8wPyAvbXY3ko6nh",
-      heatmap: false,
-	  level: "2"
-    }
-  }'
-></pnx-viewer>
-</body>
-</html>