@react-google-maps/api - npm Package Compare versions

Comparing version 1.2.0-alpha.7 to 1.2.0-alpha.8

lib/components/addons/MarkerClusterer.js

@@ -126,3 +126,3 @@ "use strict";
             helper_1.unregisterEvents(this.registeredEvents);
-            this.state.markerClusterer.overlayView.setMap(null);
+            this.state.markerClusterer.setMap(null);
         }
@@ -129,0 +129,0 @@ };

lib/components/drawing/Marker.d.ts

 /// <reference types="googlemaps" />
 import * as React from "react";
-import MarkerClusterer from "marker-clusterer-plus";
+import { Clusterer } from "@react-google-maps/marker-clusterer";
 interface MarkerState {
@@ -21,3 +21,3 @@ marker: google.maps.Marker | null;
     zIndex?: number;
-    clusterer?: MarkerClusterer;
+    clusterer?: Clusterer;
     noClustererRedraw?: boolean;
@@ -56,5 +56,5 @@ onClick?: (e: MouseEvent) => void;
     componentWillUnmount(): void;
-    render(): {};
+    render(): {} | null;
 }
 export default Marker;
 //# sourceMappingURL=Marker.d.ts.map

lib/components/drawing/Marker.js

@@ -164,3 +164,3 @@ "use strict";
     Marker.prototype.render = function () {
-        return this.props.children || React.createElement(React.Fragment, null);
+        return this.props.children || null;
     };
@@ -167,0 +167,0 @@ Marker.contextType = map_context_1.default;

lib/components/overlays/GroundOverlay.js

