Google layer for React Leaflet v3 and v4 using leaflet.gridlayer.googlemutant, implemented with typescript.
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
- run
npm install --save react-leaflet-google-layer
- 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 tofalse
.
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>
);
};
https://codesandbox.io/s/basic-usage-with-react-leaflet-v3-vx8fd
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[]