@lowdefy/blocks-google-maps 0.0.0-experimental-20231123101256

package/dist/blocks/GoogleMaps/GoogleMaps.json

@@ -0,0 +1,207 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "map": {
+        "type": "object",
+        "description": "Map settings object.",
+        "properties": {
+          "center": {
+            "type": "object",
+            "description": "A coordinate position object by which to center the map.",
+            "properties": {
+              "lat": {
+                "type": "number",
+                "description": "Lateral coordinate."
+              },
+              "lng": {
+                "type": "number",
+                "description": "Longitudinal coordinate."
+              }
+            }
+          },
+          "zoom": {
+            "type": "number",
+            "description": "Map zoom level."
+          },
+          "options": {
+            "type": "object",
+            "description": "Map options, see <a href='https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions'>more</a>."
+          }
+        }
+      },
+      "heatmap": {
+        "type": "object",
+        "description": "Add a heatmap layer, see more <a href='https://developers.google.com/maps/documentation/javascript/reference/visualization#HeatmapLayerOptions'>heatmap options</a>. This will automatically load the 'visualization' library.",
+        "properties": {
+          "data": {
+            "type": "array",
+            "description": "A list of heatmap data points.",
+            "items": {
+              "type": "object",
+              "properties": {
+                "lat": {
+                  "type": "number",
+                  "description": "Lateral coordinate."
+                },
+                "lng": {
+                  "type": "number",
+                  "description": "Longitudinal coordinate."
+                },
+                "weight": {
+                  "type": "number",
+                  "description": "Item weight on heatmap."
+                }
+              }
+            }
+          }
+        }
+      },
+      "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."
+            }
+          }
+        }
+      },
+      "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>.",
+        "properties": {
+          "visible": {
+            "type": "boolean",
+            "description": "When visible is true, blocks inside infoWindow content area will be rendered."
+          },
+          "position": {
+            "type": "object",
+            "properties": {
+              "lat": {
+                "type": "number",
+                "description": "Lateral coordinate."
+              },
+              "lng": {
+                "type": "number",
+                "description": "Longitudinal coordinate."
+              }
+            }
+          }
+        }
+      },
+      "style": {
+        "type": "object",
+        "description": "Custom map css properties to apply to map block."
+      }
+    }
+  },
+  "events": {
+    "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."
+      },
+      "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/GoogleMapsHeatmap/GoogleMapsHeatmap.js

@@ -0,0 +1,50 @@
+/* eslint-disable react/jsx-props-no-spreading */ /*
+  Copyright 2020-2023 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+import { HeatmapLayer } from '@react-google-maps/api';
+import Map from '../Map.js';
+function updateHeatmap(data) {
+    if (data.location) {
+        const latLng = new window.google.maps.LatLng(data.location);
+        latLng.weight = data.weight ?? 1;
+        return latLng;
+    }
+    return new window.google.maps.LatLng(data);
+}
+const GoogleMapsHeatmap = ({ blockId, content, methods, properties })=>/*#__PURE__*/ React.createElement(Map, {
+        blockId: blockId,
+        content: content,
+        methods: methods,
+        properties: properties
+    }, (map, bounds)=>map && bounds && properties.heatmap && /*#__PURE__*/ React.createElement(HeatmapLayer, {
+            ...properties.heatmap,
+            data: properties.heatmap?.data && window.google && (properties.heatmap?.data || []).map((item)=>updateHeatmap(item)),
+            onLoad: ()=>{
+                if (properties.autoBounds !== false && bounds && map) {
+                    (properties.heatmap?.data || []).forEach((item)=>{
+                        bounds.extend(item);
+                    });
+                    map.fitBounds(bounds);
+                }
+            }
+        }));
+GoogleMapsHeatmap.defaultProps = blockDefaultProps;
+GoogleMapsHeatmap.meta = {
+    category: 'container',
+    icons: [],
+    styles: []
+};
+export default GoogleMapsHeatmap;

package/dist/blocks/GoogleMapsHeatmap/GoogleMapsHeatmap.json

