@panoramax/web-viewer 3.2.3-develop-04898f19 → 3.2.3-develop-64f445f0

package/docs/index.md

@@ -83,6 +83,15 @@ Once ready, you can create for example a viewer. We use web components to do so,
 
 [Many options are available to configure it finely](./reference/components/core/Viewer.md).
 
+You may also add some CSS to make sure your component has proper dimensions:
+
+```css
+pnx-viewer {
+	width: 300px;
+	height: 250px;
+}
+```
+
 Beyond classic viewer, other widgets are available and [can be tested online](https://viewer.geovisio.fr/).
 
 __Coverage map__

package/docs/reference/components/core/CoverageMap.md

@@ -35,11 +35,14 @@
 ### new CoverageMap()
 Coverage Map is a basic map showing Panoramax coverage.
 
+Make sure to set width/height through CSS for proper display.
+
 **Example**  
 ```html
 <pnx-coverage-map
   endpoint="https://panoramax.openstreetmap.fr/"
   map='{"bounds": [[-73.9876, 40.7661], [-73.9397, 40.8002]]}'
+  style="width: 300px; height: 250px"
 />
 ```
 <a name="Panoramax.components.core.CoverageMap+properties"></a>

package/docs/reference/components/core/Editor.md

@@ -38,10 +38,13 @@
 Editor allows to focus on a single sequence, and preview what you edits would look like.
 It shows both picture and map.
 
+Make sure to set width/height through CSS for proper display.
+
 **Example**  
 ```html
 <pnx-editor
   endpoint="https://panoramax.openstreetmap.fr/"
+  style="width: 300px; height: 250px"
 />
 ```
 <a name="Panoramax.components.core.Editor+properties"></a>

package/docs/reference/components/core/PhotoViewer.md

@@ -56,16 +56,20 @@ This component has a [CorneredGrid](../layout/CorneredGrid.md/#Panoramax.compone
 
 If you need a viewer with map, checkout [Viewer component](Viewer.md/#Panoramax.components.core.Viewer).
 
+Make sure to set width/height through CSS for proper display.
+
 **Example**  
 ```html
 <!-- Basic example -->
 <pnx-photo-viewer
   endpoint="https://panoramax.openstreetmap.fr/"
+  style="width: 300px; height: 250px"
 />
 
 <!-- With slotted widgets -->
 <pnx-photo-viewer
   endpoint="https://panoramax.openstreetmap.fr/"
+  style="width: 300px; height: 250px"
 >
   <p slot="top-right">My custom text</p>
 </pnx-photo-viewer>
@@ -73,6 +77,7 @@ If you need a viewer with map, checkout [Viewer component](Viewer.md/#Panoramax.
 <!-- With only your custom widgets -->
 <pnx-photo-viewer
   endpoint="https://panoramax.openstreetmap.fr/"
+  style="width: 300px; height: 250px"
   widgets="false"
 >
   <p slot="top-right">My custom text</p>

package/docs/reference/components/core/Viewer.md

@@ -61,16 +61,20 @@ This component has a [CorneredGrid](../layout/CorneredGrid.md/#Panoramax.compone
 
 If you need a viewer without map, checkout [Photo Viewer component](PhotoViewer.md/#Panoramax.components.core.PhotoViewer).
 
+Make sure to set width/height through CSS for proper display.
+
 **Example**  
 ```html
 <!-- Basic example -->
 <pnx-viewer
   endpoint="https://panoramax.openstreetmap.fr/"
+  style="width: 300px; height: 250px"
 />
 
 <!-- With slotted widgets -->
 <pnx-viewer
   endpoint="https://panoramax.openstreetmap.fr/"
+  style="width: 300px; height: 250px"
 >
   <p slot="top-right">My custom text</p>
 </pnx-viewer>
@@ -78,6 +82,7 @@ If you need a viewer without map, checkout [Photo Viewer component](PhotoViewer.
 <!-- With only your custom widgets -->
 <pnx-viewer
   endpoint="https://panoramax.openstreetmap.fr/"
+  style="width: 300px; height: 250px"
   widgets="false"
 >
   <p slot="top-right">My custom text</p>
@@ -86,6 +91,7 @@ If you need a viewer without map, checkout [Photo Viewer component](PhotoViewer.
 <!-- With map options -->
 <pnx-viewer
   endpoint="https://panoramax.openstreetmap.fr/"
+  style="width: 300px; height: 250px"
   map="{'maxZoom': 15, 'background': 'aerial', 'raster': '...'}"
 />
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.2.3-develop-04898f19",
+  "version": "3.2.3-develop-64f445f0",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/components/core/CoverageMap.js

@@ -8,6 +8,8 @@ import { default as InitParameters, alterMapState } from "../../utils/InitParame
 
 /**
  * Coverage Map is a basic map showing Panoramax coverage.
+ * 
+ * Make sure to set width/height through CSS for proper display.
  * @class Panoramax.components.core.CoverageMap
  * @element pnx-coverage-map
  * @extends Panoramax.components.core.Basic
@@ -22,6 +24,7 @@ import { default as InitParameters, alterMapState } from "../../utils/InitParame
  * <pnx-coverage-map
  *   endpoint="https://panoramax.openstreetmap.fr/"
  *   map='{"bounds": [[-73.9876, 40.7661], [-73.9397, 40.8002]]}'
+ *   style="width: 300px; height: 250px"
  * />
  * ```
  */
@@ -54,9 +57,6 @@ export default class CoverageMap extends Basic {
 			this._initParams = new InitParameters(InitParameters.GetComponentProperties(CoverageMap, this));
 			this._initMap();
 		});
-
-		// Events handlers
-		this.addEventListener("select", this._onSelect.bind(this));
 	}
 
 	getClassName() {
@@ -103,13 +103,16 @@ export default class CoverageMap extends Basic {
 		this.map = new MyMap(this, this._mapContainer, Object.assign({}, this._initParams.getMapInit(), { hash: true }));
 		this.map.addControl(new NavigationControl({ showCompass: false }));
 		this.loader.setAttribute("value", 70);
+
+		this.addEventListener("select", this._onSelect.bind(this));
+		this.map.on("picture-click", e => this.select(e.seqId, e.picId));
+		this.map.on("sequence-click", e => this.select(e.seqId));
+
 		this.map.waitForEnoughMapLoaded().then(() => {
 			alterMapState(this.map, this._initParams.getMapPostInit());
 			this.map.reloadLayersStyles();
 			this.loader.dismiss();
 		});
-		this.map.on("picture-click", e => this.select(e.seqId, e.picId));
-		this.map.on("sequence-click", e => this.select(e.seqId));
 	}
 
 	/**

package/src/components/core/Editor.js

@@ -17,6 +17,8 @@ const LAYER_HEADING_ID = "sequence-headings";
 /**
  * Editor allows to focus on a single sequence, and preview what you edits would look like.
  * It shows both picture and map.
+ * 
+ * Make sure to set width/height through CSS for proper display.
  * @class Panoramax.components.core.Editor
  * @element pnx-editor
  * @extends Panoramax.components.core.Basic
@@ -31,6 +33,7 @@ const LAYER_HEADING_ID = "sequence-headings";
  * ```html
  * <pnx-editor
  *   endpoint="https://panoramax.openstreetmap.fr/"
+ *   style="width: 300px; height: 250px"
  * />
  * ```
  */

package/src/components/core/PhotoViewer.js

@@ -20,6 +20,8 @@ const PSV_MOVE_DELTA = Math.PI / 6;
  * This component has a [CorneredGrid](#Panoramax.components.layout.CorneredGrid) layout, you can use directly any slot element to pass custom widgets.
  * 
  * If you need a viewer with map, checkout [Viewer component](#Panoramax.components.core.Viewer).
+ * 
+ * Make sure to set width/height through CSS for proper display.
  * @class Panoramax.components.core.PhotoViewer
  * @element pnx-photo-viewer
  * @extends Panoramax.components.core.Basic
@@ -43,11 +45,13 @@ const PSV_MOVE_DELTA = Math.PI / 6;
  * <!-- Basic example -->
  * <pnx-photo-viewer
  *   endpoint="https://panoramax.openstreetmap.fr/"
+ *   style="width: 300px; height: 250px"
  * />
  * 
  * <!-- With slotted widgets -->
  * <pnx-photo-viewer
  *   endpoint="https://panoramax.openstreetmap.fr/"
+ *   style="width: 300px; height: 250px"
  * >
  *   <p slot="top-right">My custom text</p>
  * </pnx-photo-viewer>
@@ -55,6 +59,7 @@ const PSV_MOVE_DELTA = Math.PI / 6;
  * <!-- With only your custom widgets -->
  * <pnx-photo-viewer
  *   endpoint="https://panoramax.openstreetmap.fr/"
+ *   style="width: 300px; height: 250px"
  *   widgets="false"
  * >
  *   <p slot="top-right">My custom text</p>

package/src/components/core/Viewer.js

@@ -26,6 +26,8 @@ const MAP_MOVE_DELTA = 100;
  * This component has a [CorneredGrid](#Panoramax.components.layout.CorneredGrid) layout, you can use directly any slot element to pass custom widgets.
  * 
  * If you need a viewer without map, checkout [Photo Viewer component](#Panoramax.components.core.PhotoViewer).
+ * 
+ * Make sure to set width/height through CSS for proper display.
  * @class Panoramax.components.core.Viewer
  * @element pnx-viewer
  * @extends Panoramax.components.core.PhotoViewer
@@ -52,11 +54,13 @@ const MAP_MOVE_DELTA = 100;
  * <!-- Basic example -->
  * <pnx-viewer
  *   endpoint="https://panoramax.openstreetmap.fr/"
+ *   style="width: 300px; height: 250px"
  * />
  * 
  * <!-- With slotted widgets -->
  * <pnx-viewer
  *   endpoint="https://panoramax.openstreetmap.fr/"
+ *   style="width: 300px; height: 250px"
  * >
  *   <p slot="top-right">My custom text</p>
  * </pnx-viewer>
@@ -64,6 +68,7 @@ const MAP_MOVE_DELTA = 100;
  * <!-- With only your custom widgets -->
  * <pnx-viewer
  *   endpoint="https://panoramax.openstreetmap.fr/"
+ *   style="width: 300px; height: 250px"
  *   widgets="false"
  * >
  *   <p slot="top-right">My custom text</p>
@@ -72,6 +77,7 @@ const MAP_MOVE_DELTA = 100;
  * <!-- With map options -->
  * <pnx-viewer
  *   endpoint="https://panoramax.openstreetmap.fr/"
+ *   style="width: 300px; height: 250px"
  *   map="{'maxZoom': 15, 'background': 'aerial', 'raster': '...'}"
  * />
  * ```

package/src/utils/map.js

@@ -136,6 +136,9 @@ export function combineStyles(parent, options) {
 		style.layers = style.layers.concat(options.supplementaryStyle.layers || []);
 	}
 
+	// Fix for empty layers causing sorting issues
+	style.layers = style.layers.filter(l => l.id);
+
 	// Aerial imagery background
 	if(options.raster) {
 		style.sources["pnx-aerial"] = options.raster;