Supporting react leaflet v3 (#16)

* Supporting react-leaflet-v3

* Added default props

* google-maps loader version bump

* Updated the readme

* Fixed branch name

* Updated readme

Author: aviklai

README.md

@@ -2,9 +2,14 @@
 [![Coverage Status](https://coveralls.io/repos/github/aviklai/react-leaflet-google-layer/badge.svg?branch=master)](https://coveralls.io/github/aviklai/react-leaflet-google-layer?branch=master) 
 [![npm version](https://img.shields.io/npm/v/react-leaflet-google-layer.svg)](https://www.npmjs.com/package/react-leaflet-google-layer)
 
-Google layer for React-Leaflet using leaflet.gridlayer.googlemutant, implemented with typescript.
+Google layer for React-Leaflet v3 using leaflet.gridlayer.googlemutant, implemented with typescript.
 
-Installation instructions:
+## Requirements
+The current version of this library supports React Leaflet v3. <br/>
+If you are using React Leaflet v2, please use the previous version of this library. Please see the documentation here: <br/>
+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: <br/> 
 `<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script>` <br/>
@@ -14,38 +19,35 @@ and set the prop useGoogMapsLoader to `false`.
 Usage example:
 ```
 import * as React from 'react';
-import { Map } from 'react-leaflet';
+import { MapContainer } from 'react-leaflet';
 import ReactLeafletGoogleLayer from 'react-leaflet-google-layer';
 
-export class App extends React.Component { 
-  render() {    
-    return (
-      <Map zoom={15} center={[45, 20]}>
-        <ReactLeafletGoogleLayer googleMapsLoaderConf={{KEY: 'YOUR_API_KEY'}} type={'satellite'} />
-      </Map>
-    );
-  }
-}
+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/basicusage-qluec
+https://codesandbox.io/s/basic-usage-with-react-leaflet-v3-vx8fd
 
 ## Options
+apiKey?: string <br/>
 useGoogMapsLoader?: boolean, default: `true` <br/>
 googleMapsAddLayers?: { name: 'BicyclingLayer' | 'TrafficLayer' | 'TransitLayer', options?: any }[] <br/>
 zIndex?: number <br/>
 
 #### From google-maps (https://github.com/Carrooi/Js-GoogleMapsLoader) - googleMapsLoaderConf prop:
-* KEY?: string
-* URL?: string
-* LIBRARIES?: string[]
-* CLIENT?: string
-* CHANNEL?: string
-* LANGUAGE?: string
-* REGION?: string
-* VERSION?: string
-* WINDOW_CALLBACK_NAME?: string
+* version?: string
+* client?: string
+* channel?: string
+* language?: string
+* region?: string
+* libraries?: string[]
 
 #### From googlemutant (https://gitlab.com/IvanSanchez/Leaflet.GridLayer.GoogleMutant):
 * minZoom?: number

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-leaflet-google-layer",
-  "version": "1.1.5",
+  "version": "2.0.0",
   "description": "React leaflet wrapper of leaflet.gridlayer.googlemutant",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -32,7 +32,8 @@
     "Leaflet",
     "google",
     "googlemutant",
-    "typescript"
+    "typescript",
+    "react-leaflet-v3"
   ],
   "author": "",
   "license": "MIT",
@@ -41,36 +42,34 @@
   },
   "homepage": "https://github.com/aviklai/react-leaflet-google-layer#readme",
   "peerDependencies": {
-    "leaflet": "^1.3.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "react-leaflet": "^2.0.0"
+    "leaflet": "^1.5.0",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "react-leaflet": "^3.0.0"
   },
   "devDependencies": {
     "@types/jest": "^24.0.9",
     "@types/react": "^16.8.7",
     "@types/react-dom": "^16.8.2",
-    "@types/react-leaflet": "^2.2.0",
-    "@types/react-test-renderer": "^16.8.1",
+    "@types/react-test-renderer": "^16.9.3",
     "coveralls": "^3.0.3",
     "jest": "^24.3.0",
-    "leaflet": "^1.4.0",
+    "leaflet": "^1.5.0",
     "prettier": "^1.16.4",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
-    "react-leaflet": "^2.2.1",
-    "react-test-renderer": "^16.8.4",
+    "react-leaflet": "^3.0.0",
+    "react-test-renderer": "^16.14.0",
     "ts-jest": "^24.0.0",
     "tslint": "^5.13.1",
     "tslint-config-prettier": "^1.18.0",
-    "typescript": "^3.3.3333",
+    "typescript": "^4.0.5",
     "uglify-js": "^3.5.15"
   },
   "dependencies": {
-    "@types/google-maps": "^3.2.0",
-    "@types/leaflet": "^1.4.1",
+    "@types/leaflet": "^1.5.0",
     "@types/leaflet.gridlayer.googlemutant": "^0.4.5",
-    "google-maps": "^3.3.0",
+    "google-maps": "4.3.3",
     "leaflet.gridlayer.googlemutant": "^0.10.0"
   }
 }

package.json

@@ -1,16 +1,20 @@
 import * as React from 'react';
+import ReactDOM from 'react-dom';
 import ReactLeafletGoogleLayer from '../index';
-import { Map } from 'react-leaflet';
+import { MapContainer } from 'react-leaflet';
 import * as ReactTestUtils from 'react-dom/test-utils';
 
+
 test('ReactLeafletGoogleLayer', () => {
-  expect(ReactLeafletGoogleLayer);
+  expect(ReactLeafletGoogleLayer);   
 
-  const component = ReactTestUtils.renderIntoDocument(
-    <Map>
-      <ReactLeafletGoogleLayer />
-    </Map>
+  const dom = ReactTestUtils.renderIntoDocument(
+    <div>
+      <MapContainer>
+        <ReactLeafletGoogleLayer />
+      </MapContainer>
+    </div>
   ) as any;
-  expect(component.leafletElement._container).toBeDefined()  
-
+  const component = ReactDOM.findDOMNode(dom.childNodes[0]) as any;
+  expect(component).toBeInstanceOf(HTMLElement);
 });