react-google-layer-leaflet
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.4 • Public • Published

    react-google-layer-leaflet

    All Contributors

    A React component to implement Google Map tile layers on a Leaflet map. And a helper utility to lazily load the Google Maps Api.

    NB: This package is still in alpha and not ready for use

    Installation

    Using yarn

    yarn add react-google-layer-leaflet

    or with NPM

     npm install react-google-layer-leaflet 

    Motivation

    There are a number of options for adding a google maps layer to leaflet. However most of them are un-maintained and no longer compatible with react-leaflet v3.x. If you want you could use react-leaflet-google-layer. react-google-layer-leaflet does two things differently and its really preference which should decide between the two. 1. Completely decoupling how the Google Maps JS API is loaded. 2. Being a simple wrapper for L.GridLayer.GoogleMutant and nothing else.

    Basic Usage

    import React, { useEffect } from 'react'
    import { MapContainer } from 'react-leaflet'
    import GoogleLayer, { googleMapsApiLoader } from 'react-google-layer-leaflet'
    
    const position = [51.505, -0.09]
    
    function MyMap(){
    
    useEffect(() => {
      // call this anytime after app start up. 
      googleMapsApiLoader({
        apiKey: 'YOUR_API_KEY,
        version: '3.43', // of the api to use. 3.43 was the latest at time of writing 
        id: 'google-maps-api', // ensures calling it multiple times will not load multiple script tags
      })
    },[])
    
    
    return (
      <MapContainer center={position} zoom={13} >
        <GoogleLayer type="satellite" />
    
        <Marker position={position}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>
    )
    }

    Contributors

    Thanks goes to these wonderful people (emoji key):


    Sean Rennie

    💻

    This project follows the all-contributors specification. Contributions of any kind welcome!

    Install

    npm i react-google-layer-leaflet

    DownloadsWeekly Downloads

    1

    Version

    0.2.4

    License

    MIT

    Unpacked Size

    11.6 kB

    Total Files

    15

    Last publish

    Collaborators

    • rennzie