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

    2.0.4 • Public • Published

    Build Status Coverage Status npm version

    Google layer for React Leaflet v3 using leaflet.gridlayer.googlemutant, implemented with typescript.

    Requirements

    The current version of this library supports React Leaflet v3.
    If you are using React Leaflet v2, please use the previous version of this library. Please see the documentation here:
    https://github.com/aviklai/react-leaflet-google-layer/tree/v1

    Installation instructions:

    1. run npm install --save react-leaflet-google-layer
    2. By default this library uses the google-maps loader library to load the google maps api. If you want to use the script tag instead, you can Add google maps js api in your index.html:
      <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script>
      and set the prop useGoogMapsLoader to false.

    Usage example:

    import * as React from 'react';
    import { MapContainer } from 'react-leaflet';
    import ReactLeafletGoogleLayer from 'react-leaflet-google-layer';
    
    export const App = () => { 
      return (
          <MapContainer zoom={15} center={[45, 20]}>
            <ReactLeafletGoogleLayer apiKey='YOUR_API_KEY' type={'satellite'} />
          </MapContainer>
      );
    };
    
    

    Basic usage example

    https://codesandbox.io/s/basic-usage-with-react-leaflet-v3-vx8fd

    Options

    apiKey?: string
    useGoogMapsLoader?: boolean, default: true
    googleMapsAddLayers?: { name: 'BicyclingLayer' | 'TrafficLayer' | 'TransitLayer', options?: any }[]
    zIndex?: number

    From js-api-loader (https://github.com/googlemaps/js-api-loader) - googleMapsLoaderConf prop:

    • version?: string
    • client?: string
    • channel?: string
    • language?: string
    • region?: string
    • libraries?: string[]

    From googlemutant (https://gitlab.com/IvanSanchez/Leaflet.GridLayer.GoogleMutant):

    • minZoom?: number
    • maxZoom?: number
    • maxNativeZoom?: number
    • tileSize?: number | Point
    • subdomains?: string | string[]
    • errorTileUrl?: string
    • attribution?: string
    • opacity?: number
    • continuousWorld?: boolean
    • noWrap?: boolean
    • type?: 'roadmap' | 'satellite' | 'terrain' | 'hybrid'

    Install

    npm i react-leaflet-google-layer

    DownloadsWeekly Downloads

    6,041

    Version

    2.0.4

    License

    MIT

    Unpacked Size

    11.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • avikl