@@ -0,0 +1,135 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "map": {
+        "type": "object",
+        "description": "Map settings object.",
+        "properties": {
+          "center": {
+            "type": "object",
+            "description": "A coordinate position object by which to center the map.",
+            "properties": {
+              "lat": {
+                "type": "number",
+                "description": "Lateral coordinate."
+              },
+              "lng": {
+                "type": "number",
+                "description": "Longitudinal coordinate."
+              }
+            }
+          },
+          "zoom": {
+            "type": "number",
+            "description": "Map zoom level."
+          },
+          "options": {
+            "type": "object",
+            "description": "Map options, see <a href='https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions'>more</a>."
+          }
+        }
+      },
+      "heatmap": {
+        "type": "object",
+        "description": "Add a heatmap layer, see more <a href='https://developers.google.com/maps/documentation/javascript/reference/visualization#HeatmapLayerOptions'>heatmap options</a>. This will automatically load the 'visualization' library.",
+        "properties": {
+          "data": {
+            "type": "array",
+            "description": "A list of heatmap data points.",
+            "items": {
+              "type": "object",
+              "properties": {
+                "lat": {
+                  "type": "number",
+                  "description": "Lateral coordinate."
+                },
+                "lng": {
+                  "type": "number",
+                  "description": "Longitudinal coordinate."
+                },
+                "weight": {
+                  "type": "number",
+                  "description": "Item weight on heatmap."
+                }
+              }
+            }
+          }
+        }
+      },
+      "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."
+            }
+          }
+        }
+      },
+      "infoWindow": {
+        "type": "object",
+        "description": "infoWindow options, see <a href='https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindowOptions'>more</a>.",
+        "properties": {
+          "visible": {
+            "type": "boolean",
+            "description": "When visible is true, blocks inside infoWindow content area will be rendered."
+          },
+          "position": {
+            "type": "object",
+            "properties": {
+              "lat": {
+                "type": "number",
+                "description": "Lateral coordinate."
+              },
+              "lng": {
+                "type": "number",
+                "description": "Longitudinal coordinate."
+              }
+            }
+          }
+        }
+      },
+      "style": {
+        "type": "object",
+        "description": "Custom map css properties to apply to map block."
+      }
+    }
+  },
+  "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/GoogleMapsScript/GoogleMapsScript.js

@@ -0,0 +1,44 @@
+/*
+  Copyright 2020-2023 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+import { LoadScriptNext } from '@react-google-maps/api';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+let GoogleMapsScript = class GoogleMapsScript extends React.Component {
+    render() {
+        const { blockId, properties, content } = this.props;
+        return /*#__PURE__*/ React.createElement(LoadScriptNext, {
+            id: blockId,
+            channel: properties.channel,
+            googleMapsApiKey: properties.apiKey,
+            language: properties.language,
+            libraries: this.libraries,
+            region: properties.region,
+            version: properties.version
+        }, content.content && content.content());
+    }
+    constructor(props){
+        super(props);
+        this.libraries = [
+            ...new Set(props.properties?.libraries || [])
+        ];
+    }
+};
+GoogleMapsScript.defaultProps = blockDefaultProps;
+GoogleMapsScript.meta = {
+    category: 'container',
+    icons: [],
+    styles: []
+};
+export default GoogleMapsScript;

package/dist/blocks/GoogleMapsScript/GoogleMapsScript.json

@@ -0,0 +1,28 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "apiKey": {
+        "type": "string",
+        "description": "Your Google Maps API key."
+      },
+      "libraries": {
+        "type": "array",
+        "description": "A list of Google libraries, see <a href='https://developers.google.com/maps/documentation/javascript/libraries'>more</a>.",
+        "items": {
+          "type": "string",
+          "enum": [
+            "drawing",
+            "geometry",
+            "journeySharing",
+            "localContext",
+            "places",
+            "visualization"
+          ]
+        }
+      }
+    }
+  }
+}

package/dist/blocks/Map.js

