@cowegis/client 1.0.1 → 1.0.3

package/js/element/MapElement.js

@@ -13,7 +13,7 @@ class MapElement extends HTMLElement {
         this.attachShadow({mode: 'open'});
         this.shadowRoot.innerHTML = template;
         this._leaflet = L;
-        this._container = this.shadowRoot.querySelector('.cowegis-map-container');;
+        this._container = this.shadowRoot.querySelector('.cowegis-map-container');
         this._map = null;
         this._layers = {};
         this._controls = {};
@@ -21,6 +21,7 @@ class MapElement extends HTMLElement {
         this._listeners = {};
         this._config = {};
         this._assets = new AssetsLoader(this);
+        this._connected = false;
     }
 
     get container() {
@@ -41,9 +42,11 @@ class MapElement extends HTMLElement {
         this._listeners = {};
         this._config = this._prepareConfig(config);
 
-        mapFactory.create(this).then(function () {
-            this.dispatchEvent(new CustomEvent('cowegis:ready', {bubbles: true, detail: {element: this}}));
-        }.bind(this));
+        if (this._connected) {
+            this._createMap();
+        } else {
+            this.addEventListener('cowegis:connected', this._createMap.bind(this));
+        }
     }
 
     get leaflet() {
@@ -89,6 +92,7 @@ class MapElement extends HTMLElement {
 
             config.then(function (config) {
                 this.config = config;
+                this._setConnected();
             }.bind(this));
 
             return;
@@ -109,6 +113,8 @@ class MapElement extends HTMLElement {
             configLoaded = true;
         }.bind(this));
 
+        this._setConnected();
+
         if (configLoaded) {
             return;
         }
@@ -163,6 +169,17 @@ class MapElement extends HTMLElement {
 
         return config;
     }
+
+    _createMap() {
+        mapFactory.create(this).then(function () {
+            this.dispatchEvent(new CustomEvent('cowegis:ready', {bubbles: true, detail: {element: this}}));
+        }.bind(this));
+    }
+
+    _setConnected() {
+        this._connected = true;
+        this.dispatchEvent(new CustomEvent('cowegis:connected', {bubbles: true, detail: {element: this}}));
+    }
 }
 
 export default MapElement;

package/js/factory/MapFactory.js

@@ -40,7 +40,7 @@ class MapFactory {
 
         this.registerListeners(config, element);
 
-        if (config.view) {
+        if (config.view && config.view.center) {
             element.map.setView(config.view.center, config.view.zoom, config.view.zoomOptions);
         }
 

package/js/layer/OverpassLayer.js

@@ -1,6 +1,7 @@
 import osmtogeojson from 'osmtogeojson';
 
 import leaflet from '../leaflet';
+import {mapFactory} from "../factory";
 
 /**
  * Get the bounds as overpass bbox string.
@@ -30,7 +31,7 @@ export default leaflet.FeatureGroup.extend({
      *
      * @param options
      */
-    initialize: function (options) {
+    initialize: function (options, element) {
         if (!options.pointToLayer) {
             options.pointToLayer = this.pointToLayer;
         }
@@ -39,10 +40,11 @@ export default leaflet.FeatureGroup.extend({
         }
 
         leaflet.Util.setOptions(this, options);
-        this.options.dynamicLoad = !!this.options.query.match(/BBOX/g);
+        this.options.dynamicLoad = !this.options.adjustBounds && !!this.options.query.match(/BBOX/g);
 
         this._layer  = leaflet.geoJson();
         this._layers = {};
+        this._element = element;
 
         this.addLayer(this._layer);
     },
@@ -58,7 +60,7 @@ export default leaflet.FeatureGroup.extend({
 
         var bounds = toOverpassBBoxString(this._map.getBounds());
         var query  = this.options.query.replace(/(BBOX)/g, bounds);
-        var url    = this.options.endpoint + 'interpreter?data=[out:json];' + query;
+        var url    = this.options.endpoint + 'interpreter?data=' + encodeURIComponent('[out:json];' + query);
 
         this._map.fire('dataloading', {layer: this});
 
@@ -74,11 +76,9 @@ export default leaflet.FeatureGroup.extend({
             this.removeLayer(this._layer);
             this._layer = layer;
 
-            if (this.options.boundsMode === 'extend' && layer.getBounds().isValid()) {
+            if (this.options.adjustBounds && layer.getBounds().isValid()) {
                 var bounds = this._map.getBounds();
-                bounds     = bounds.extend(layer.getBounds());
-
-                this._map.fitBounds(bounds, this._map.getBoundsOptions());
+                this._map.fitBounds(bounds.extend(layer.getBounds()));
             }
 
             this._map.fire('dataload', {layer: this});
@@ -88,8 +88,9 @@ export default leaflet.FeatureGroup.extend({
      * @param map
      */
     onAdd: function (map) {
-        // TODO: Make it configurable
-        map.on('moveend', this.refreshData, this);
+        if (this.options.dynamicLoad) {
+            map.on('moveend', this.refreshData, this);
+        }
 
         this.refreshData();
     },
@@ -103,20 +104,18 @@ export default leaflet.FeatureGroup.extend({
                 marker.setRadius(feature.properties.radius);
             }
 
-            // TODO: Icon handling
             if (feature.properties.icon) {
-                icon = this._map.getIcon(feature.properties.icon);
-
-            } else if (feature.properties.tags
-                && feature.properties.tags.amenity
-                && this.options.amenityIcons[feature.properties.tags.amenity]
-            ) {
-                //icon = L.contao.getIcon(this.options.amenityIcons[feature.properties.tags.amenity]);
+                icon = feature.properties.icon;
+            } else if (feature.properties.amenity) {
+                icon = this.options.amenityIcons[feature.properties.amenity] || undefined;
             }
 
-            // TODO: Icon handling
-            if (icon) {
-                marker.setIcon(icon);
+            if (icon && this._element.config.map.presets.icons[icon]) {
+                mapFactory.createIcon(
+                    this._element.config.map.presets.icons[icon],
+                    feature.properties,
+                    this._element
+                ).then(icon => marker.setIcon(icon));
             }
         }
 

package/js/layer/overpassLayerFactory.js

@@ -1,5 +1,5 @@
 import OverpassLayer from './OverpassLayer';
 
 export default async function (config, element) {
-    return new OverpassLayer(config.options);
+    return new OverpassLayer(config.options, element);
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@cowegis/client",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Cowegis web client",
   "main": "js/client.js",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/cowegis/cowegis-js-client.git"
+    "url": "git+https://github.com/cowegis/client.git"
   },
   "keywords": [
     "Cowegis",
@@ -16,9 +16,9 @@
   "author": "netzmacht David Molineus",
   "license": "LGPL-3.0-or-later",
   "bugs": {
-    "url": "https://github.com/cowegis/cowegis-js-client/issues"
+    "url": "https://github.com/cowegis/client/issues"
   },
-  "homepage": "https://github.com/cowegis/cowegis-js-client#readme",
+  "homepage": "https://github.com/cowegis/client#readme",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.1",
     "@fortawesome/free-brands-svg-icons": "^6.1",