@lowdefy/blocks-google-maps 4.0.0-rc.4 → 4.0.0-rc.6

package/README.md

@@ -7,6 +7,7 @@ To use this block, define a [@googlemaps/react-wrapper](https://www.npmjs.com/pa
 - [Map](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions)
 - [Heatmap](https://developers.google.com/maps/documentation/javascript/reference/visualization#HeatmapLayerOptions)
 - [Markers](https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions)
+- [Marker Clusterers](https://developers.google.com/maps/documentation/javascript/marker-clustering)
 
 ### Properties
 
@@ -22,12 +23,39 @@ To use this block, define a [@googlemaps/react-wrapper](https://www.npmjs.com/pa
 - `markers: markerOptions[]`: A list of Markers with marker options, see more [Javascript API Markers](https://developers.google.com/maps/documentation/javascript/markers).
   - `position: { lat: number, lng: number }`: Position of marker on map.
   - `label: string`: Label displayed on marker.
+- `markerClusterers: markerClustererOptions[]`: A list of MarkerClusterers with marker clusterer options.
+  - `markers: markerOptions[]`: A list of Markers with marker options, see more [Javascript API Markers](https://developers.google.com/maps/documentation/javascript/markers).
+    - `position: { lat: number, lng: number }`: Position of marker on map.
+    - `label: string`: Label displayed on marker.
+  - `options: markerClustererOptions`: All other [marker clusterer options](https://react-google-maps-api-docs.netlify.app/#markerclusterer).
 - `infoWindow: infoWindowOptions`: All infoWindow options, see [infoWindow options](https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindowOptions).
   - `position: { lat: number, lng: number }`: Position of infoWindow on map.
   - `visible: boolean`: When visible is true, blocks inside infoWindow content area will be rendered.
 
 ### Events
 
+- `onBoundsChanged`: Trigger onBoundsChanged actions when the bounds of the map are changed, returns `_event`
+object:
+  - `bounds`:
+    - `east`: latitudinal coordinate
+    - `north`: longitudinal coordinate
+    - `south`: longitudinal coordinate
+    - `west`: latitudinal coordinate
+  - `center`:
+    - `lat`: latitudinal coordinate
+    - `lng`: longitudinal coordinate
+  - `zoom`: zoom level
+- `onCenterChanged`: Trigger onCenterChanged actions when the center of the map is changed, returns `_event`
+object:
+  - `bounds`:
+    - `east`: latitudinal coordinate
+    - `north`: longitudinal coordinate
+    - `south`: longitudinal coordinate
+    - `west`: latitudinal coordinate
+  - `center`:
+    - `lat`: latitudinal coordinate
+    - `lng`: longitudinal coordinate
+  - `zoom`: zoom level
 - `onClick`: Trigger onClick actions when the map is clicked, returns `_event` object:
   - `domEvent`: event object
   - `latLng`:
@@ -36,7 +64,9 @@ To use this block, define a [@googlemaps/react-wrapper](https://www.npmjs.com/pa
   - `pixel`:
     - `x`: x position on map block
     - `y`: y position on map block
-- `onClickMarker`: Trigger onClickMarker actions when a marker is clicked, returns `_event` object:
+- `onClusterClick`: Trigger onClusterClick actions when a cluster is clicked, returns `_event`
+- `onMarkerClick`: Trigger onMarkerClick actions when a marker is clicked, returns `_event`
+object:
   - `domEvent`: event object
   - `latLng`:
     - `lat`: latitudinal coordinate
@@ -44,13 +74,26 @@ To use this block, define a [@googlemaps/react-wrapper](https://www.npmjs.com/pa
   - `pixel`:
     - `x`: x position on map block
     - `y`: y position on map block
-- `onZoomChanged`: Trigger onZoomChanged actions when the zoom on the map is changed.
+- `onZoomChanged`: Trigger onZoomChanged actions when the zoom on the map is changed. returns `_event`
+object:
+  - `bounds`:
+    - `east`: latitudinal coordinate
+    - `north`: longitudinal coordinate
+    - `south`: longitudinal coordinate
+    - `west`: latitudinal coordinate
+  - `center`:
+    - `lat`: latitudinal coordinate
+    - `lng`: longitudinal coordinate
+  - `zoom`: zoom level
 
 ### Methods
 
 - `fitBounds`: Fit map to given bounds.
   - `bounds: { lat: number, lng: number } []`: A list of the coordinate positions of the boundary points.
   - `zoom: number`: Map zoom level.
+- `getBounds`: Returns the bounds of the map.
+- `getCenter`: Returns the center of the map.
+- `getZoom`: Returns the zoom of the map.
 
 ## Examples
 
@@ -177,11 +220,11 @@ To use this block, define a [@googlemaps/react-wrapper](https://www.npmjs.com/pa
 
     ```yaml
     - id: google_maps_script_4
-        type: GoogleMapsScript
-        properties:
-          apiKey:
-            _build.env: GOOGLE_MAPS_API_KEY
-        blocks:
+      type: GoogleMapsScript
+      properties:
+        apiKey:
+          _build.env: GOOGLE_MAPS_API_KEY
+      blocks:
         - id: google_maps_4
             type: GoogleMaps
             properties:
@@ -329,6 +372,126 @@ To use this block, define a [@googlemaps/react-wrapper](https://www.npmjs.com/pa
                 lat: -35.344
                 lng: 31.036
     ```
+
+7. Add a marker clusterer:
+
+    ```yaml
+    - id: google_maps_script_7
+      type: GoogleMapsScript
+      properties:
+        libraries:
+          - visualization
+        apiKey:
+          _build.env: GOOGLE_MAPS_API_KEY
+      blocks:
+        - id: google_maps_7
+          type: GoogleMaps
+          properties:
+            map:
+              disableDefaultUI: true
+            markerClusterers:
+              - markers:
+                  - position:
+                      lat: 34.091158
+                      lng: -118.2795188
+                  - position:
+                      lat: 34.0771192
+                      lng: -118.2587199
+                  - position:
+                      lat: 34.083527
+                      lng: -118.370157
+                  - position:
+                      lat: 34.0951843
+                      lng: -118.283107
+                  - position:
+                      lat: 34.1033401
+                      lng: -118.2875469
+                  - position:
+                      lat: 34.035798
+                      lng: -118.251288
+                  - position:
+                      lat: 34.0776068
+                      lng: -118.2646526
+                  - position:
+                      lat: 34.0919263
+                      lng: -118.2820544
+                  - position:
+                      lat: 34.0568525
+                      lng: -118.3646369
+                  - position:
+                      lat: 34.0285781
+                      lng: -118.4115541
+                  - position:
+                      lat: 34.017339
+                      lng: -118.278469
+                  - position:
+                      lat: 34.0764288
+                      lng: -118.3661624
+                  - position:
+                      lat: 33.9925942
+                      lng: -118.4232475
+                  - position:
+                      lat: 34.0764345
+                      lng: -118.3730332
+                  - position:
+                      lat: 34.093981
+                      lng: -118.327638
+                  - position:
+                      lat: 34.056385
+                      lng: -118.2508724
+                  - position:
+                      lat: 34.107701
+                      lng: -118.2667943
+                  - position:
+                      lat: 34.0450139
+                      lng: -118.2388682
+                  - position:
+                      lat: 34.1031997
+                      lng: -118.2586152
+                  - position:
+                      lat: 34.0828183
+                      lng: -118.3241586
+                options:
+                  averageCenter: true
+                  zoomOnClick: false
+                  minimumClusterSize: 3
+                  maxZoom: 13
+    ```
+
+8. Call method getZoom:
+
+    ```yaml
+    - id: google_maps_script_8
+      type: GoogleMapsScript
+      properties:
+        apiKey:
+          _build.env: GOOGLE_MAPS_API_KEY
+      blocks:
+        - id: google_maps_8
+          type: GoogleMaps
+          properties:
+            map:
+              options:
+                panControl: true
+                zoomControl: true
+                fullscreenControl: true
+              zoom: 14
+              center:
+                lat: -25.344
+                lng: 131.036
+          events:
+            onClick:
+              - id: get_zoom
+                type: CallMethod
+                params:
+                  blockId: google_maps_8
+                  method: getZoom
+              - id: get_zoom_result
+                type: SetState
+                params:
+                  zoom:
+                    _actions: get_zoom.response
+    ```
 <!--
 7. Trigger fitBounds using the onLoad event:
 

package/dist/blocks/GoogleMaps/GoogleMaps.json

@@ -85,6 +85,70 @@
           }
         }
       },
+      "markerClusterers": {
+        "type": "array",
+        "description": "A list of Marker Clusterers with marker clusterer options.",
+        "items": {
+          "type": "object",
+          "properties": {
+            "markers": {
+              "type": "array",
+              "description": "A list of Markers with marker options.",
+              "items": {
+                "type": "object",
+                "properties": {
+                  "position": {
+                    "type": "object",
+                    "properties": {
+                      "lat": {
+                        "type": "number",
+                        "description": "Lateral coordinate."
+                      },
+                      "lng": {
+                        "type": "number",
+                        "description": "Longitudinal coordinate."
+                      }
+                    }
+                  },
+                  "label": {
+                    "type": "string",
+                    "description": "Label displayed on marker."
+                  }
+                }
+              }
+            },
+            "options": {
+              "type": "object",
+              "properties": {
+                "averageCenter": {
+                  "type": "boolean",
+                  "description": "Whether the position of a cluster marker should be the average position of all markers in the cluster."
+                },
+                "gridSize": {
+                  "type": "number",
+                  "description": "The grid size of a cluster in pixels."
+                },
+                "maxZoom": {
+                  "type": "number",
+                  "description": "The maximum zoom level at which clustering is enabled."
+                },
+                "minimumClusterSize": {
+                  "type": "number",
+                  "description": "The minimum number of markers needed to form a cluster."
+                },
+                "styles": {
+                  "type": "array",
+                  "description": "Styles of the cluster markers to be used."
+                },
+                "zoomOnClick": {
+                  "type": "boolean",
+                  "description": "Whether to zoom the map when a cluster marker is clicked."
+                }
+              }
+            }
+          }
+        }
+      },
       "infoWindow": {
         "type": "object",
         "description": "infoWindow options, see <a href='https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindowOptions'>more</a>.",
@@ -118,6 +182,14 @@
     "type": "object",
     "additionalProperties": false,
     "properties": {
+      "onBoundsChanged": {
+        "type": "array",
+        "description": "Trigger actions when the bounds of the map are changed."
+      },
+      "onCenterChanged": {
+        "type": "array",
+        "description": "Trigger actions when the center of the map is changed."
+      },
       "onClick": {
         "type": "array",
         "description": "Trigger actions when the map is clicked."

package/dist/blocks/GoogleMapsScript/GoogleMapsScript.json

@@ -24,23 +24,5 @@
         }
       }
     }
-  },
-  "events": {
-    "type": "object",
-    "additionalProperties": false,
-    "properties": {
-      "onClick": {
-        "type": "array",
-        "description": "Trigger actions when the map is clicked."
-      },
-      "onMarkerClick": {
-        "type": "array",
-        "description": "Trigger actions when marker is clicked."
-      },
-      "onZoomChanged": {
-        "type": "array",
-        "description": "Trigger actions when the zoom on the map is changed."
-      }
-    }
   }
 }

package/dist/blocks/Map.js

@@ -27,7 +27,7 @@
     return _extends.apply(this, arguments);
 }
 import React, { useState, useEffect } from 'react';
-import { GoogleMap, Marker, InfoWindow } from '@react-google-maps/api';
+import { GoogleMap, Marker, MarkerClusterer, InfoWindow } from '@react-google-maps/api';
 const STYLE_DEFAULTS = {
     width: '100%',
     height: '300px'
@@ -40,6 +40,7 @@ const MAP_DEFAULTS = {
     }
 };
 const MAP_PROPS = {
+    zoom: null,
     center: {
         lat: 0,
         lng: 0
@@ -62,6 +63,15 @@ const Map = ({ blockId , children , content , methods , properties  })=>{
                 map.setZoom(args.zoom);
             }
         });
+        methods.registerMethod('getBounds', ()=>{
+            return map.getBounds();
+        });
+        methods.registerMethod('getCenter', ()=>{
+            return map.getCenter();
+        });
+        methods.registerMethod('getZoom', ()=>{
+            return map.getZoom();
+        });
     }, [
         bounds,
         map
@@ -74,13 +84,22 @@ const Map = ({ blockId , children , content , methods , properties  })=>{
         (properties.markers ?? []).map((marker)=>{
             bounds.extend(marker.position);
         });
-        if (!properties.map?.center && !properties.map?.zoom) {
+        (properties.markerClusterers ?? []).map((markerClusterer)=>{
+            (markerClusterer.markers ?? []).map((marker)=>{
+                bounds.extend(marker.position);
+            });
+        });
+        if (!properties.map?.center && !properties.map?.zoom && MAP_PROPS.zoom === null) {
             map.fitBounds(bounds);
+            MAP_PROPS.zoom = map.getZoom();
         }
     }
     if (properties.map?.center && (properties.map.center?.lat !== MAP_PROPS.center.lat || properties.map.center?.lng !== MAP_PROPS.center.lng)) {
         MAP_PROPS.center = properties.map.center;
     }
+    if (properties.map?.zoom && properties.map.zoom !== MAP_PROPS.zoom) {
+        MAP_PROPS.zoom = properties.map.zoom;
+    }
     return /*#__PURE__*/ React.createElement(GoogleMap, _extends({}, properties.map, {
         id: blockId,
         mapContainerClassName: methods.makeCssClass([
@@ -88,7 +107,7 @@ const Map = ({ blockId , children , content , methods , properties  })=>{
             properties.style
         ]),
         center: MAP_PROPS.center,
-        zoom: properties.map?.zoom ?? MAP_DEFAULTS.zoom,
+        zoom: MAP_PROPS.zoom,
         onLoad: (newMap, event)=>{
             setMap(newMap);
             setBounds(new window.google.maps.LatLngBounds());
@@ -97,6 +116,26 @@ const Map = ({ blockId , children , content , methods , properties  })=>{
                 event
             });
         },
+        onBoundsChanged: ()=>{
+            methods.triggerEvent({
+                name: 'onBoundsChanged',
+                event: {
+                    center: map?.getCenter(),
+                    bounds: map?.getBounds(),
+                    zoom: map?.getZoom()
+                }
+            });
+        },
+        onCenterChanged: ()=>{
+            methods.triggerEvent({
+                name: 'onCenterChanged',
+                event: {
+                    center: map?.getCenter(),
+                    bounds: map?.getBounds(),
+                    zoom: map?.getZoom()
+                }
+            });
+        },
         onClick: (event)=>{
             methods.triggerEvent({
                 name: 'onClick',
@@ -104,8 +143,16 @@ const Map = ({ blockId , children , content , methods , properties  })=>{
             });
         },
         onZoomChanged: ()=>{
+            if (map) {
+                MAP_PROPS.zoom = map.getZoom();
+            }
             methods.triggerEvent({
-                name: 'onZoomChanged'
+                name: 'onZoomChanged',
+                event: {
+                    center: map?.getCenter(),
+                    bounds: map?.getBounds(),
+                    zoom: map?.getZoom()
+                }
             });
         }
     }), (properties.markers ?? []).map((marker, i)=>/*#__PURE__*/ React.createElement(Marker, _extends({}, marker, {
@@ -116,7 +163,25 @@ const Map = ({ blockId , children , content , methods , properties  })=>{
                     event
                 });
             }
-        }))), properties.infoWindow?.visible === true && /*#__PURE__*/ React.createElement(InfoWindow, _extends({}, properties.infoWindow, {
+        }))), (properties.markerClusterers ?? []).map((markerClusterer, i)=>/*#__PURE__*/ React.createElement(MarkerClusterer, _extends({
+            key: i
+        }, markerClusterer.options, {
+            onClick: (event)=>{
+                methods.triggerEvent({
+                    name: 'onClusterClick',
+                    event
+                });
+            }
+        }), (clusterer)=>markerClusterer?.markers.map((marker, i)=>/*#__PURE__*/ React.createElement(Marker, _extends({}, marker, {
+                    key: i,
+                    clusterer: clusterer,
+                    onClick: (event)=>{
+                        methods.triggerEvent({
+                            name: 'onMarkerClick',
+                            event
+                        });
+                    }
+                }))))), properties.infoWindow?.visible === true && /*#__PURE__*/ React.createElement(InfoWindow, _extends({}, properties.infoWindow, {
         onCloseClick: ()=>{
             methods.triggerEvent({
                 name: 'onInfoWindowCloseClick'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/blocks-google-maps",
-  "version": "4.0.0-rc.4",
+  "version": "4.0.0-rc.6",
   "license": "Apache-2.0",
   "description": "Google Maps Blocks for Lowdefy.",
   "homepage": "https://lowdefy.com",
@@ -41,15 +41,15 @@
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
   },
   "dependencies": {
-    "@lowdefy/block-utils": "4.0.0-rc.4",
+    "@lowdefy/block-utils": "4.0.0-rc.6",
     "@react-google-maps/api": "2.17.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@emotion/jest": "11.10.5",
-    "@lowdefy/block-dev": "4.0.0-rc.4",
-    "@lowdefy/jest-yaml-transform": "4.0.0-rc.4",
+    "@lowdefy/block-dev": "4.0.0-rc.6",
+    "@lowdefy/jest-yaml-transform": "4.0.0-rc.6",
     "@swc/cli": "0.1.59",
     "@swc/core": "1.3.24",
     "@swc/jest": "0.2.24",
@@ -64,5 +64,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "64ac69e424c881ee15a5333b75bd22156bd58ccb"
+  "gitHead": "8238145a9eb26c6f3dc48661ab6eca6e3aca4f83"
 }