mirror/lowdefy
2
0
Fork 0
mirror of https://github.com/lowdefy/lowdefy.git synced 2025-02-11 14:20:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(blocks-googl-maps): Update docs.

Browse Source
This commit is contained in:
Gervwyk 2022-06-13 09:47:13 +02:00
parent b3fa3a24c3
commit fb950b6621
1 changed files with 140 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

368
packages/plugins/blocks/blocks-google-maps/README.md
View File

@ -1,43 +1,23 @@
# Lowdefy Google Maps Blocks
This repository provides Lowdefy blocks for the [Google Maps API](https://developers.google.com/maps/documentation/javascript/overview) is a feature rich javascript map API that lets you customize maps with your own content and imagery for display on web pages and mobile devices.
This is a Lowdefy blocks wrapper for this the [Google Maps API](https://developers.google.com/maps/documentation/javascript/overview).
[google-map-react](https://github.com/google-map-react/google-map-react) is a component written over a small set of the [Google Maps API](https://developers.google.com/maps/).
## Blocks
To use this block, define a [Custom Block type](https://docs.lowdefy.com/custom-blocks) in your Lowdefy app:
```yaml
name: my-app
lowdefy: 3.22.0
types:
GoogleMaps:
url: https://blocks-cdn.lowdefy.com/v3.22.0/blocks-google-maps/meta/GoogleMaps.json
# ...
```
### Block type Urls
- `GoogleMaps`: https://blocks-cdn.lowdefy.com/v3.22.0/blocks-google-maps/meta/GoogleMaps.json
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
- `bootstrapURLKeys`: { key: '', language: 'en', region: 'en', libraries: ['places'], ...otherUrlParams, } If you want to include additional libraries to load with the maps api, indicate them in the libraries property of the bootstrapURLKeys object.
- `center`: Can be set to [lat, lng] or { lat: lat, lng: lng}. A position object for the center.
- `debounced`: Defaults to true. Whether map events are debounced.
- `defaultCenter`: Can be set to [lat, lng] or { lat: lat, lng: lng}. A position object for the center.
- `defaultZoom`: Map zoom level.
- `heatmap`: To use the heatmap layer, add visualization to the libraries property array on bootstrapURLKeys and provide the data & configuration for the heatmap in heatmap as props. If you have multiple maps in your project and require a heatmap layer in at least one of them, provide libraries:['visualization'] to all of them.
- `height`: The height of the map block.
- `hoverDistance`: Defaults to 30. Map hover distance.
- `layerTypes`: Examples ['TrafficLayer', 'TransitLayer']. The layer types to be included in the map.
- `mapOptions`: Custom map options.
- `margin`: Map margin.
- `markers`: A list of Markers with properties, `map` is provided by the default by the block, see [Javascript API Markers](https://developers.google.com/maps/documentation/javascript/markers) for configuration details.
- `apiKey: string`: Your Goolge Maps API key.
- `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.
- `style: cssObject`: A style object applied to the map element.
- `markers: markerOptions[]`: A list of Markers with properties, `map` is provided by the default by the block, see [Javascript API Markers](https://developers.google.com/maps/documentation/javascript/markers) for configuration details.
- `resetBoundsOnResize`: Default: false, When true this will reset the map bounds if the parent resizes.
- `style`: Custom map css properties to apply to map block.
- `zoom`: Map zoom level.
### Events
@ -48,6 +28,9 @@ types:
- `maps`: has functions removed
- `x`: position on map block
- `y`: position on map block
<!-- TODO:
- `onClickMarker`: Trigger onClick actions when a marker is clicked, returns `_event` object:
- `domEvent`: event object
- `latLng`:
@ -57,63 +40,44 @@ types:
- `pixel`:
- `x`
- `y`
- `onDrag`: Trigger onDrag actions when a map is dragged, returns `_event` object:
- `maps`: has functions removed
- `onDragEnd`: Trigger onDragEnd actions when a map is finished being dragged, returns `_event` object:
- `maps`: has functions removed
- `onGoogleApiLoaded` Trigger onGoogleApiLoaded actions when the map api is loaded, returns `_event` object:
- `maps`: has functions removed
- `onMapTypeIdChange`: Trigger onMapTypeIdChange actions when the map type is changed, returns `_event` object:
- `maps`: has functions removed
- `type`: the map
- `onTilesLoaded`: Trigger onTilesLoaded actions when the map tiles are loaded, returns `_event` object:
- `maps`: has functions removed
- `onZoomAnimationStart`: Trigger onZoomAnimationStart actions when the map is zoomed, returns `_event` object:
- `maps`: has functions removed
- `zoom`: map zoom level
- `onZoomAnimationEnd`: Trigger onZoomAnimationEnd actions after the map is zoomed, returns `_event` object:
- `maps`: has functions removed
- `zoom`: map zoom level
### Methods
- `addMarker`: Accepts a single parameter object `marker` with marker properties.
- `removeMarker`: Accepts a single parameter object `marker` with position property.
- `fitBounds`: Accepts a two parameters, `bounds` and `mapSize`.
- `addHeatmap`: Accepts a single parameter object `heatmap` with heatmap properties.
- `toggleHeatmap`: Doesn't require any parameters.
-->
## Examples
1. Add a list of markers, one with a tooltip:
```yaml
- id: google_maps
type: GoogleMaps
properties:
bootstrapURLKeys:
key: ''
libraries: ['visualization']
mapOptions:
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
tooltip: '<div style="color:blue">Hello World!</div>'
- position:
lat: -25.348
lng: 131.038
label: Two
```
```yaml
- id: google_maps
type: GoogleMaps
properties:
apiKey: 'YOUR_API_KEY'
map:
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
tooltip: '<div style="color:blue">Hello World!</div>'
- position:
lat: -25.348
lng: 131.038
label: Two
```
<!-- TODO:
2. Add a marker:
```yaml
@ -218,155 +182,103 @@ types:
- width: 640 # Map width in pixels
height: 380 # Map height in pixels
```
-->
5. Add a heatmap:
```yaml
- id: google_maps
type: GoogleMaps
properties:
bootstrapURLKeys:
key: ''
libraries: ['visualization']
mapOptions:
panControl: true
zoomControl: true
fullscreenControl: true
zoom: 10
center:
lat: 34.0522
lng: -118.2437
heatmap:
positions:
- 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. Add a heatmap after api has loaded:
```yaml
- id: google_maps
type: GoogleMaps
properties:
bootstrapURLKeys:
key: ''
libraries: ['visualization']
mapOptions:
panControl: true
zoomControl: true
fullscreenControl: true
zoom: 10
center:
lat: 34.0522
lng: -118.2437
events:
onMountAsync:
- id: add_heatmap
type: CallMethod
params:
blockId: google_maps
method: addHeatmap
args:
- data:
- location:
lat: 34.091158
lng: -118.2795188
weight: 1
- location:
lat: 34.0771192
lng: -118.2587199
weight: 2
- location:
lat: 34.0828183
lng: -118.3241586
weight: 1
radius: 20
opacity: 1
```
7. Toggle a heatmap
```yaml
- id: google_maps
type: GoogleMaps
properties:
bootstrapURLKeys:
key: ''
libraries: ['visualization']
mapOptions:
panControl: true
zoomControl: true
fullscreenControl: true
zoom: 10
center:
lat: 34.0522
lng: -118.2437
events:
onClick:
- id: toggle_heatmap
type: CallMethod
params:
blockId: google_maps
method: toggleHeatmap
```
```yaml
- id: google_maps
type: GoogleMaps
properties:
apiKey: 'YOUR_API_KEY'
map:
disableDefaultUI: true
zoom: 14
center:
lat: -25.344
lng: 131.036
heatmap:
positions:
- location:
lat: 34.091158
lng: -118.2795188
weight: 1
- location:
lat: 34.0771192
lng: -118.2587199
weight: 2
- location:
lat: 34.083527
lng: -118.370157
weight: 1
- location:
lat: 34.0951843
lng: -118.283107
weight: 2
- location:
lat: 34.1033401
lng: -118.2875469
weight: 4
- location:
lat: 34.035798
lng: -118.251288
weight: 2
- location:
lat: 34.0776068
lng: -118.2646526
weight: 3
- location:
lat: 34.0919263
lng: -118.2820544
weight: 3
- location:
lat: 34.0568525
lng: -118.3646369
weight: 3
- location:
lat: 34.0285781
lng: -118.4115541
weight: 0
- lat: 34.017339
lng: -118.278469
weight: 0
- location:
lat: 34.0764288
lng: -118.3661624
weight: 4
- location:
lat: 33.9925942
lng: -118.4232475
weight: 4
- location:
lat: 34.0764345
lng: -118.3730332
weight: 3
- location:
lat: 34.093981
lng: -118.327638
weight: 0
- location:
lat: 34.056385
lng: -118.2508724
weight: 1
- location:
lat: 34.107701
lng: -118.2667943
weight: 4
- location:
lat: 34.0450139
lng: -118.2388682
weight: 4
- location:
lat: 34.1031997
lng: -118.2586152
weight: 1
- location:
lat: 34.0828183
lng: -118.3241586
weight: 1
options:
radius: 20
opacity: 1
```