@@ -0,0 +1,187 @@
+/* eslint-disable react/jsx-props-no-spreading */ /*
+  Copyright 2020-2023 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React, { useState, useEffect } from 'react';
+import { GoogleMap, Marker, MarkerClusterer, InfoWindow } from '@react-google-maps/api';
+const STYLE_DEFAULTS = {
+    width: '100%',
+    height: '300px'
+};
+const MAP_DEFAULTS = {
+    zoom: 3,
+    center: {
+        lat: 0,
+        lng: 0
+    }
+};
+const MAP_PROPS = {
+    zoom: null,
+    center: {
+        lat: 0,
+        lng: 0
+    }
+};
+// Implements https://react-google-maps-api-docs.netlify.app/#googlemap
+const Map = ({ blockId, children, content, methods, properties })=>{
+    const [map, setMap] = useState();
+    const [bounds, setBounds] = useState();
+    useEffect(()=>{
+        methods.registerMethod('fitBounds', (args)=>{
+            if (!bounds || !map) {
+                throw new Error('fitBounds can only be called once google maps has been mounted.');
+            }
+            (args?.bounds ?? []).forEach((position)=>{
+                bounds.extend(position);
+            });
+            map.fitBounds(bounds);
+            if (args.zoom) {
+                map.setZoom(args.zoom);
+            }
+        });
+        methods.registerMethod('getBounds', ()=>{
+            return map.getBounds();
+        });
+        methods.registerMethod('getCenter', ()=>{
+            return map.getCenter();
+        });
+        methods.registerMethod('getZoom', ()=>{
+            return map.getZoom();
+        });
+    }, [
+        bounds,
+        map
+    ]);
+    // by default, fit infoWindow and markers to bounds
+    if (properties.autoBounds !== false && bounds && map) {
+        if (properties.infoWindow) {
+            bounds.extend(properties.infoWindow.position ?? MAP_DEFAULTS.center);
+        }
+        (properties.markers ?? []).forEach((marker)=>{
+            bounds.extend(marker.position);
+        });
+        (properties.markerClusterers ?? []).forEach((markerClusterer)=>{
+            (markerClusterer.markers ?? []).forEach((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, {
+        ...properties.map,
+        id: blockId,
+        mapContainerClassName: methods.makeCssClass([
+            STYLE_DEFAULTS,
+            properties.style
+        ]),
+        center: MAP_PROPS.center,
+        zoom: MAP_PROPS.zoom,
+        onLoad: (newMap, event)=>{
+            setMap(newMap);
+            setBounds(new window.google.maps.LatLngBounds());
+            methods.triggerEvent({
+                name: 'onLoad',
+                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',
+                event
+            });
+        },
+        onZoomChanged: ()=>{
+            if (map) {
+                MAP_PROPS.zoom = map.getZoom();
+            }
+            methods.triggerEvent({
+                name: 'onZoomChanged',
+                event: {
+                    center: map?.getCenter(),
+                    bounds: map?.getBounds(),
+                    zoom: map?.getZoom()
+                }
+            });
+        }
+    }, (properties.markers ?? []).map((marker, i)=>/*#__PURE__*/ React.createElement(Marker, {
+            ...marker,
+            key: i,
+            onClick: (event)=>{
+                methods.triggerEvent({
+                    name: 'onMarkerClick',
+                    event
+                });
+            }
+        })), (properties.markerClusterers ?? []).map((markerClusterer, i)=>/*#__PURE__*/ React.createElement(MarkerClusterer, {
+            key: i,
+            ...markerClusterer.options,
+            onClick: (event)=>{
+                methods.triggerEvent({
+                    name: 'onClusterClick',
+                    event
+                });
+            }
+        }, (clusterer)=>markerClusterer?.markers.map((marker, i)=>/*#__PURE__*/ React.createElement(Marker, {
+                    ...marker,
+                    key: i,
+                    clusterer: clusterer,
+                    onClick: (event)=>{
+                        methods.triggerEvent({
+                            name: 'onMarkerClick',
+                            event
+                        });
+                    }
+                })))), properties.infoWindow?.visible === true && /*#__PURE__*/ React.createElement(InfoWindow, {
+        ...properties.infoWindow,
+        onCloseClick: ()=>{
+            methods.triggerEvent({
+                name: 'onInfoWindowCloseClick'
+            });
+        },
+        onPositionChanged: ()=>{
+            methods.triggerEvent({
+                name: 'onInfoWindowPositionChanged'
+            });
+        }
+    }, content.infoWindow && content.infoWindow()), children?.(map, bounds));
+};
+export default Map;

package/dist/blocks.js

@@ -0,0 +1,17 @@
+/*
+  Copyright 2020-2023 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ export { default as GoogleMaps } from './blocks/GoogleMaps/GoogleMaps.js';
+export { default as GoogleMapsHeatmap } from './blocks/GoogleMapsHeatmap/GoogleMapsHeatmap.js';
+export { default as GoogleMapsScript } from './blocks/GoogleMapsScript/GoogleMapsScript.js';