From 2657a3c6c390807ba987980407a1fd75fac5dede Mon Sep 17 00:00:00 2001
From: StephanieJKS <47713197+StephanieJKS@users.noreply.github.com>
Date: Fri, 24 Jun 2022 16:49:25 +0200
Subject: [PATCH] feat(blocks-google-maps): Update Google Maps block docs.
---
.../blocks/blocks-google-maps/README.md | 524 ++++++++++--------
.../src/blocks/GoogleMaps/GoogleMaps.json | 54 +-
.../GoogleMapsHeatmap/GoogleMapsHeatmap.json | 54 +-
.../GoogleMapsScript/GoogleMapsScript.json | 21 +-
4 files changed, 387 insertions(+), 266 deletions(-)
diff --git a/packages/plugins/blocks/blocks-google-maps/README.md b/packages/plugins/blocks/blocks-google-maps/README.md
index 8bd40965d1..d882cebe6a 100644
--- a/packages/plugins/blocks/blocks-google-maps/README.md
+++ b/packages/plugins/blocks/blocks-google-maps/README.md
@@ -3,180 +3,127 @@
This is a Lowdefy blocks wrapper for this the [Google Maps API](https://developers.google.com/maps/documentation/javascript/overview).
To use this block, define a [@googlemaps/react-wrapper](https://www.npmjs.com/package/@googlemaps/react-wrapper). It currently implements:
+
- [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)
### Properties
-- `apiKey: string`: Your Goolge Maps API key.
+- `apiKey: string`: Your Google Maps API key.
+- `libraries: array`: List of [Google libraries](https://developers.google.com/maps/documentation/javascript/libraries).
- `map: mapOptions`: All [map options](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions).
- `center: { lat: number, lng: number }`: A coordinate position object by which to center the map.
- `zoom: number`: Map zoom level.
-- `heatmap: heatmapOptions`: Add a heatmap layer, see more [heatmap options](https://developers.google.com/maps/documentation/javascript/reference/visualization#HeatmapLayerOptions). This will automatically load the `visualization` library.
- - `data: { lat: number, lng: number } | { location: { lat: number, lng: number }, weight: number }[]`: A list of heatmap data points.
+ - `options: mapOptions`: All other [map options](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions).
+- `heatmap: heatmapOptions`: Add a heatmap layer, see more [heatmap options](https://developers.google.com/maps/documentation/javascript/reference/visualization#HeatmapLayerOptions). This will automatically load the `visualization` library, which must be added to the list of libraries in the `libraries` property of the `GoogleMapsScript` block.
+ - `data: { lat: number, lng: number, weight: number } []`: A list of heatmap data points.
- `style: cssObject`: A style object applied to the map element.
- `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.
+- `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
- `onClick`: Trigger onClick actions when the map is clicked, returns `_event` object:
- - `event`: event object
+ - `domEvent`: event object
- `latLng`:
- `lat`: latitudinal coordinate
- `lng`: longitudinal coordinate
- - `map`: has functions removed
- - `x`: position on map block
- - `y`: position on map block
-- `onClickMarker`: Trigger onClick actions when a marker is clicked, returns `_event` object:
+ - `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:
- `domEvent`: event object
- `latLng`:
- `lat`: latitudinal coordinate
- `lng`: longitudinal coordinate
- - `maps`: has functions removed
- `pixel`:
- - `x`
- - `y`
+ - `x`: x position on map block
+ - `y`: y position on map block
+- `onZoomChanged`: Trigger onZoomChanged actions when the zoom on the map is changed.
-
+- `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.
## Examples
-1. Add a list of markers:
+1. Add markers:
- ```yaml
- - id: google_maps_script_1
- type: GoogleMapsScript
- properties:
- apiKey:
- _build.env: GOOGLE_MAPS_API_KEY
- blocks:
- - id: google_maps_1
- type: GoogleMaps
- properties:
- map:
- options:
- panControl: true
- zoomControl: true
- fullscreenControl: true
- zoom: 14
- center:
- lat: -25.344
- lng: 131.036
- markers:
- - position:
+ ```yaml
+ - id: google_maps_script_1
+ type: GoogleMapsScript
+ properties:
+ apiKey:
+ _build.env: GOOGLE_MAPS_API_KEY
+ blocks:
+ - id: google_maps_1
+ type: GoogleMaps
+ properties:
+ map:
+ options:
+ panControl: true
+ zoomControl: true
+ fullscreenControl: true
+ zoom: 14
+ center:
lat: -25.344
lng: 131.036
- label: One
- - position:
- lat: -25.348
- lng: 131.038
- label: Two
- ```
+ markers:
+ - position:
+ lat: -25.344
+ lng: 131.036
+ label: One
+ - position:
+ lat: -25.348
+ lng: 131.038
+ label: Two
+ ```
-2. Automatically fit bounds by leaving out zoom and center map properties:
+2. Automatically bound map around marker positions when zoom and center map properties are left out:
- ```yaml
- - id: google_maps_script_2
- type: GoogleMapsScript
- properties:
- apiKey:
- _build.env: GOOGLE_MAPS_API_KEY
- blocks:
- - id: google_maps_2
- type: GoogleMaps
- properties:
- map:
- options:
- panControl: true
- zoomControl: true
- fullscreenControl: true
- markers:
- - position:
- lat: -25.344
- lng: 131.036
- label: One
- - position:
- lat: -25.348
- lng: 131.038
- label: Two
- ```
+ ```yaml
+ - id: google_maps_script_2
+ type: GoogleMapsScript
+ properties:
+ apiKey:
+ _build.env: GOOGLE_MAPS_API_KEY
+ blocks:
+ - id: google_maps_2
+ type: GoogleMaps
+ properties:
+ map:
+ options:
+ panControl: true
+ zoomControl: true
+ fullscreenControl: true
+ markers:
+ - position:
+ lat: -25.344
+ lng: 131.036
+ label: One
+ - position:
+ lat: -25.348
+ lng: 131.038
+ label: Two
+ ```
3. Add tooltips by making use of infoWindow:
- ```yaml
- - id: google_maps_script_3
- type: GoogleMapsScript
- properties:
- apiKey:
- _build.env: GOOGLE_MAPS_API_KEY
- blocks:
- - id: google_maps_3
- type: GoogleMaps
- properties:
- map:
- options:
- panControl: true
- zoomControl: true
- fullscreenControl: true
- zoom: 14
- center:
- lat: -25.344
- lng: 131.036
- markers:
- - position:
- lat: -25.344
- lng: 131.036
- label: One
- - position:
- lat: -25.348
- lng: 131.038
- label: Two
- infoWindow:
- position:
- _state: position
- visible:
- _state: show_info
- events:
- onMarkerClick:
- - id: set
- type: SetState
- params:
- show_info:
- _not:
- _state: show_info
- position:
- _event: latLng
- areas:
- infoWindow:
- blocks:
- - id: content
- type: Html
- properties:
- _nunjucks:
- template: |
- Lat: {{ position.lat }} Lng: {{ position.lng }}
- on:
- _state: true
- ```
-
-4. Add markers with onClick event:
-
- ```yaml
- - id: google_maps_script_4
+ ```yaml
+ - id: google_maps_script_3
type: GoogleMapsScript
properties:
apiKey:
_build.env: GOOGLE_MAPS_API_KEY
blocks:
- - id: google_maps_4
+ - id: google_maps_3
type: GoogleMaps
properties:
map:
@@ -184,105 +131,232 @@ TODO:
panControl: true
zoomControl: true
fullscreenControl: true
+ zoom: 14
center:
lat: -25.344
lng: 131.036
- zoom: 5
markers:
- _state: markers_list
+ - position:
+ lat: -25.344
+ lng: 131.036
+ label: One
+ - position:
+ lat: -25.348
+ lng: 131.038
+ label: Two
+ infoWindow:
+ position:
+ _state: position
+ visible:
+ _state: show_info
events:
- onClick:
- - id: markers_list
+ onMarkerClick:
+ - id: set
type: SetState
params:
- markers_list:
- _array.concat:
- - - position:
- _event: latLng
- label: Hi
- - _if_none:
- - _state: markers_list
- - []
- ```
-5. Add a heatmap:
+ show_info:
+ _not:
+ _state: show_info
+ position:
+ _event: latLng
+ areas:
+ infoWindow:
+ blocks:
+ - id: content
+ type: Html
+ properties:
+ html:
+ _nunjucks:
+ template: |
+ Lat: {{ position.lat }} Lng: {{ position.lng }}
+ on:
+ _state: true
+ ```
+
+4. Add markers with onClick event:
- ```yaml
- - id: google_maps_script_5
- type: GoogleMapsScript
- properties:
- libraries:
- - visualization
- apiKey:
- _build.env: GOOGLE_MAPS_API_KEY
- blocks:
- - id: google_maps_5
- type: GoogleMapsHeatmap
+ ```yaml
+ - id: google_maps_script_4
+ type: GoogleMapsScript
properties:
- map:
- disableDefaultUI: true
- heatmap:
- data:
- - lat: 34.091158
- lng: -118.2795188
- weight: 1
- - lat: 34.0771192
- lng: -118.2587199
- weight: 2
- - lat: 34.083527
- lng: -118.370157
- weight: 1
- - lat: 34.0951843
- lng: -118.283107
- weight: 2
- - lat: 34.1033401
- lng: -118.2875469
- weight: 4
- - lat: 34.035798
- lng: -118.251288
- weight: 2
- - lat: 34.0776068
- lng: -118.2646526
- weight: 3
- - lat: 34.0919263
- lng: -118.2820544
- weight: 3
- - lat: 34.0568525
- lng: -118.3646369
- weight: 3
- - lat: 34.0285781
- lng: -118.4115541
- weight: 0
- - lat: 34.017339
- lng: -118.278469
- weight: 0
- - lat: 34.0764288
- lng: -118.3661624
- weight: 4
- - lat: 33.9925942
- lng: -118.4232475
- weight: 4
- - lat: 34.0764345
- lng: -118.3730332
- weight: 3
- - lat: 34.093981
- lng: -118.327638
- weight: 0
- - lat: 34.056385
- lng: -118.2508724
- weight: 1
- - lat: 34.107701
- lng: -118.2667943
- weight: 4
- - lat: 34.0450139
- lng: -118.2388682
- weight: 4
- - lat: 34.1031997
- lng: -118.2586152
- weight: 1
- - lat: 34.0828183
- lng: -118.3241586
- weight: 1
- options:
- radius: 20
- opacity: 1
- ```
+ apiKey:
+ _build.env: GOOGLE_MAPS_API_KEY
+ blocks:
+ - id: google_maps_4
+ type: GoogleMaps
+ properties:
+ map:
+ options:
+ panControl: true
+ zoomControl: true
+ fullscreenControl: true
+ center:
+ lat: -25.344
+ lng: 131.036
+ zoom: 5
+ markers:
+ _state: markers_list
+ events:
+ onClick:
+ - id: markers_list
+ type: SetState
+ params:
+ markers_list:
+ _array.concat:
+ - - position:
+ _event: latLng
+ label: Hi
+ - _if_none:
+ - _state: markers_list
+ - []
+ ```
+
+5. Add a heatmap:
+
+ ```yaml
+ - id: google_maps_script_5
+ type: GoogleMapsScript
+ properties:
+ libraries:
+ - visualization
+ apiKey:
+ _build.env: GOOGLE_MAPS_API_KEY
+ blocks:
+ - id: google_maps_5
+ type: GoogleMapsHeatmap
+ properties:
+ map:
+ disableDefaultUI: true
+ heatmap:
+ data:
+ - lat: 34.091158
+ lng: -118.2795188
+ weight: 1
+ - lat: 34.0771192
+ lng: -118.2587199
+ weight: 2
+ - lat: 34.083527
+ lng: -118.370157
+ weight: 1
+ - lat: 34.0951843
+ lng: -118.283107
+ weight: 2
+ - lat: 34.1033401
+ lng: -118.2875469
+ weight: 4
+ - lat: 34.035798
+ lng: -118.251288
+ weight: 2
+ - lat: 34.0776068
+ lng: -118.2646526
+ weight: 3
+ - lat: 34.0919263
+ lng: -118.2820544
+ weight: 3
+ - lat: 34.0568525
+ lng: -118.3646369
+ weight: 3
+ - lat: 34.0285781
+ lng: -118.4115541
+ weight: 0
+ - lat: 34.017339
+ lng: -118.278469
+ weight: 0
+ - lat: 34.0764288
+ lng: -118.3661624
+ weight: 4
+ - lat: 33.9925942
+ lng: -118.4232475
+ weight: 4
+ - lat: 34.0764345
+ lng: -118.3730332
+ weight: 3
+ - lat: 34.093981
+ lng: -118.327638
+ weight: 0
+ - lat: 34.056385
+ lng: -118.2508724
+ weight: 1
+ - lat: 34.107701
+ lng: -118.2667943
+ weight: 4
+ - lat: 34.0450139
+ lng: -118.2388682
+ weight: 4
+ - lat: 34.1031997
+ lng: -118.2586152
+ weight: 1
+ - lat: 34.0828183
+ lng: -118.3241586
+ weight: 1
+ options:
+ radius: 20
+ opacity: 1
+ ```
+
+6. Trigger fitBounds using a Button:
+
+ ```yaml
+ - id: google_maps_script_6
+ type: GoogleMapsScript
+ properties:
+ apiKey:
+ _build.env: GOOGLE_MAPS_API_KEY
+ blocks:
+ - id: btn
+ type: Button
+ events:
+ onClick:
+ - id: set_boundaries
+ type: CallMethod
+ params:
+ blockId: google_maps_6
+ method: fitBounds
+ args:
+ - bounds:
+ - lat: -25.344
+ lng: 131.036
+ - lat: -25.348
+ lng: 131.038
+ zoom: 10
+
+ - id: google_maps_6
+ type: GoogleMaps
+ properties:
+ map:
+ zoom: 5
+ center:
+ lat: -35.344
+ lng: 31.036
+ ```
+
diff --git a/packages/plugins/blocks/blocks-google-maps/src/blocks/GoogleMaps/GoogleMaps.json b/packages/plugins/blocks/blocks-google-maps/src/blocks/GoogleMaps/GoogleMaps.json
index 453bb38c15..f0ed9c83a2 100644
--- a/packages/plugins/blocks/blocks-google-maps/src/blocks/GoogleMaps/GoogleMaps.json
+++ b/packages/plugins/blocks/blocks-google-maps/src/blocks/GoogleMaps/GoogleMaps.json
@@ -4,13 +4,9 @@
"type": "object",
"additionalProperties": false,
"properties": {
- "apiKey": {
- "type": "string",
- "description": "Your Goolge Maps API key."
- },
"map": {
"type": "object",
- "description": "Map options, see more.",
+ "description": "Map settings object.",
"properties": {
"center": {
"type": "object",
@@ -29,6 +25,10 @@
"zoom": {
"type": "number",
"description": "Map zoom level."
+ },
+ "options": {
+ "type": "object",
+ "description": "Map options, see more."
}
}
},
@@ -42,19 +42,6 @@
"items": {
"type": "object",
"properties": {
- "location": {
- "type": "object",
- "properties": {
- "lat": {
- "type": "number",
- "description": "Lateral coordinate."
- },
- "lng": {
- "type": "number",
- "description": "Longitudinal coordinate."
- }
- }
- },
"lat": {
"type": "number",
"description": "Lateral coordinate."
@@ -91,9 +78,32 @@
}
}
},
- "tooltip": {
+ "label": {
"type": "string",
- "description": "Will create a infoWindow to display additional marker information when clicked. Html string is supported."
+ "description": "Label displayed on marker."
+ }
+ }
+ }
+ },
+ "infoWindow": {
+ "type": "object",
+ "description": "infoWindow options, see more.",
+ "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."
+ }
}
}
}
@@ -115,6 +125,10 @@
"onMarkerClick": {
"type": "array",
"description": "Trigger actions when marker is clicked."
+ },
+ "onZoomChanged": {
+ "type": "array",
+ "description": "Trigger actions when the zoom on the map is changed."
}
}
}
diff --git a/packages/plugins/blocks/blocks-google-maps/src/blocks/GoogleMapsHeatmap/GoogleMapsHeatmap.json b/packages/plugins/blocks/blocks-google-maps/src/blocks/GoogleMapsHeatmap/GoogleMapsHeatmap.json
index 453bb38c15..f0ed9c83a2 100644
--- a/packages/plugins/blocks/blocks-google-maps/src/blocks/GoogleMapsHeatmap/GoogleMapsHeatmap.json
+++ b/packages/plugins/blocks/blocks-google-maps/src/blocks/GoogleMapsHeatmap/GoogleMapsHeatmap.json
@@ -4,13 +4,9 @@
"type": "object",
"additionalProperties": false,
"properties": {
- "apiKey": {
- "type": "string",
- "description": "Your Goolge Maps API key."
- },
"map": {
"type": "object",
- "description": "Map options, see more.",
+ "description": "Map settings object.",
"properties": {
"center": {
"type": "object",
@@ -29,6 +25,10 @@
"zoom": {
"type": "number",
"description": "Map zoom level."
+ },
+ "options": {
+ "type": "object",
+ "description": "Map options, see more."
}
}
},
@@ -42,19 +42,6 @@
"items": {
"type": "object",
"properties": {
- "location": {
- "type": "object",
- "properties": {
- "lat": {
- "type": "number",
- "description": "Lateral coordinate."
- },
- "lng": {
- "type": "number",
- "description": "Longitudinal coordinate."
- }
- }
- },
"lat": {
"type": "number",
"description": "Lateral coordinate."
@@ -91,9 +78,32 @@
}
}
},
- "tooltip": {
+ "label": {
"type": "string",
- "description": "Will create a infoWindow to display additional marker information when clicked. Html string is supported."
+ "description": "Label displayed on marker."
+ }
+ }
+ }
+ },
+ "infoWindow": {
+ "type": "object",
+ "description": "infoWindow options, see more.",
+ "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."
+ }
}
}
}
@@ -115,6 +125,10 @@
"onMarkerClick": {
"type": "array",
"description": "Trigger actions when marker is clicked."
+ },
+ "onZoomChanged": {
+ "type": "array",
+ "description": "Trigger actions when the zoom on the map is changed."
}
}
}
diff --git a/packages/plugins/blocks/blocks-google-maps/src/blocks/GoogleMapsScript/GoogleMapsScript.json b/packages/plugins/blocks/blocks-google-maps/src/blocks/GoogleMapsScript/GoogleMapsScript.json
index 4d8d809695..7d8be97e2c 100644
--- a/packages/plugins/blocks/blocks-google-maps/src/blocks/GoogleMapsScript/GoogleMapsScript.json
+++ b/packages/plugins/blocks/blocks-google-maps/src/blocks/GoogleMapsScript/GoogleMapsScript.json
@@ -6,7 +6,22 @@
"properties": {
"apiKey": {
"type": "string",
- "description": "Your Goolge Maps API key."
+ "description": "Your Google Maps API key."
+ },
+ "libraries": {
+ "type": "array",
+ "description": "A list of Google libraries, see more.",
+ "items": {
+ "type": "string",
+ "enum": [
+ "drawing",
+ "geometry",
+ "journeySharing",
+ "localContext",
+ "places",
+ "visualization"
+ ]
+ }
}
}
},
@@ -21,6 +36,10 @@
"onMarkerClick": {
"type": "array",
"description": "Trigger actions when marker is clicked."
+ },
+ "onZoomChanged": {
+ "type": "array",
+ "description": "Trigger actions when the zoom on the map is changed."
}
}
}