@teipublisher/pb-components 1.31.0 → 1.33.0

package/src/pb-geolocation.js

@@ -30,9 +30,24 @@ export class PbGeolocation extends PbHighlight {
             label: {
                 type: String
             },
+            /**
+             * Name of the event which triggers a pb-geolocation event, e.g. 'click'.
+             * Default is 'mouseover'.
+             */
             event: {
                 type: String
             },
+            /**
+             * Zoom level to use for the map if it centers on the location.
+             */
+            zoom: {
+                type: Number
+            },
+            /**
+             * If set, add location to a map automatically upon load by
+             * emitting an event. If not set, locations are only added when
+             * the configured event is triggered.
+             */
             auto: {
                 type: Boolean
             }
@@ -43,6 +58,7 @@ export class PbGeolocation extends PbHighlight {
         super();
         this.event = 'mouseover';
         this.auto = false;
+        this.zoom = null;
     }
 
     connectedCallback() {
@@ -56,6 +72,7 @@ export class PbGeolocation extends PbHighlight {
                         longitude: this.longitude
                     },
                     label: this.label,
+                    zoom: this.zoom,
                     popup: this.popup,
                     element: this
                 })
@@ -70,6 +87,7 @@ export class PbGeolocation extends PbHighlight {
                     },
                     label: this.label,
                     popup: this.popup,
+                    fitBounds: true,
                     element: this
                 });
             });

package/src/pb-leaflet-map.js

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from 'lit-element';
-import * as L from 'leaflet/dist/leaflet-src.esm.js';
+import "@lrnwebcomponents/es-global-bridge";
 import { pbMixin } from './pb-mixin.js';
 import { resolveURL } from './utils.js';
 import './pb-map-layer.js';
@@ -9,9 +9,22 @@ import './pb-map-layer.js';
  *
  * @slot - may contain a series of `pb-map-layer` configurations
  * @fires pb-leaflet-marker-click - Fires event to be processed by the map upon click
