neo.mjs 4.4.13 → 4.4.15

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

@@ -1,9 +1,9 @@
-import Button                  from '../../../../src/button/Base.mjs';
-import GoogleMapsComponent     from '../../../../src/component/wrapper/GoogleMaps.mjs';
+import Button                  from '../../../../node_modules/neo.mjs/src/button/Base.mjs';
+import NumberField             from '../../../../node_modules/neo.mjs/src/form/field/Number.mjs';
+import Toolbar                 from '../../../../node_modules/neo.mjs/src/toolbar/Base.mjs';
+import Viewport                from '../../../../node_modules/neo.mjs/src/container/Viewport.mjs';
+import MapComponent            from "./MapComponent.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';
 
 /**
  * @class Neo.examples.component.wrapper.googleMaps.MainContainer
@@ -17,25 +17,9 @@ class MainContainer extends Viewport {
         layout    : {ntype: 'vbox', align: 'stretch'},
 
         items: [{
-            module   : GoogleMapsComponent,
+            module   : MapComponent,
             flex     : 1,
-            reference: 'google-maps-component',
-
-            listeners: {
-                zoomChange: 'onMapZoomChance'
-            },
-
-            markerStoreConfig: {
-                data: [{
-                    id      : '1',
-                    position: {lat: -33.397, lng: 150.644},
-                    title   : 'Hello neo'
-                }, {
-                    id      : '2',
-                    position: {lat: -34.397, lng: 150.644},
-                    title   : 'Hello Max'
-                }]
-            }
+            reference: 'google-maps-component'
         }, {
             module: Toolbar,
             flex  : 'none',
@@ -46,6 +30,12 @@ class MainContainer extends Viewport {
                 height : 27,
                 iconCls: 'fa-solid fa-plane',
                 text   : 'Fly to San Fran'
+            }, {
+                module : Button,
+                handler: 'onFlyToIslandButtonClick',
+                height : 27,
+                iconCls: 'fa-solid fa-plane',
+                text   : 'Fly to Island'
             }, {
                 module              : NumberField,
                 clearToOriginalValue: true,
@@ -56,7 +46,7 @@ class MainContainer extends Viewport {
                 maxValue            : 10,
                 reference           : 'zoom-field',
                 style               : {marginLeft: '10px'},
-                value               : 8,
+                value               : 6,
                 width               : 100
             }, {
                 module : Button,
@@ -65,7 +55,7 @@ class MainContainer extends Viewport {
                 iconCls: 'fa-solid fa-trash',
                 mode   : 'hide',
                 style  : {marginLeft: '10px'},
-                text   : 'Hide marker 1'
+                text   : 'Hide marker'
             }]
         }]
     }}

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

@@ -1,4 +1,4 @@
-import ComponentController from '../../../../src/controller/Component.mjs';
+import ComponentController from '../../../../node_modules/neo.mjs/src/controller/Component.mjs';
 
 /**
  * @class Neo.examples.component.wrapper.googleMaps.MainContainerController
@@ -20,6 +20,13 @@ class MainContainerController extends ComponentController {
         this.getReference('google-maps-component').panTo({lat: 37.655, lng: -122.4175})
     }
 
+    /**
+     * @param {Object} data
+     */
+    onFlyToIslandButtonClick(data) {
+        this.getReference('google-maps-component').panTo({ lat: 64.963051,lng: -19.020835})
+    }
+
     /**
      * @param {Object} data
      */
@@ -38,18 +45,18 @@ class MainContainerController extends ComponentController {
             button.set({
                 iconCls: 'fa fa-location-dot',
                 mode   : 'show',
-                text   : 'Show marker 1'
+                text   : 'Show marker'
             });
 
-            map.hideMarker('1')
+            map.hideMarker('-13')
         } else {
             button.set({
                 iconCls: 'fa-solid fa-trash',
                 mode   : 'hide',
-                text   : 'Hide marker 1'
+                text   : 'Hide marker'
             });
 
-            map.showMarker('1')
+            map.showMarker('-13')
         }
     }
 

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

