JSPM – react-leaflet-google-layer@4.0.0

Package Exports

react-leaflet-google-layer
react-leaflet-google-layer/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-leaflet-google-layer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

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 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'
styles?: GoogleMutantStyle[]