- * @fires pb-update-map - When received, redraws the map to fit markers passed in with the event
- * @fires pb-update - When received, redraws the map to show markers for all pb-geolocation elements
- * @fires pb-geolocation - When received, focuses the map on the geocoordinates passed in with the event
+ * @fires pb-update-map - When received, redraws the map to fit markers passed in with the event.
+ * Event details should include an array of locations, see `pb-geolocation` event below.
+ * @fires pb-update - When received, redraws the map to show markers for all pb-geolocation elements found in the content of the pb-view
+ * @fires pb-geolocation - When received, focuses the map on the geocoordinates passed in with the event.
+ * The event details should include an object:
+ * ```
+ * {
+ *   coordinates: {
+ *         latitude: Number,
+ *         longitude: Number
+ *   },
+ *   label: string - the label to show on mouseover,
+ *   zoom: Number - fixed zoom level to zoom to,
+ *   fitBounds: Boolean - if true, recompute current zoom level to show all markers
+ * }
+ * ```
  */
 export class PbLeafletMap extends pbMixin(LitElement) {
     static get properties() {
@@ -29,6 +42,30 @@ export class PbLeafletMap extends pbMixin(LitElement) {
             crs: {
                 type: String
             },
+            /**
+             * If set, the map will automatically zoom so it can fit all the markers
+             */
+            fitMarkers: {
+                type: Boolean,
+                attribute: 'fit-markers'
+            },
+            /**
+             * If set, combine markers into clusters if they are located too close together
+             * to display as single markers
+             */
+            cluster: {
+                type: Boolean
+            },
+            /**
+             * Limits up to which zoom level markers are arranged into clusters.
+             * Using a higher zoom level here will result in more markers to be shown.
+             * 
+             * Requires `cluster` option to be enabled.
+             */
+            disableClusteringAt: {
+                type: Number,
+                attribute: 'disable-clustering-at'
+            },
             /**
              * If enabled, the map will not automatically scroll to the coordinates received via `pb-geolocation`
              */
@@ -73,6 +110,9 @@ export class PbLeafletMap extends pbMixin(LitElement) {
         this.toggle = false;
         this.noScroll = false;
         this.disabled = true;
+        this.cluster = false;
+        this.fitMarkers = false;
+        this.disableClusteringAt = null;
     }
 
     connectedCallback() {
@@ -85,7 +125,8 @@ export class PbLeafletMap extends pbMixin(LitElement) {
          * @param {{ detail: any[]; }} ev
          */
         this.subscribeTo('pb-update-map', (ev) => {
-            const bounds = L.latLngBounds();
+            this._markerLayer.clearLayers();
+
             /**
              * @param {{ latitude: any; longitude: any; label: any; }} loc
              */
@@ -101,14 +142,9 @@ export class PbLeafletMap extends pbMixin(LitElement) {
                     this.emitTo('pb-leaflet-marker-click', loc);
                 });
                 marker.bindTooltip(loc.label);
-                marker.addTo(this._map);
-                bounds.extend([loc.latitude, loc.longitude]);
+                this._markerLayer.addLayer(marker);
             });
-            if (ev.detail.length > 1) {
-                this._map.fitBounds(bounds);
-            } else {
-                this._map.setZoom(this.zoom);
-            }
+            this._fitBounds();
         });
 
         /**
@@ -117,20 +153,14 @@ export class PbLeafletMap extends pbMixin(LitElement) {
          * @param {{ detail: { root: { querySelectorAll: (arg0: string) => any[]; }; }; }} ev
          */
         this.subscribeTo('pb-update', (ev) => {
-            this._map.eachLayer((layer) => {
-                if (layer instanceof L.Marker) {
-                    layer.remove();
-                }
-            });
-            const bounds = L.latLngBounds();
+            this._markerLayer.clearLayers();
             const locations = ev.detail.root.querySelectorAll('pb-geolocation');
             /**
              * @param {{ latitude: any; longitude: any; }} loc
              */
             locations.forEach((loc) => {
                 const coords = L.latLng(loc.latitude, loc.longitude);
-                bounds.extend(coords);
-                const marker = L.marker(coords).addTo(this._map);
+                const marker = L.marker(coords).addTo(this._markerLayer);
                 if (loc.label) {
                     marker.bindTooltip(loc.label);
                 }
@@ -141,14 +171,7 @@ export class PbLeafletMap extends pbMixin(LitElement) {
                     this.emitTo('pb-leaflet-marker-click', loc);
                 });
             });
-            // this._map.invalidateSize();
-            if (locations.length === 0) {
-                this._map.fitWorld();
-            } else if (locations.length === 1) {
-                this._map.fitBounds(bounds, {maxZoom: this.zoom});
-            } else {
-                this._map.fitBounds(bounds);
-            }
+            this._fitBounds();
         });
 
         /**
@@ -171,7 +194,12 @@ export class PbLeafletMap extends pbMixin(LitElement) {
                     if (ev.detail.popup) {
                         marker.bindPopup(ev.detail.popup);
                     }
-                    marker.addTo(this._map);
+                    marker.addTo(this._markerLayer);
+
+                    if (ev.detail.fitBounds) {
+                        this._fitBounds();
+                    }
+
                     console.log('<pb-leaflet-map> added marker');
                 } else {
                     console.log('<pb-leaflet-map> Marker already added to map');
@@ -179,7 +207,7 @@ export class PbLeafletMap extends pbMixin(LitElement) {
                 if (this.toggle) {
                     this.disabled = false;
                 }
-                this._locationChanged();
+                this._locationChanged(this.latitude, this.longitude, ev.detail.zoom);
             }
         });
     }
@@ -188,13 +216,23 @@ export class PbLeafletMap extends pbMixin(LitElement) {
         if (!this.toggle) {
             this.disabled = false;
         }
-        this._initMap();
+        window.ESGlobalBridge.requestAvailability();
+        const leafletPath = resolveURL('../lib/leaflet-src.js');
+        const pluginPath = resolveURL('../lib/leaflet.markercluster-src.js');
+        window.ESGlobalBridge.instance.load("leaflet", leafletPath)
+        .then(() => window.ESGlobalBridge.instance.load("plugin", pluginPath));
+        window.addEventListener(
+            "es-bridge-plugin-loaded",
+            this._initMap.bind(this),
+            { once: true }
+        );
     }
 
     render() {
         const cssPath = resolveURL(this.cssPath);
         return html`
             <link rel="Stylesheet" href="${cssPath}/leaflet.css">
+            <link rel="Stylesheet" href="${cssPath}/MarkerCluster.Default.css">
             <div id="map" style="height: 100%; width: 100%"></div>
         `;
     }
@@ -236,6 +274,18 @@ export class PbLeafletMap extends pbMixin(LitElement) {
             crs
         });
         this._configureLayers();
+
+        if (this.cluster) {
+            const options = {};
+            if (this.disableClusteringAt) {
+                options.disableClusteringAtZoom = this.disableClusteringAt;
+            }
+            this._markerLayer = L.markerClusterGroup(options);
+        } else {
+            this._markerLayer = L.layerGroup();
+        }
+        this._markerLayer.addTo(this._map);
+
         this.signalReady();
 
         L.control.scale().addTo(this._map);
@@ -310,27 +360,50 @@ export class PbLeafletMap extends pbMixin(LitElement) {
         }
     }
 
-    _locationChanged() {
+    _fitBounds() {
+        if (!this.fitMarkers) {
+            return;
+        }
+        const bounds = L.latLngBounds();
+        let len = 0;
+        this._markerLayer.eachLayer((layer) => {
+            bounds.extend(layer.getLatLng());
+            len += 1;
+        });
+        if (len === 0) {
+            this._map.fitWorld();
+        } else if (len === 1) {
+            this._map.fitBounds(bounds, {maxZoom: this.zoom});
+        } else {
+            this._map.fitBounds(bounds);
+        }
+    }
+
+    _locationChanged(lat, long, zoom) {
         if (this._map) {
-            const coords = L.latLng([this.latitude, this.longitude]);
-            this._map.eachLayer((layer) => {
-                if (layer instanceof L.Marker) {
-                    if (layer.getLatLng().equals(coords)) {
+            const coords = L.latLng([lat, long]);
+            this._markerLayer.eachLayer((layer) => {
+                if (layer.getLatLng().equals(coords)) {
+                    if (zoom && !this.noScroll) {
                         layer.openTooltip();
+                        this._map.setView(coords, zoom);
+                    } else if (this.cluster) {
+                        this._markerLayer.zoomToShowLayer(layer, () =>
+                            layer.openTooltip()
+                        );
                     } else {
-                        layer.closeTooltip();
+                        layer.openTooltip();
+                        this._map.setView(coords, this.zoom);
                     }
                 }
             });
-            if (!this.noScroll) 
-                this._map.setView(coords, this.zoom);
         }
     }
 
     _hasMarker(lat, long) {
         const coords = L.latLng([lat, long]);
         let found = false;
-        this._map.eachLayer((layer) => {
+        this._markerLayer.eachLayer((layer) => {
             if (layer instanceof L.Marker && layer.getLatLng().equals(coords)) {
                 found = true;
             }

package/src/pb-split-list.js

@@ -49,9 +49,6 @@ export class PbSplitList extends pbMixin(LitElement) {
             _categories: {
                 type: Array
             },
-            _items: {
-                type: Array
-            },
             ...super.properties
         };
     }
@@ -59,7 +56,6 @@ export class PbSplitList extends pbMixin(LitElement) {
     constructor() {
         super();
         this._categories = [];
-        this._items = [];
         this._params = {};
         this.selected = null;
         this.subforms = null;
@@ -112,7 +108,7 @@ export class PbSplitList extends pbMixin(LitElement) {
         })
         .then((json) => {
             this._categories = json.categories;
-            this._items = json.items;
+            this.innerHTML = json.items.join('');
             this.emitTo('pb-end-update');
         })
         .catch((error) => {
@@ -152,11 +148,7 @@ export class PbSplitList extends pbMixin(LitElement) {
                 )
             }
             </header>
-            <div id="items" part="items">
-            ${
-                this._items.map((item) => html`<div part="item">${unsafeHTML(item)}</div>`)
-            }
-            </div>
+            <div id="items" part="items"><slot></slot></div>
         `;
     }
 
@@ -167,10 +159,10 @@ export class PbSplitList extends pbMixin(LitElement) {
             }
 
             header {
-                display: grid;
-                grid-auto-flow: column;
-                width: 100%;
+                display: flex;
+                flex-wrap: wrap;
                 column-gap: 10px;
+                width: 100%;
             }
 
             #items {