@@ -0,0 +1,168 @@
+import GoogleMapsComponent      from '../../../../node_modules/neo.mjs/src/component/wrapper/GoogleMaps.mjs';
+import MapComponentController   from "./MapComponentController.mjs";
+import MarkerPopup             from "./MarkerPopup.mjs";
+
+/**
+ * @class Neo.examples.component.wrapper.googleMaps.MapComponent
+ * @extends Neo.component.wrapper.GoogleMaps
+ */
+class MapComponent extends GoogleMapsComponent {
+    static getConfig() {return {
+        className: 'Neo.examples.component.wrapper.googleMaps.MapComponent',
+        ntype: 'worldmap',
+
+        controller: MapComponentController,
+
+        // Center the map initially to Island
+        center: {
+            lat: 64.963051,
+            lng: -19.020835
+        },
+
+        // Ensure only Island is visible
+        zoom: 6,
+
+        // Adding record to keep the original data
+        markerStore: {
+            model: {
+                fields: [{
+                    name: 'id',
+                    type: 'Number'
+                }, {
+                    name: 'icon',
+                    type: 'Object'
+                }, {
+                    name: 'position',
+                    type: 'Object'
+                }, {
+                    name: 'record',
+                    type: 'Object'
+                }, {
+                    name: 'title',
+                    type: 'String'
+                }]
+            }
+        },
+
+        onMarkerClick(data) {
+            let me = this,
+                record = data.record.record,
+                event = data.event;
+
+            me.disabled = true;
+
+            me.dialog = Neo.create(MarkerPopup, {
+                appName             : me.appName,
+                record              : record,
+                domEvent            : data.domEvent,
+                boundaryContainerId : me.id
+            });
+        },
+
+        // todo Not working
+        // listeners: {
+        //     zoomChange: 'onMapZoomChance'
+        // }
+    }}
+
+    construct(config) {
+        super.construct(config);
+
+        this.fetchData();
+    }
+
+    /**
+     * Ajax request to get the Marker Data
+     */
+    fetchData() {
+        let me  = this,
+            url = '../../../../examples/component/wrapper/googleMaps/earthquakes.json',
+            callbackFn = me.createMarkersAndAddToMarkerStore.bind(me);
+
+        fetch(url)
+            .then(response => response.json())
+            .catch(err => console.log("Can't access  + url, err"))
+            .then(data => callbackFn(data));
+    }
+
+    /**
+     * Create Marker records from the Server result and
+     * push all Markers to the MarkerStore
+     *
+     * @param {Object} data     from earthquake.json
+     */
+    createMarkersAndAddToMarkerStore (data) {
+        let me = this;
+
+        const markers = data.results.map(function(record) {
+            const date = new Date(record.timestamp),
+                // DATE
+                day = date.toLocaleDateString('en-US', { day: 'numeric' }),
+                month = date.toLocaleDateString('en-US', { month: 'short' }),
+                year = date.toLocaleDateString('en-US', { year: 'numeric' }),
+                hour = date.toLocaleTimeString('en-US', { hour: 'numeric', hour12: true }),
+                minute = date.toLocaleTimeString('en-US', { minute: 'numeric' }),
+                // ICON
+                icon = me.getIcon(undefined, undefined, record.size);
+
+            // Create a single Marker
+            return {
+                position: {
+                    lat: record.latitude,
+                    lng: record.longitude
+                },
+                title: `${day}, ${month} ${year}\n[${hour}:${minute}] ${record.humanReadableLocation}`,
+                record: record,
+                icon: icon
+            }
+        });
+
+        // Add to MarkerStore
+        me.markerStore.add(markers);
+    }
+
+    /**
+     * google.maps.SymbolPaths are not available in the worker.
+     * Therefore we are solving it here
+     *
+     * @param {String} symbol
+     * @returns {Number}
+     */
+    getType(symbol) {
+        // google.maps.SymbolPath...
+        const symbolPaths = {
+            "CIRCLE": 0,
+            "FORWARD_CLOSED_ARROW": 1,
+            "FORWARD_OPEN_ARROW": 2,
+            "BACKWARD_CLOSED_ARROW": 3,
+            "BACKWARD_OPEN_ARROW": 4
+        }
+
+        return symbolPaths[symbol]
+    }
+
+    /**
+     * Create an icon based on color, symbol and size
+     *
+     * @param {String} [color=red]
+     * @param {'CIRCLE' | 'FORWARD_CLOSED_ARROW' | 'FORWARD_OPEN_ARROW' | 'BACKWARD_CLOSED_ARROW' | 'BACKWARD_OPEN_ARROW'} [symbol=CIRCLE]
+     * @param {Number} [scaleMultiplier=1]
+     * @returns {{fillColor: string, path: Number, fillOpacity: number, strokeWeight: number, scale: number, strokeColor: string}}
+     */
+    getIcon(color='red', symbol = 'CIRCLE', scaleMultiplier = 1) {
+        const path = this.getType(symbol);
+
+        return {
+            path: path,
+            scale: 10 * scaleMultiplier,
+            strokeColor: `dark${color}`,
+            strokeWeight: 2,
+            fillColor: color,
+            fillOpacity: 1.0
+        }
+    }
+}
+
+Neo.applyClassConfig(MapComponent);
+
+export default MapComponent;

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

