@vis.gl/react-google-maps - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

dist/components/advanced-marker.d.ts

@@ -14,3 +14,3 @@ /// <reference types="google.maps" />
 };
-export type AdvancedMarkerProps = PropsWithChildren<google.maps.marker.AdvancedMarkerElementOptions & AdvancedMarkerEventProps & {
+export type AdvancedMarkerProps = PropsWithChildren<Omit<google.maps.marker.AdvancedMarkerElementOptions, 'gmpDraggable'> & AdvancedMarkerEventProps & {
     /**
@@ -21,5 +21,6 @@ * className to add a class to the advanced marker element
     className?: string;
+    draggable?: boolean;
 }>;
 export type AdvancedMarkerRef = google.maps.marker.AdvancedMarkerElement | null;
-export declare const AdvancedMarker: React.ForwardRefExoticComponent<google.maps.marker.AdvancedMarkerElementOptions & AdvancedMarkerEventProps & {
+export declare const AdvancedMarker: React.ForwardRefExoticComponent<Omit<google.maps.marker.AdvancedMarkerElementOptions, "gmpDraggable"> & AdvancedMarkerEventProps & {
     /**
@@ -30,2 +31,3 @@ * className to add a class to the advanced marker element
     className?: string | undefined;
+    draggable?: boolean | undefined;
 } & {
@@ -32,0 +34,0 @@ children?: React.ReactNode;

dist/index.d.ts

@@ -5,2 +5,3 @@ export * from './components/advanced-marker';
 export * from './components/map';
+export * from './components/map-control';
 export * from './components/marker';
@@ -7,0 +8,0 @@ export * from './components/pin';

dist/index.umd.js

@@ -840,3 +840,3 @@ (function (global, factory) {
     var map = (_useContext = React.useContext(GoogleMapsContext)) == null ? void 0 : _useContext.map;
-    var markersLibraryReady = useMapsLibrary('marker');
+    var markerLibrary = useMapsLibrary('marker');
     var children = props.children,
@@ -849,3 +849,3 @@ className = props.className,
       collisionBehavior = props.collisionBehavior,
-      gmpDraggable = props.gmpDraggable,
+      draggable = props.draggable,
       position = props.position,
@@ -857,4 +857,4 @@ title = props.title,
     React.useEffect(function () {
-      if (!map || !markersLibraryReady) return;
-      var newMarker = new google.maps.marker.AdvancedMarkerElement();
+      if (!map || !markerLibrary) return;
+      var newMarker = new markerLibrary.AdvancedMarkerElement();
       newMarker.map = map;
@@ -874,3 +874,3 @@ setMarker(newMarker);
       };
-    }, [map, markersLibraryReady, numChilds]);
+    }, [map, markerLibrary, numChilds]);
     // bind all marker events
@@ -884,3 +884,3 @@ React.useEffect(function () {
       if (onDragEnd) marker.addListener('dragend', onDragEnd);
-      if ((onDrag || onDragStart || onDragEnd) && !gmpDraggable) {
+      if ((onDrag || onDragStart || onDragEnd) && !draggable) {
         console.warn('You need to set the marker to draggable to listen to drag-events.');
@@ -891,3 +891,3 @@ }
       };
-    }, [marker, gmpDraggable, onClick, onDragStart, onDrag, onDragEnd]);
+    }, [marker, draggable, onClick, onDragStart, onDrag, onDragEnd]);
     // update other marker props when changed
@@ -897,7 +897,7 @@ React.useEffect(function () {
       if (position !== undefined) marker.position = position;
-      if (gmpDraggable !== undefined) marker.gmpDraggable = gmpDraggable;
+      if (draggable !== undefined) marker.gmpDraggable = draggable;
       if (collisionBehavior !== undefined) marker.collisionBehavior = collisionBehavior;
       if (zIndex !== undefined) marker.zIndex = zIndex;
       if (typeof title === 'string') marker.title = title;
-    }, [marker, position, gmpDraggable, collisionBehavior, zIndex, title]);
+    }, [marker, position, draggable, collisionBehavior, zIndex, title]);
     return [marker, contentContainer];
@@ -974,2 +974,74 @@ }
 
+  /**
+   * Retrieves a map-instance from the context. This is either an instance
+   * identified by id or the parent map instance if no id is specified.
+   * Returns null if neither can be found.
+   */
+  var useMap = function useMap(id) {
+    if (id === void 0) {
+      id = null;
+    }
+    var _ref = React.useContext(APIProviderContext) || {},
+      _ref$mapInstances = _ref.mapInstances,
+      mapInstances = _ref$mapInstances === void 0 ? {} : _ref$mapInstances;
+    var _ref2 = React.useContext(GoogleMapsContext) || {},
+      map = _ref2.map;
+    // if an id is specified, the corresponding map or null is returned
+    if (id !== null) return mapInstances[id] || null;
+    // otherwise, return the closest ancestor
+    if (map) return map;
+    // finally, return the default map instance
+    return mapInstances['default'] || null;
+  };
+
+  /**
+   * Copy of the `google.maps.ControlPosition` constants.
+   * They have to be duplicated here since we can't wait for the maps API to load to be able to use them.
+   */
+  exports.ControlPosition = void 0;
+  (function (ControlPosition) {
+    ControlPosition[ControlPosition["BLOCK_END_INLINE_CENTER"] = 0] = "BLOCK_END_INLINE_CENTER";
+    ControlPosition[ControlPosition["BLOCK_END_INLINE_END"] = 1] = "BLOCK_END_INLINE_END";
+    ControlPosition[ControlPosition["BLOCK_END_INLINE_START"] = 2] = "BLOCK_END_INLINE_START";
+    ControlPosition[ControlPosition["BLOCK_START_INLINE_CENTER"] = 3] = "BLOCK_START_INLINE_CENTER";
+    ControlPosition[ControlPosition["BLOCK_START_INLINE_END"] = 4] = "BLOCK_START_INLINE_END";
+    ControlPosition[ControlPosition["BLOCK_START_INLINE_START"] = 5] = "BLOCK_START_INLINE_START";
+    ControlPosition[ControlPosition["BOTTOM_CENTER"] = 6] = "BOTTOM_CENTER";
+    ControlPosition[ControlPosition["BOTTOM_LEFT"] = 7] = "BOTTOM_LEFT";
+    ControlPosition[ControlPosition["BOTTOM_RIGHT"] = 8] = "BOTTOM_RIGHT";
+    ControlPosition[ControlPosition["INLINE_END_BLOCK_CENTER"] = 9] = "INLINE_END_BLOCK_CENTER";
+    ControlPosition[ControlPosition["INLINE_END_BLOCK_END"] = 10] = "INLINE_END_BLOCK_END";
+    ControlPosition[ControlPosition["INLINE_END_BLOCK_START"] = 11] = "INLINE_END_BLOCK_START";
+    ControlPosition[ControlPosition["INLINE_START_BLOCK_CENTER"] = 12] = "INLINE_START_BLOCK_CENTER";
+    ControlPosition[ControlPosition["INLINE_START_BLOCK_END"] = 13] = "INLINE_START_BLOCK_END";
+    ControlPosition[ControlPosition["INLINE_START_BLOCK_START"] = 14] = "INLINE_START_BLOCK_START";
+    ControlPosition[ControlPosition["LEFT_BOTTOM"] = 15] = "LEFT_BOTTOM";
+    ControlPosition[ControlPosition["LEFT_CENTER"] = 16] = "LEFT_CENTER";
+    ControlPosition[ControlPosition["LEFT_TOP"] = 17] = "LEFT_TOP";
+    ControlPosition[ControlPosition["RIGHT_BOTTOM"] = 18] = "RIGHT_BOTTOM";
+    ControlPosition[ControlPosition["RIGHT_CENTER"] = 19] = "RIGHT_CENTER";
+    ControlPosition[ControlPosition["RIGHT_TOP"] = 20] = "RIGHT_TOP";
+    ControlPosition[ControlPosition["TOP_CENTER"] = 21] = "TOP_CENTER";
+    ControlPosition[ControlPosition["TOP_LEFT"] = 22] = "TOP_LEFT";
+    ControlPosition[ControlPosition["TOP_RIGHT"] = 23] = "TOP_RIGHT";
+  })(exports.ControlPosition || (exports.ControlPosition = {}));
+  var MapControl = function MapControl(_ref) {
+    var children = _ref.children,
+      position = _ref.position;
+    var controlContainer = React.useMemo(function () {
+      return document.createElement('div');
+    }, []);
+    var map = useMap();
+    React.useEffect(function () {
+      if (!map) return;
+      var controls = map.controls[position];
+      controls.push(controlContainer);
+      return function () {
+        var index = controls.getArray().indexOf(controlContainer);
+        controls.removeAt(index);
+      };
+    }, [map, position]);
+    return reactDom.createPortal(children, controlContainer);
+  };
+
   var _excluded = ["onClick", "onDrag", "onDragStart", "onDragEnd", "onMouseOver", "onMouseOut"];
@@ -1079,24 +1151,2 @@ function useMarker(props) {
   /**
-   * Retrieves a map-instance from the context. This is either an instance
-   * identified by id or the parent map instance if no id is specified.
-   * Returns null if neither can be found.
-   */
-  var useMap = function useMap(id) {
-    if (id === void 0) {
-      id = null;
-    }
-    var _ref = React.useContext(APIProviderContext) || {},
-      _ref$mapInstances = _ref.mapInstances,
-      mapInstances = _ref$mapInstances === void 0 ? {} : _ref$mapInstances;
-    var _ref2 = React.useContext(GoogleMapsContext) || {},
-      map = _ref2.map;
-    // if an id is specified, the corresponding map or null is returned
-    if (id !== null) return mapInstances[id] || null;
-    // otherwise, return the closest ancestor
-    if (map) return map;
-    // finally, return the default map instance
-    return mapInstances['default'] || null;
-  };
-
-  /**
    * Hook to get a Google Maps Places Autocomplete instance
@@ -1312,2 +1362,3 @@ * monitoring an input field
   exports.Map = Map;
+  exports.MapControl = MapControl;
   exports.Marker = Marker;
@@ -1314,0 +1365,0 @@ exports.Pin = Pin;

package.json

 {
   "name": "@vis.gl/react-google-maps",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "React components and hooks for Google Maps.",
@@ -8,2 +8,9 @@ "source": "src/index.ts",
   "module": "dist/index.modern.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.modern.mjs",
+      "require": "./dist/index.umd.js"
+    },
+    "./examples.css": "./dist/examples.css"
+  },
   "types": "dist/index.d.ts",
@@ -20,5 +27,6 @@ "repository": {
   "scripts": {
-    "clean": "rm -rf ./dist",
+    "clean": "rm -rf ./dist && mkdir ./dist",
     "build": "npm-run-all clean -p build:*",
     "start": "run-p start:*",
+    "build:examples": "cp ./examples/examples.css dist",
     "build:microbundle": "microbundle -o dist/index.js -f modern,umd --globals react=React,react-dom=ReactDOM --jsx React.createElement --jsxFragment React.Fragment --no-compress --tsconfig tsconfig.build.json",
@@ -71,4 +79,5 @@ "start:microbundle": "microbundle watch -o dist/index.js -f modern,umd --globals react=React,react-dom=ReactDOM --jsx React.createElement --jsxFragment React.Fragment --no-compress --tsconfig tsconfig.build.json",
     "ts-jest": "^29.0.5",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "vite": "^4.5.0"
   }
 }

src/index.ts

@@ -5,2 +5,3 @@ export * from './components/advanced-marker';
 export * from './components/map';
+export * from './components/map-control';
 export * from './components/marker';
@@ -7,0 +8,0 @@ export * from './components/pin';

No alert changes

Improved metrics

Total package byte prevSize

347152

5.85%

Number of package files

68

6.25%

Lines of code

4946

5.55%

Worsened metrics

Dev dependency count

23

4.55%

No dependency changes