Google layer for React Leaflet v3 and v4 using leaflet.gridlayer.googlemutant, implemented with typescript.
Requirements
The current version of this library supports React Leaflet v3 and v4.
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:
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 (
);
};
`
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'
* styles?: GoogleMutantStyle[]