neo.mjs 4.4.10 → 4.4.11

package/examples/component/wrapper/googleMaps/MainContainer.mjs

@@ -1,6 +1,7 @@
 import Button                  from '../../../../src/button/Base.mjs';
 import GoogleMapsComponent     from '../../../../src/component/wrapper/GoogleMaps.mjs';
 import MainContainerController from './MainContainerController.mjs';
+import NumberField             from '../../../../src/form/field/Number.mjs';
 import Toolbar                 from '../../../../src/toolbar/Base.mjs';
 import Viewport                from '../../../../src/container/Viewport.mjs';
 
@@ -34,8 +35,28 @@ class MainContainer extends Viewport {
             items : [{
                 module : Button,
                 handler: 'onFlyToButtonClick',
+                height : 27,
                 iconCls: 'fa-solid fa-plane',
                 text   : 'Fly to San Fran'
+            }, {
+                module              : NumberField,
+                clearToOriginalValue: true,
+                labelPosition       : 'inline',
+                labelText           : 'zoom',
+                listeners           : {change: 'onZoomFieldChange'},
+                minValue            : 0,
+                maxValue            : 10,
+                style               : {marginLeft: '10px'},
+                value               : 8,
+                width               : 100
+            }, {
+                module : Button,
+                handler: 'onRemoveMarkerButtonClick',
+                height : 27,
+                iconCls: 'fa-solid fa-trash',
+                mode   : 'hide',
+                style  : {marginLeft: '10px'},
+                text   : 'Hide marker'
             }]
         }]
     }}

package/examples/component/wrapper/googleMaps/MainContainerController.mjs

