react-leaflet-google-v2

    6.0.0 • Public • Published

    react-leaflet-google-v2 npm versionnpm downloadsNode.js CIRelease

    Most recently tested with Leaflet React-Leaflet 3.0.5.

    GoogleMaps layer as React component for Leaflet build on top of React-Leaflet.

    The google maps layer is using the plugin from Leaflet.GridLayer.GoogleMutant

    Also it uses google-maps, a wrapper for asynchronously download Google Maps API in the browser.

    Example

    Complete example with react-leaflet

    To get started, to be able to run the example you have execute:

    npm install
    import React from 'react';
    import { MapContainer, TileLayer, LayersControl } from 'react-leaflet'
    import { GoogleLayer } from '../src'
    const { BaseLayer } = LayersControl;
    const key = 'your key goes here';
    const terrain = 'TERRAIN';
    const road = 'ROADMAP';
    const satellite = 'SATELLITE';
    const hydrid = 'HYBRID';
    //// Google's map type. Valid values are 'roadmap', 'satellite' or 'terrain'. 'hybrid' is not really supported.
    
    export default class GoogleExample extends React.Component {
    
      constructor() {
        super();
      }
    
      render() {
        return (
          <MapContainer center={[42.09618442380296, -71.5045166015625]} zoom={2} zoomControl={true}>
            <LayersControl position='topright'>
              <BaseLayer  name='OpenStreetMap.Mapnik'>
                <TileLayer  url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"/>
              </BaseLayer>
             <BaseLayer checked name='Google Maps Roads'>
                <GoogleLayer googlekey={key}  maptype={road} />
              </BaseLayer>
             <BaseLayer  name='Google Maps Terrain'>
                <GoogleLayer googlekey={key}  maptype={terrain} />
              </BaseLayer>
               <BaseLayer  name='Google Maps Satellite'>
                <GoogleLayer googlekey={key}  maptype={satellite} />
              </BaseLayer>
                <BaseLayer  name='Google Maps Hydrid'>
                <GoogleLayer googlekey={key}  maptype={hydrid}  libraries={['geometry', 'places']} />
              </BaseLayer>  
              <BaseLayer  name='Google Maps with Libraries'>
                <GoogleLayer googlekey={key}  maptype={hydrid}  libraries={['geometry', 'places']} />
              </BaseLayer>        
            </LayersControl>
          </MapContainer>
        )
      }
    }
    

    You can find the following example in the folder example. Run the above code by executing the following scripts in package.json, with the order they are stated underneath:

    1. build

    2. example

    Install

    npm i react-leaflet-google-v2

    DownloadsWeekly Downloads

    1,027

    Version

    6.0.0

    License

    MIT

    Unpacked Size

    7.33 MB

    Total Files

    25

    Last publish

    Collaborators

    • tageoforce