@@ -0,0 +1,26 @@
+import ComponentController from '../../../../node_modules/neo.mjs/src/controller/Component.mjs';
+
+/**
+ * @class Neo.examples.component.wrapper.googleMaps.MainContainerController
+ * @extends Neo.controller.Component
+ */
+class MapComponentController extends ComponentController {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.component.wrapper.googleMaps.MapComponentController'
+         * @protected
+         */
+        className: 'Neo.examples.component.wrapper.googleMaps.MapComponentController'
+    }}
+
+    /**
+     * @param {Object} data
+     */
+    onMapZoomChance(data) {
+        this.getReference('zoom-field').value = data.value;
+    }
+}
+
+Neo.applyClassConfig(MapComponentController);
+
+export default MapComponentController;

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

@@ -0,0 +1,113 @@
+import DialogBase from '../../../../node_modules/neo.mjs/src/dialog/Base.mjs';
+
+/**
+ * @class Neo.examples.component.wrapper.googleMaps.MarkerPopup
+ * @extends Neo.container.Base
+ */
+class MarkerPopup extends DialogBase {
+    static getConfig() {return {
+        className: 'Neo.examples.component.wrapper.googleMaps.MarkerPopup',
+
+        // turn off dragging and resizing
+        draggable           : false,
+        resizable           : false,
+
+        // custom property
+        record_: null,
+
+        containerConfig: {style: {padding: '10px'}},
+        headerConfig: {actions: ['close']},
+        // custom config used to align the popup
+        offsetConfig: {x: -15,y: -15},
+
+        items: [{
+            ntype: 'component',
+            cls: ['detail-container'],
+            vdom: {/* here goes the itemTpl */}
+        }],
+
+        itemTpl: data => [{
+            cls: 'detail-depth',
+            innerHTML: `Depth: ${data.depth}`
+        }, {
+            cls: 'detail-date',
+            innerHTML: `${data.visualDate}`
+        }, {
+            cls: 'detail-quality',
+            innerHTML: `Quality: ${data.quality}`
+        }, {
+            cls: 'detail-quality',
+            innerHTML: `Size: ${data.size}`
+        }]
+    }}
+
+    /**
+     * Update the view based on the data
+     * @param value
+     * @param oldValue
+     *
+     * @example
+     *      depth: 11.9
+     *      humanReadableLocation: "19,9 km N af Sigöldustöð"
+     *      latitude: 64.35
+     *      longitude : -19.173
+     *      quality: 53.79
+     *      size: 0.9
+     *      timestamp: "2017-10-11T18:34:56.000Z"
+     */
+    afterSetRecord(value, oldValue) {
+        let me = this,
+            outputContainer = me.items[0],
+            vdom = outputContainer.vdom;
+
+        value.visualDate = me.calcVisualDate(value.timestamp);
+
+        me.title = `${value.humanReadableLocation}$ | ${value.size}`;
+        vdom.cn = me.itemTpl(value);
+    }
+
+    calcVisualDate(dateString) {
+        const date = new Date(dateString),
+            day = date.toLocaleDateString('en-US', { day: 'numeric' }),
+            month = date.toLocaleDateString('en-US', { month: 'short' }),
+            year = date.toLocaleDateString('en-US', { year: 'numeric' }),
+            hour = date.toLocaleTimeString('en-US', { hour: 'numeric', hour12: false }),
+            minute = date.toLocaleTimeString('en-US', { minute: 'numeric' });
+
+        return `${day}.${month}.<b>${year}</b> ${hour}:${minute}`
+    }
+
+    async onRender(data, automount) {
+        super.onRender(data, automount)
+
+        let me = this;
+
+        /**
+         * Center on Map
+         */
+        // let futureParent = Neo.getComponent(me.boundaryContainerId),
+        //     futureParentRect = await futureParent.getDomRect(),
+        //     rect = await me.getDomRect();
+        //
+        // me.wrapperStyle = {
+        //     top: (futureParentRect.top + (futureParentRect.height - rect.height) / 2) + 'px',
+        //     left: (futureParentRect.left + (futureParentRect.width - rect.width) / 2) + 'px',
+        //     height: me.height,
+        //     width: me.width
+        // }
+
+        /**
+         * Add to click position
+         */
+        me.wrapperStyle = {
+            top: me.domEvent.clientY + me.offsetConfig.y + 'px',
+            left: me.domEvent.clientX + me.offsetConfig.x + 'px',
+            height: me.height,
+            width: me.width
+        }
+    }
+}
+
+Neo.applyClassConfig(MarkerPopup);
+
+export default MarkerPopup;

package/examples/component/wrapper/googleMaps/earthquakes.json

