npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@lowdefy/blocks-google-maps

v4.1.0

Published

Google Maps Blocks for Lowdefy.

Downloads

494

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

samtolmaysamtolmaygervwykgervwyk

Keywords

lowdefylowdefy blocksgooglemapslowdefy plugin

Readme

Lowdefy Google Maps Blocks

This is a Lowdefy blocks wrapper for this the Google Maps API.

To use this block, define a @googlemaps/react-wrapper. It currently implements:

Properties

  • apiKey: string: Your Google Maps API key.
  • libraries: array: List of Google libraries.
  • map: mapOptions: All map options.
    • center: { lat: number, lng: number }: A coordinate position object by which to center the map.
    • zoom: number: Map zoom level.
    • options: mapOptions: All other map options.
  • heatmap: heatmapOptions: Add a heatmap layer, see more heatmap options. 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.
    • 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.
      • position: { lat: number, lng: number }: Position of marker on map.
      • label: string: Label displayed on marker.
    • options: markerClustererOptions: All other marker clusterer options.
  • infoWindow: infoWindowOptions: All infoWindow options, see infoWindow options.
    • 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:
      • lat: latitudinal coordinate
      • lng: longitudinal coordinate
    • pixel:
      • x: x position on map block
      • y: y position on map block
  • 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
      • lng: longitudinal coordinate
    • 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. 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

  1. Add markers:

    - 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:
              lat: -25.344
              lng: 131.036
            label: One
          - position:
              lat: -25.348
              lng: 131.038
            label: Two

  2. Automatically bound map around marker positions when zoom and center map properties are left out:

    - 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:

    - 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:
                html:
                  _nunjucks:
                    template: |
                      <h1>Lat: {{ position.lat }} Lng: {{ position.lng }} </h1>
                    on:
                      _state: true

  4. Add markers with onClick event:

    - id: google_maps_script_4
  type: GoogleMapsScript
  properties:
    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:

    - 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:

    - 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

  7. Add a marker clusterer:

    - 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:

    - 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