@@ -17,12 +17,40 @@ class MainContainerController extends ComponentController {
      * @param {Object} data
      */
     onFlyToButtonClick(data) {
-        // todo
-        /*this.getReference('google-maps-component').flyTo({
-            destination: [-122.4175, 37.655, 400],
-            heading    : 0.0,
-            pitch      : -15.0
-        });*/
+        this.getReference('google-maps-component').panTo({lat: 37.655, lng: -122.4175})
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onRemoveMarkerButtonClick(data) {
+        let button = data.component,
+            map    = this.getReference('google-maps-component');
+
+        if (button.mode === 'hide') {
+            button.set({
+                iconCls: 'fa fa-location-dot',
+                mode   : 'show',
+                text   : 'Show marker'
+            });
+
+            map.hideMarker('1')
+        } else {
+            button.set({
+                iconCls: 'fa-solid fa-trash',
+                mode   : 'hide',
+                text   : 'Hide marker'
+            });
+
+            map.showMarker('1')
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onZoomFieldChange(data) {
+        this.getReference('google-maps-component').zoom = data.value;
     }
 }
 

package/examples/component/wrapper/googleMaps/neo-config.json

@@ -2,6 +2,7 @@
     "appPath"         : "examples/component/wrapper/googleMaps/app.mjs",
     "basePath"        : "../../../../",
     "environment"     : "development",
+    "googleMapsApiKey": "AIzaSyCRj-EPE3H7PCzZtYCmDzln6sj7uPCGohA",
     "mainPath"        : "./Main.mjs",
     "mainThreadAddons": ["GoogleMaps", "Stylesheet"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.4.10",
+    "version": "4.4.11",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/src/DefaultConfig.mjs

@@ -52,6 +52,14 @@ const DefaultConfig = {
      * @type String
      */
     environment: 'dist/production',
+    /**
+     * In case you are using the GoogleMaps main thread addon, you can pass the API key here.
+     * @default ''
+     * @memberOf! module:Neo
+     * @name config.googleMapsApiKey
+     * @type String
+     */
+    googleMapsApiKey: '',
     /**
      * In case you are using the GoogleAnalytics main thread addon or useGoogleAnalytics: true,
      * you can change the gtag id here. Required for the online examples (gh pages)

package/src/component/wrapper/GoogleMaps.mjs

@@ -13,6 +13,16 @@ class GoogleMaps extends Base {
          * @protected
          */
         className: 'Neo.component.wrapper.GoogleMaps',
+        /**
+         * Specify lat & lng for the current focus position
+         * @member {Object} center_={lat: -34.397, lng: 150.644}
+         */
+        center_: {lat: -34.397, lng: 150.644},
+        /**
+         * false hides the default fullscreen control
+         * @member {Boolean} fullscreenControl=true
+         */
+        fullscreenControl: true,
         /**
          * Prefer to use markerStoreConfig instead.
          * @member {Neo.data.Store|Object} markerStore_
@@ -37,10 +47,24 @@ class GoogleMaps extends Base {
          */
         markerStoreConfig: null,
         /**
-         * @member {Object} _vdom
+         * null => the maximum zoom from the current map type is used instead
+         * @member {Number|null} maxZoom=null
+         */
+        maxZoom: null,
+        /**
+         null => the minimum zoom from the current map type is used instead
+         * @member {Number|null} minZoom=null
+         */
+        minZoom: null,
+        /**
+         * @member {Number} zoom_=8
          */
-        _vdom:
-        {}
+        zoom_: 8,
+        /**
+         * false hides the default zoom control
+         * @member {Boolean} zoomControl=true
+         */
+        zoomControl: true
     }}
 
     /**
@@ -51,7 +75,26 @@ class GoogleMaps extends Base {
      * @param {String} [data.title]
      */
     addMarker(data) {
-        Neo.main.addon.GoogleMaps.addMarker(data);
+        Neo.main.addon.GoogleMaps.addMarker({
+            appName: this.appName,
+            ...data
+        });
+    }
+
+    /**
+     * Triggered after the center config got changed
+     * @param {Object} value
+     * @param {Object} oldValue
+     * @protected
+     */
+    afterSetCenter(value, oldValue) {
+        if (oldValue !== undefined) {
+            Neo.main.addon.GoogleMaps.setCenter({
+                appName: this.appName,
+                id     : this.id,
+                value
+            })
+        }
     }
 
     /**
@@ -83,18 +126,21 @@ class GoogleMaps extends Base {
         let me = this;
 
         if (value === false && oldValue !== undefined) {
-            Neo.main.addon.GoogleMaps.destroy({
-                appName: me.appName,
-                id     : me.id
-            });
+            me.removeMap();
         }
 
         super.afterSetMounted(value, oldValue);
 
         if (value) {
             let opts = {
-                appName: me.appName,
-                id     : me.id
+                appName          : me.appName,
+                center           : me.center,
+                fullscreenControl: me.fullscreenControl,
+                id               : me.id,
+                maxZoom          : me.maxZoom,
+                minZoom          : me.minZoom,
+                zoom             : me.zoom,
+                zoomControl      : me.zoomControl
             };
 
             setTimeout(() => {
@@ -105,6 +151,22 @@ class GoogleMaps extends Base {
         }
     }
 
+    /**
+     * Triggered after the zoom config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetZoom(value, oldValue) {
+        if (oldValue !== undefined) {
+            Neo.main.addon.GoogleMaps.setZoom({
+                appName: this.appName,
+                id     : this.id,
+                value
+            })
+        }
+    }
+
     /**
      * Triggered before the markerStore config gets changed.
      * @param {Object} value
@@ -122,20 +184,26 @@ class GoogleMaps extends Base {
      * @param {Boolean} silent=false
      */
     destroy(updateParentVdom=false, silent=false) {
-        Neo.main.addon.GoogleMaps.removeMap({
-            mapId: this.id
-        });
-
+        this.removeMap();
         super.destroy(updateParentVdom, silent);
     }
 
     /**
-     *
+     * @param {String} id
      */
-    onComponentMounted() {
-        console.log('onComponentMounted', this.id);
+    hideMarker(id) {
+        Neo.main.addon.GoogleMaps.hideMarker({
+            appName: this.appName,
+            id,
+            mapId  : this.id
+        })
     }
 
+    /**
+     * Hook to use once the map instance got rendered
+     */
+    onComponentMounted() {}
+
     /**
      *
      */
@@ -144,11 +212,57 @@ class GoogleMaps extends Base {
 
         me.markerStore.items.forEach(item => {
             Neo.main.addon.GoogleMaps.addMarker({
-                mapId: me.id,
+                appName: me.appName,
+                mapId  : me.id,
                 ...item
             })
         })
     }
+
+    /**
+     * @param {Object} position
+     * @param {Number} position.lat
+     * @param {Number} position.lng
+     */
+    panTo(position) {
+        Neo.main.addon.GoogleMaps.panTo({
+            appName: this.appName,
+            mapId  : this.id,
+            position
+        })
+    }
+
+    /**
+     *
+     */
+    removeMap() {
+        Neo.main.addon.GoogleMaps.removeMap({
+            appName: this.appName,
+            mapId  : this.id
+        })
+    }
+
+    /**
+     * @param {String} id
+     */
+    removeMarker(id) {
+        Neo.main.addon.GoogleMaps.removeMarker({
+            appName: this.appName,
+            id,
+            mapId  : this.id
+        })
+    }
+
+    /**
+     * @param {String} id
+     */
+    showMarker(id) {
+        Neo.main.addon.GoogleMaps.showMarker({
+            appName: this.appName,
+            id,
+            mapId  : this.id
+        })
+    }
 }
 
 Neo.applyClassConfig(GoogleMaps);

package/src/main/addon/GoogleMaps.mjs

@@ -34,7 +34,13 @@ class GoogleMaps extends Base {
             app: [
                 'addMarker',
                 'create',
-                'removeMap'
+                'hideMarker',
+                'panTo',
+                'removeMap',
+                'removeMarker',
+                'setCenter',
+                'setZoom',
+                'showMarker'
             ]
         },
         /**
@@ -82,14 +88,24 @@ class GoogleMaps extends Base {
 
     /**
      * @param {Object} data
+     * @param {Object} data.center
+     * @param {Boolean} data.fullscreenControl
      * @param {String} data.id
+     * @param {Number} data.maxZoom
+     * @param {Number} data.minZoom
+     * @param {Number} data.zoom
+     * @param {Boolean} data.zoomControl
      */
     create(data) {
         let me = this;
 
         me.maps[data.id] = new google.maps.Map(DomAccess.getElement(data.id), {
-            center: { lat: -34.397, lng: 150.644 },
-            zoom: 8,
+            center           : data.center,
+            fullscreenControl: data.fullscreenControl,
+            maxZoom          : data.maxZoom,
+            minZoom          : data.minZoom,
+            zoom             : data.zoom,
+            zoomControl      : data.zoomControl
         });
 
         me.fire('mapCreated', data.id);
@@ -97,21 +113,80 @@ class GoogleMaps extends Base {
 
     /**
      * @param {Object} data
+     * @param {String} data.id
      * @param {String} data.mapId
      */
-    removeMap(data) {
-        delete this.maps[data.mapId];
-        delete this.markers[data.mapId];
+    hideMarker(data) {
+        this.markers[data.mapId][data.id].setMap(null);
     }
 
     /**
      * @protected
      */
     loadApi() {
-        DomAccess.loadScript('https://maps.googleapis.com/maps/api/js?key=AIzaSyCRj-EPE3H7PCzZtYCmDzln6sj7uPCGohA&v=weekly').then(() => {
+        let key = Neo.config.googleMapsApiKey;
+
+        DomAccess.loadScript(`https://maps.googleapis.com/maps/api/js?key=${key}&v=weekly`).then(() => {
             console.log('GoogleMaps API loaded');
         })
     }
+
+    /**
+     * @param data
+     * @param {String} data.mapId
+     * @param {Object} data.position
+     */
+    panTo(data) {
+        this.maps[data.mapId].panTo(data.position);
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.mapId
+     */
+    removeMap(data) {
+        delete this.maps[data.mapId];
+        delete this.markers[data.mapId];
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @param {String} data.mapId
+     */
+    removeMarker(data) {
+        let markers = this.markers[data.mapId];
+
+        markers[data.id].setMap(null);
+        delete markers[data.id];
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @param {Object} data.value
+     */
+    setCenter(data) {
+        this.maps[data.id].setCenter(data.value);
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @param {Number} data.value
+     */
+    setZoom(data) {
+        this.maps[data.id].setZoom(data.value);
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @param {String} data.mapId
+     */
+    showMarker(data) {
+        this.markers[data.mapId][data.id].setMap(this.maps[data.mapId]);
+    }
 }
 
 Neo.applyClassConfig(GoogleMaps);