@@ -0,0 +1,463 @@
+{
+   "results":[
+      {
+         "timestamp":"2017-10-13T12:07:24.000Z",
+         "latitude":63.976,
+         "longitude":-21.949,
+         "depth":1.1,
+         "size":0.6,
+         "quality":58.73,
+         "humanReadableLocation":"6,1 km SV af Helgafelli"
+      },
+      {
+         "timestamp":"2017-10-13T09:50:50.000Z",
+         "latitude":65.124,
+         "longitude":-16.288,
+         "depth":7.2,
+         "size":0.9,
+         "quality":78.51,
+         "humanReadableLocation":"6,1 km NA af Herðubreiðartöglum"
+      },
+      {
+         "timestamp":"2017-10-13T09:41:09.000Z",
+         "latitude":63.945,
+         "longitude":-21.143,
+         "depth":7.4,
+         "size":0.2,
+         "quality":33.12,
+         "humanReadableLocation":"6,5 km SSA af Hveragerði"
+      },
+      {
+         "timestamp":"2017-10-13T09:37:45.000Z",
+         "latitude":65.114,
+         "longitude":-16.3,
+         "depth":6.3,
+         "size":1.2,
+         "quality":90.01,
+         "humanReadableLocation":"5,0 km NA af Herðubreiðartöglum"
+      },
+      {
+         "timestamp":"2017-10-13T09:37:21.000Z",
+         "latitude":65.113,
+         "longitude":-16.301,
+         "depth":5.9,
+         "size":1.4,
+         "quality":90.01,
+         "humanReadableLocation":"4,9 km NA af Herðubreiðartöglum"
+      },
+      {
+         "timestamp":"2017-10-13T07:51:29.000Z",
+         "latitude":65.182,
+         "longitude":-16.358,
+         "depth":5,
+         "size":0.7,
+         "quality":39.63,
+         "humanReadableLocation":"1,0 km NNV af Herðubreið"
+      },
+      {
+         "timestamp":"2017-10-13T07:49:40.000Z",
+         "latitude":65.165,
+         "longitude":-16.354,
+         "depth":13.7,
+         "size":1.2,
+         "quality":90.01,
+         "humanReadableLocation":"1,0 km SSV af Herðubreið"
+      },
+      {
+         "timestamp":"2017-10-13T07:22:49.000Z",
+         "latitude":64.012,
+         "longitude":-20.58,
+         "depth":6,
+         "size":0.3,
+         "quality":63.77,
+         "humanReadableLocation":"4,6 km A af Hestfjalli"
+      },
+      {
+         "timestamp":"2017-10-13T07:05:44.000Z",
+         "latitude":66.534,
+         "longitude":-18.013,
+         "depth":6.3,
+         "size":1.2,
+         "quality":42.6,
+         "humanReadableLocation":"0,8 km S af Grímsey"
+      },
+      {
+         "timestamp":"2017-10-13T06:41:34.000Z",
+         "latitude":63.954,
+         "longitude":-21.255,
+         "depth":7.4,
+         "size":0.9,
+         "quality":57.5,
+         "humanReadableLocation":"5,4 km SA af Skálafelli á Hellisheiði"
+      },
+      {
+         "timestamp":"2017-10-13T06:23:10.000Z",
+         "latitude":64.659,
+         "longitude":-17.533,
+         "depth":4.3,
+         "size":1.2,
+         "quality":90.01,
+         "humanReadableLocation":"2,1 km N af Bárðarbungu"
+      },
+      {
+         "timestamp":"2017-10-13T05:33:43.000Z",
+         "latitude":64.022,
+         "longitude":-16.613,
+         "depth":1.1,
+         "size":1.1,
+         "quality":48.2,
+         "humanReadableLocation":"3,4 km ANA af Hvannadalshnjúk"
+      },
+      {
+         "timestamp":"2017-10-13T05:18:22.000Z",
+         "latitude":64.621,
+         "longitude":-17.348,
+         "depth":1.1,
+         "size":2.4,
+         "quality":90.15,
+         "humanReadableLocation":"8,8 km ASA af Bárðarbungu"
+      },
+      {
+         "timestamp":"2017-10-13T04:05:44.000Z",
+         "latitude":65.708,
+         "longitude":-16.833,
+         "depth":2.9,
+         "size":0.3,
+         "quality":38.43,
+         "humanReadableLocation":"3,6 km V af Kröfluvirkjun"
+      },
+      {
+         "timestamp":"2017-10-13T03:46:36.000Z",
+         "latitude":65.712,
+         "longitude":-16.817,
+         "depth":2.9,
+         "size":1.1,
+         "quality":90.01,
+         "humanReadableLocation":"2,8 km V af Kröfluvirkjun"
+      },
+      {
+         "timestamp":"2017-10-13T02:56:40.000Z",
+         "latitude":63.972,
+         "longitude":-21.56,
+         "depth":10.1,
+         "size":0.5,
+         "quality":64.38,
+         "humanReadableLocation":"4,5 km ASA af Bláfjallaskála"
+      },
+      {
+         "timestamp":"2017-10-13T02:12:22.000Z",
+         "latitude":65.215,
+         "longitude":-16.363,
+         "depth":10.2,
+         "size":1.4,
+         "quality":90.02,
+         "humanReadableLocation":"4,6 km N af Herðubreið"
+      },
+      {
+         "timestamp":"2017-10-13T01:39:43.000Z",
+         "latitude":65.216,
+         "longitude":-16.349,
+         "depth":5.8,
+         "size":1.1,
+         "quality":90.01,
+         "humanReadableLocation":"4,6 km N af Herðubreið"
+      },
+      {
+         "timestamp":"2017-10-13T01:38:32.000Z",
+         "latitude":65.215,
+         "longitude":-16.358,
+         "depth":6.3,
+         "size":1.1,
+         "quality":90.02,
+         "humanReadableLocation":"4,6 km N af Herðubreið"
+      },
+      {
+         "timestamp":"2017-10-13T00:22:11.000Z",
+         "latitude":64.669,
+         "longitude":-17.38,
+         "depth":1.1,
+         "size":2.7,
+         "quality":90.14,
+         "humanReadableLocation":"7,7 km ANA af Bárðarbungu"
+      },
+      {
+         "timestamp":"2017-10-13T00:01:12.000Z",
+         "latitude":64.632,
+         "longitude":-20.636,
+         "depth":1.7,
+         "size":1.5,
+         "quality":64.89,
+         "humanReadableLocation":"13,4 km ASA af Húsafelli"
+      },
+      {
+         "timestamp":"2017-10-12T20:08:36.000Z",
+         "latitude":64.673,
+         "longitude":-17.541,
+         "depth":3.1,
+         "size":0.9,
+         "quality":30.43,
+         "humanReadableLocation":"3,7 km N af Bárðarbungu"
+      },
+      {
+         "timestamp":"2017-10-12T20:01:04.000Z",
+         "latitude":63.925,
+         "longitude":-20.163,
+         "depth":8.2,
+         "size":1.1,
+         "quality":90.01,
+         "humanReadableLocation":"13,7 km SSA af Árnesi"
+      },
+      {
+         "timestamp":"2017-10-12T17:49:38.000Z",
+         "latitude":63.613,
+         "longitude":-19.308,
+         "depth":4.9,
+         "size":0.8,
+         "quality":30.83,
+         "humanReadableLocation":"4,1 km SV af Goðabungu"
+      },
+      {
+         "timestamp":"2017-10-12T14:48:47.000Z",
+         "latitude":63.818,
+         "longitude":-20.659,
+         "depth":8.1,
+         "size":1.8,
+         "quality":49.76,
+         "humanReadableLocation":"12,6 km S af Þjórsárbrú"
+      },
+      {
+         "timestamp":"2017-10-12T14:47:07.000Z",
+         "latitude":63.672,
+         "longitude":-19.674,
+         "depth":1.3,
+         "size":2,
+         "quality":45.93,
+         "humanReadableLocation":"9,5 km V af Básum"
+      },
+      {
+         "timestamp":"2017-10-12T14:27:55.000Z",
+         "latitude":64.354,
+         "longitude":-20.674,
+         "depth":3.3,
+         "size":1.2,
+         "quality":90.01,
+         "humanReadableLocation":"6,8 km SSA af Skjaldbreið"
+      },
+      {
+         "timestamp":"2017-10-12T13:27:11.000Z",
+         "latitude":65.229,
+         "longitude":-16.357,
+         "depth":12.8,
+         "size":0.5,
+         "quality":32.22,
+         "humanReadableLocation":"6,1 km N af Herðubreið"
+      },
+      {
+         "timestamp":"2017-10-12T12:48:05.000Z",
+         "latitude":65.024,
+         "longitude":-16.677,
+         "depth":5.2,
+         "size":1.5,
+         "quality":41.19,
+         "humanReadableLocation":"3,7 km VSV af Dreka"
+      },
+      {
+         "timestamp":"2017-10-12T12:47:38.000Z",
+         "latitude":65.018,
+         "longitude":-16.672,
+         "depth":4.4,
+         "size":1,
+         "quality":44.51,
+         "humanReadableLocation":"3,9 km SV af Dreka"
+      },
+      {
+         "timestamp":"2017-10-12T12:46:20.000Z",
+         "latitude":65.036,
+         "longitude":-16.691,
+         "depth":2.3,
+         "size":0.6,
+         "quality":47.96,
+         "humanReadableLocation":"4,1 km V af Dreka"
+      },
+      {
+         "timestamp":"2017-10-12T11:45:39.000Z",
+         "latitude":63.513,
+         "longitude":-19.268,
+         "depth":1.1,
+         "size":1.3,
+         "quality":90.01,
+         "humanReadableLocation":"11,2 km SV af Hábungu"
+      },
+      {
+         "timestamp":"2017-10-12T11:40:49.000Z",
+         "latitude":63.628,
+         "longitude":-19.072,
+         "depth":1.1,
+         "size":-0.1,
+         "quality":44.18,
+         "humanReadableLocation":"5,5 km NNA af Hábungu"
+      },
+      {
+         "timestamp":"2017-10-12T08:25:28.000Z",
+         "latitude":63.618,
+         "longitude":-19.102,
+         "depth":0.6,
+         "size":0,
+         "quality":79.03,
+         "humanReadableLocation":"4,2 km N af Hábungu"
+      },
+      {
+         "timestamp":"2017-10-12T08:21:54.000Z",
+         "latitude":63.618,
+         "longitude":-19.094,
+         "depth":1.1,
+         "size":-0.5,
+         "quality":48.38,
+         "humanReadableLocation":"4,2 km N af Hábungu"
+      },
+      {
+         "timestamp":"2017-10-12T06:38:38.000Z",
+         "latitude":65.168,
+         "longitude":-16.417,
+         "depth":7.6,
+         "size":1.2,
+         "quality":68.29,
+         "humanReadableLocation":"3,3 km VSV af Herðubreið"
+      },
+      {
+         "timestamp":"2017-10-12T04:17:38.000Z",
+         "latitude":64.033,
+         "longitude":-21.221,
+         "depth":6.4,
+         "size":0.4,
+         "quality":85.02,
+         "humanReadableLocation":"4,0 km NNV af Hveragerði"
+      },
+      {
+         "timestamp":"2017-10-12T04:00:31.000Z",
+         "latitude":63.804,
+         "longitude":-22.793,
+         "depth":6.7,
+         "size":2.2,
+         "quality":90.02,
+         "humanReadableLocation":"4,3 km V af Reykjanestá"
+      },
+      {
+         "timestamp":"2017-10-12T03:19:07.000Z",
+         "latitude":64.014,
+         "longitude":-16.603,
+         "depth":1.2,
+         "size":0.9,
+         "quality":43.19,
+         "humanReadableLocation":"3,8 km A af Hvannadalshnjúk"
+      },
+      {
+         "timestamp":"2017-10-12T02:05:45.000Z",
+         "latitude":63.919,
+         "longitude":-21.719,
+         "depth":2.9,
+         "size":1,
+         "quality":90.01,
+         "humanReadableLocation":"8,0 km SSV af Bláfjallaskála"
+      },
+      {
+         "timestamp":"2017-10-12T01:50:54.000Z",
+         "latitude":63.798,
+         "longitude":-22.793,
+         "depth":6.6,
+         "size":1.4,
+         "quality":90.01,
+         "humanReadableLocation":"4,3 km V af Reykjanestá"
+      },
+      {
+         "timestamp":"2017-10-12T01:15:10.000Z",
+         "latitude":63.635,
+         "longitude":-19.142,
+         "depth":1.1,
+         "size":2,
+         "quality":90.01,
+         "humanReadableLocation":"5,4 km A af Goðabungu"
+      },
+      {
+         "timestamp":"2017-10-12T00:14:48.000Z",
+         "latitude":63.674,
+         "longitude":-19.125,
+         "depth":4.1,
+         "size":0.2,
+         "quality":34.25,
+         "humanReadableLocation":"7,2 km ANA af Goðabungu"
+      },
+      {
+         "timestamp":"2017-10-11T22:40:01.000Z",
+         "latitude":66.251,
+         "longitude":-16.709,
+         "depth":4.4,
+         "size":1,
+         "quality":34.97,
+         "humanReadableLocation":"12,8 km VSV af Kópaskeri"
+      },
+      {
+         "timestamp":"2017-10-11T21:09:29.000Z",
+         "latitude":66.283,
+         "longitude":-16.751,
+         "depth":5.6,
+         "size":1.1,
+         "quality":55.62,
+         "humanReadableLocation":"13,5 km V af Kópaskeri"
+      },
+      {
+         "timestamp":"2017-10-11T21:08:48.000Z",
+         "latitude":66.282,
+         "longitude":-16.743,
+         "depth":4.5,
+         "size":1.1,
+         "quality":80.86,
+         "humanReadableLocation":"13,2 km V af Kópaskeri"
+      },
+      {
+         "timestamp":"2017-10-11T19:21:13.000Z",
+         "latitude":66.559,
+         "longitude":-18.052,
+         "depth":9.1,
+         "size":2.8,
+         "quality":90.03,
+         "humanReadableLocation":"2,7 km NV af Grímsey"
+      },
+      {
+         "timestamp":"2017-10-11T18:34:56.000Z",
+         "latitude":64.35,
+         "longitude":-19.173,
+         "depth":11.9,
+         "size":0.9,
+         "quality":53.79,
+         "humanReadableLocation":"19,9 km N af Sigöldustöð"
+      },
+      {
+         "timestamp":"2017-10-11T17:28:01.000Z",
+         "latitude":64.794,
+         "longitude":-16.906,
+         "depth":2.8,
+         "size":0.9,
+         "quality":36.64,
+         "humanReadableLocation":"14,4 km A af Kistufelli"
+      },
+      {
+         "timestamp":"2017-10-11T14:34:29.000Z",
+         "latitude":65.234,
+         "longitude":-16.33,
+         "depth":6.2,
+         "size":0.9,
+         "quality":42.59,
+         "humanReadableLocation":"6,6 km NV af Herðubreiðarlindum"
+      },
+      {
+         "timestamp":"2017-10-11T14:16:22.000Z",
+         "latitude":64.662,
+         "longitude":-17.082,
+         "depth":2.3,
+         "size":0.7,
+         "quality":39.3,
+         "humanReadableLocation":"14,5 km SSA af Kistufelli"
+      }
+   ]
+}