@@ -58,3 +58,5 @@ "use strict";
     GroundOverlay.prototype.componentDidMount = function () {
-        invariant(!this.props.url || !this.props.bounds, "For GroundOveray, url and bounds are passed in to constructor and are immutable after instantiated. This is the behavior of Google Maps JavaScript API v3 ( See https://developers.google.com/maps/documentation/javascript/reference#GroundOverlay) Hence, use the corresponding two props provided by `react-google-maps-api`, url and bounds. In some cases, you'll need the GroundOverlay component to reflect the changes of url and bounds. You can leverage the React's key property to remount the component. Typically, just `key={url}` would serve your need. See https://github.com/tomchentw/react-google-maps/issues/655");
+        console.log('this.props.url: ', this.props.url);
+        console.log('this.props.bounds: ', this.props.bounds);
+        invariant(!!this.props.url || !!this.props.bounds, "For GroundOveray, url and bounds are passed in to constructor and are immutable after instantiated. This is the behavior of Google Maps JavaScript API v3 ( See https://developers.google.com/maps/documentation/javascript/reference#GroundOverlay) Hence, use the corresponding two props provided by `react-google-maps-api`, url and bounds. In some cases, you'll need the GroundOverlay component to reflect the changes of url and bounds. You can leverage the React's key property to remount the component. Typically, just `key={url}` would serve your need. See https://github.com/tomchentw/react-google-maps/issues/655");
         var groundOverlay = new google.maps.GroundOverlay(this.props.url, this.props.bounds, __assign({}, this.props.options, { map: this.context }));
@@ -61,0 +63,0 @@ function setGroundOverlay() {

package.json

 {
   "name": "@react-google-maps/api",
-  "version": "1.2.0-alpha.7",
+  "version": "1.2.0-alpha.8",
   "description": "React.js Google Maps API integration",
@@ -78,3 +78,3 @@ "license": "MIT",
   "dependencies": {
-    "@react-google-maps/marker-clusterer": "1.2.0-alpha.6",
+    "@react-google-maps/marker-clusterer": "1.2.0-alpha.8",
     "@types/googlemaps": "3.30.19",
@@ -81,0 +81,0 @@ "@types/invariant": "^2.2.29",

src/components/addons/MarkerClusterer.md

@@ -18,3 +18,3 @@ # MarkerClusterer example
     <MarkerClusterer
-      imagePath="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
+      options={{imagePath:"https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"}}
     >
@@ -21,0 +21,0 @@ {

src/components/drawing/Circle.md

@@ -21,5 +21,11 @@ # Circle example
     <Circle
+      // optional
       onLoad={circle => {
-        console.log('circle: ', circle)
+        console.log('Circle onLoad circle: ', circle)
       }}
+      // optional
+      onUnmount={circle => {
+        console.log('Circle onUnmount circle: ', circle)
+      }}
+      // required
       center={{
@@ -29,2 +35,3 @@ lat: -3.745,
       }}
+      // required
       options={{
@@ -31,0 +38,0 @@ strokeColor: '#FF0000',

src/components/heatmap/HeatmapLayer.md

@@ -7,24 +7,7 @@ # HeatmapLayer example
 
-const heatmapData = [
-  new google.maps.LatLng(37.782, -122.447),
-  new google.maps.LatLng(37.782, -122.445),
-  new google.maps.LatLng(37.782, -122.443),
-  new google.maps.LatLng(37.782, -122.441),
-  new google.maps.LatLng(37.782, -122.439),
-  new google.maps.LatLng(37.782, -122.437),
-  new google.maps.LatLng(37.782, -122.435),
-  new google.maps.LatLng(37.785, -122.447),
-  new google.maps.LatLng(37.785, -122.445),
-  new google.maps.LatLng(37.785, -122.443),
-  new google.maps.LatLng(37.785, -122.441),
-  new google.maps.LatLng(37.785, -122.439),
-  new google.maps.LatLng(37.785, -122.437),
-  new google.maps.LatLng(37.785, -122.435)
-];
-
-const sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);
-
 <ScriptLoaded>
   <GoogleMap
+    // optional
     id="rectangle-example"
+    // required to set height and width either through mapContainerClassName, either through mapContainerStyle prop
     mapContainerStyle={{
@@ -34,12 +17,76 @@ height: "400px",
     }}
+    // required
     zoom={2.5}
-    center={sanFrancisco}
+    // required
+    center={{
+      lat: 37.774546,
+      lng: -122.433523
+    }}
   >
     <HeatmapLayer
+      // optional
       onLoad={heatmapLayer => {
-        console.log('heatmapLayer: ', heatmapLayer)
+        console.log('HeatmapLayer onLoad heatmapLayer: ', heatmapLayer)
       }}
-      options={{
-        data: heatmapData
+      // optional
+      onUnmount={heatmapLayer => {
+        console.log('HeatmapLayer onUnmount heatmapLayer: ', heatmapLayer)
       }}
+      // required
+      data={[{
+        lat: 37.782,
+        lng: -122.447,
+      },
+      {
+        lat: 37.782,
+        lng: -122.445
+      },
+      {
+        lat: 37.782,
+        lng: -122.443
+      },
+      {
+        lat: 37.782,
+        lng: -122.441
+      },
+      {
+        lat: 37.782,
+        lng: -122.439
+      },
+      {
+        lat: 37.782,
+        lng: -122.437
+      },
+      {
+        lat: 37.782,
+        lng: -122.435
+      },
+      {
+        lat: 37.785,
+        lng: -122.447
+      },
+      {
+        lat: 37.785,
+        lng: -122.445
+      },
+      {
+        lat: 37.785,
+        lng: -122.443
+      },
+      {
+        lat: 37.785,
+        lng: -122.441
+      },
+      {
+        lat: 37.785,
+        lng: -122.439
+      },
+      {
+        lat: 37.785,
+        lng: -122.437
+      },
+      {
+        lat: 37.785,
+        lng: -122.435
+      }]}
     />
@@ -46,0 +93,0 @@ </GoogleMap>

src/components/kml/KmlLayer.md

@@ -1,1 +0,23 @@
-# TODO KmlLayer example
+# KML Layer example
+
+```jsx
+const { GoogleMap, LoadScript, Circle } = require("../../");
+const ScriptLoaded = require("../../docs/ScriptLoaded").default;
+
+<ScriptLoaded>
+  <GoogleMap
+    id="circle-example"
+    mapContainerStyle={{
+      height: "400px",
+      width: "800px"
+    }}
+    zoom={7}
+    center={{
+      lat: -3.745,
+      lng: -38.523
+    }}
+  >
+    <KmlLayer />
+  </GoogleMap>
+</ScriptLoaded>
+```

src/components/overlays/GroundOverlay.md

@@ -1,1 +0,32 @@
-# TODO GroundOverlay example
+# Ground Overlay example
+
+```jsx
+const { GoogleMap, LoadScript, GroundOverlay } = require("../../");
+const ScriptLoaded = require("../../docs/ScriptLoaded").default;
+
+<ScriptLoaded>
+  <GoogleMap
+    id="circle-example"
+    mapContainerStyle={{
+      height: "400px",
+      width: "800px"
+    }}
+    zoom={13}
+    center={{
+      lat: 40.740,
+      lng: -74.18
+    }}
+  >
+    <GroundOverlay
+      key={'url'}
+      url='https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg'
+      bounds={{
+        north: 40.773941,
+        south: 40.712216,
+        east: -74.12544,
+        west: -74.22655
+      }}
+    />
+  </GoogleMap>
+</ScriptLoaded>
+```

No alert changes

Improved metrics

Total package byte prevSize

329708

increased by3.16%

Number of package files

175

increased by1.16%

Lines of code

7385

increased by0.08%

Dependency changes

• + Added@react-google-maps/marker-clusterer@1.2.0-alpha.8(transitive)

• - Removed@react-google-maps/marker-clusterer@1.2.0-alpha.6(transitive)

• Updated@react-google-maps/marker-clusterer@1.2.0-alpha.8