package/examples/model/inline/MainContainer.mjs

@@ -70,7 +70,7 @@ class MainContainer extends Viewport {
                     iconCls: 'fa fa-home',
 
                     bind: {
-                        text: data => `${data.button1Text}`
+                        text: data => data.button1Text
                     }
                 }, {
                     handler: 'onButton2Click',
@@ -91,11 +91,7 @@ class MainContainer extends Viewport {
                 width     : 300,
 
                 bind: {
-                    value: data => `${data.button1Text}`
-                },
-
-                listeners: {
-                    change: 'onTextField1Change'
+                    value: {twoWay: true, value: data => data.button1Text}
                 }
             }, {
                 module    : TextField,

package/package.json

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

package/src/button/Base.mjs

@@ -104,9 +104,9 @@ class Base extends Component {
         route_: null,
         /**
          * The text displayed on the button [optional]
-         * @member {String} text_=''
+         * @member {String|null} text_=null
          */
-        text_: '',
+        text_: null,
         /**
          * Transforms the button tag into an a tag [optional]
          * @member {String|null} url_=null
@@ -271,8 +271,8 @@ class Base extends Component {
 
     /**
      * Triggered after the text config got changed
-     * @param {String} value
-     * @param {String} oldValue
+     * @param {String|null} value
+     * @param {String|null} oldValue
      * @protected
      */
     afterSetText(value, oldValue) {
@@ -280,7 +280,7 @@ class Base extends Component {
             vdomRoot = me.getVdomRoot(),
             textNode = vdomRoot.cn[1];
 
-        if (value === '') {
+        if (!value || value === '') {
             NeoArray.add(me._cls,      'no-text');
             NeoArray.add(vdomRoot.cls, 'no-text');
             textNode.removeDom = true;

package/src/component/Base.mjs

@@ -425,9 +425,11 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetConfig(key, value, oldValue) {
-        if (Neo.currentWorker.isUsingViewModels) {
-            if (this.bind?.[key]?.twoWay) {
-                this.getModel()?.setData(key, value);
+        if (Neo.currentWorker.isUsingViewModels && oldValue !== undefined) {
+            let binding = this.bind?.[key];
+
+            if (binding?.twoWay) {
+                this.getModel()?.setData(binding.key, value);
             }
         }
     }

package/src/component/wrapper/GoogleMaps.mjs

@@ -44,6 +44,11 @@ class GoogleMaps extends Base {
          */
         className: 'Neo.component.wrapper.GoogleMaps',
         /**
+         * @member {String} ntype='googlemaps'
+         * @protected
+         */
+        ntype: 'googlemaps',
+            /**
          * Specify lat & lng for the current focus position
          * @member {Object} center_={lat: -34.397, lng: 150.644}
          */
@@ -58,6 +63,9 @@ class GoogleMaps extends Base {
                 fields: [{
                     name: 'id',
                     type: 'String'
+                }, {
+                    name: 'icon',
+                    type: 'Object'
                 }, {
                     name: 'position',
                     type: 'Object'
@@ -285,11 +293,13 @@ class GoogleMaps extends Base {
         let me     = this,
             record = me.markerStore.get(data.id);
 
-        me.onMarkerClick(record);
+        data.record = record;
+
+        me.onMarkerClick(data);
 
         me.fire('markerClick', {
             id: me.id,
-            record
+            data
         })
     }
 

package/src/main/addon/GoogleMaps.mjs

@@ -164,13 +164,13 @@ class GoogleMaps extends Base {
      * @param {Object} event.domEvent
      */
     onMarkerClick(marker, event) {
-        // in theory, we could parse and pass the entire DOM event.
-        // feel free to open a feature request ticket, in case you need more data into the app worker.
+        let transformedEvent = DomEvents.getMouseEventData(event.domEvent);
 
         DomEvents.sendMessageToApp({
             id  : marker.neoId,
             path: [{cls: [], id: marker.neoMapId}],
-            type: 'googleMarkerClick'
+            type: 'googleMarkerClick',
+            domEvent: transformedEvent
         })
     }
 

package/src/manager/Component.mjs

@@ -26,6 +26,7 @@ class Component extends Base {
     construct(config) {
         super.construct(config);
         Neo.getComponent = this.getById.bind(this); // alias
+        Neo.first = this.getFirst.bind(this); // alias
     }
 
     /**
@@ -61,7 +62,9 @@ class Component extends Base {
         configLength = configArray.length;
 
         configArray.forEach(([key, value]) => {
-            if (component[key] === value) {
+            if ((component[key] === value)
+                || (key === 'ntype' && me.hasPrototypePropertyValue(component, key, value)))
+            {
                 matchArray.push(true);
             }
         });
@@ -144,6 +147,88 @@ class Component extends Base {
 
         return childComponents;
     }
+    
+    /**
+     * !! For debugging purposes only !!
+     *
+     * Get the first component based on the nytpe or other properties
+     *
+     * @param {String|Object|Array} componentDescription
+     * @returns {Neo.component.Base|null|Neo.component.Base[]}
+     *
+     * @example
+            // as String: ntype[comma separated propterties]
+            Neo.first('toolbar button[text=Try me,icon=people]')
+            // as Object: Add properties. ntype is optional
+            Neo.first({
+                icon: 'people'
+            })
+            // as Array: An Array of Objects. No Strings allowed
+            Neo.first([{
+                ntype: 'toolbar'
+            },{
+                ntype: 'button', text: 'Try me', icon: 'people
+            }])
+
+     * The returnFirstMatch flag allows to return all items and
+     * not stop after the first result.
+     *
+     * @example
+            Neo.first('button', false) // => [Button, Button, Button]
+     */
+    getFirst(componentDescription, returnFirstMatch = true) {
+        let objects = [],
+            app = Neo.apps[Object.keys(Neo.apps)[0]],
+            root = app.mainView;
+
+        /* create an array of objects from string */
+        if(Neo.isString(componentDescription)) {
+            const regex = /(\w*)(\[[^\]]*\])|(\w*)/g;
+            let match;
+
+            /* generate objects which contain the information */
+            while (match = regex.exec(componentDescription)) {
+                let [, ntype, pairs, ntypeOnly] = match, obj;
+
+                ntype = ntype || ntypeOnly;
+                obj = {ntype};
+
+                if(pairs) {
+                    const pairsRegex = /\[(.*?)\]/,
+                        pairsMatch = pairs.match(pairsRegex);
+
+                    if(pairsMatch) {
+                        const pairs = pairsMatch[1].split(',');
+                        pairs.forEach((pair) => {
+                            const [key, value] = pair.split('=');
+                            obj[key] = value.replace(/"/g, '');
+                        });
+                    }
+                }
+                objects.push(obj);
+
+                regex.lastIndex++;
+            }
+        } else if (Neo.isObject(componentDescription)){
+            objects.push(componentDescription);
+        } else if (Neo.isArray(componentDescription)) {
+            objects = componentDescription;
+        }
+
+        /* find the correct child using down() */
+        const result = objects.reduce((acc, key) => {
+            if(acc) {
+                let child = acc.down(key, returnFirstMatch);
+
+                if(!!child) {
+                    return child;
+                }
+            }
+            return null;
+        }, root);
+
+        return result
+    }
 
     /**
      * Returns an Array containing the ids of all parent components for a given component
@@ -205,6 +290,25 @@ class Component extends Base {
 
         return parents;
     }
+    
+    /**
+     * Check if the component had a property of any value somewhere in the Prototype chain
+     * 
+     * @param {Neo.component.Base} component
+     * @param {String} property
+     * @param {*} value
+     * @returns {boolean}
+     */
+    hasPrototypePropertyValue(component, property, value) {
+        while (component !== null) {
+            if (component.hasOwnProperty(property) && component[property] === value) {
+                return true;
+            }
+            component = component.__proto__;
+        }
+
+        return false;
+    }
 
     /**
      * Returns the first component which matches the config-selector.

package/src/model/Component.mjs

@@ -564,6 +564,7 @@ class Component extends Base {
 
             Object.entries(component.bind).forEach(([key, value]) => {
                 if (Neo.isObject(value)) {
+                    value.key = me.getFormatterVariables(value.value)[0];
                     value = value.value;
                 }