zoom in onRegionChange + MapCircle components (#770)

* Fix zoom not triggering onRegionChange on web

* Update delay between for `onRegionChange`

* include zoom in `onRegionChange`

* `animateToLocation` parse coordinates as numbers if passed as strings

* Add MapCircle component

* Use `??` instead of `||`

Author: YoussefHenna

packages/core/src/hooks.ts

@@ -18,12 +18,12 @@ export const useDebounce = <T>(value: T, delay: number): T => {
   const [debouncedValue, setDebouncedValue] = React.useState(value);
 
   React.useEffect(() => {
-    const hanlder = setTimeout(() => {
+    const handler = setTimeout(() => {
       setDebouncedValue(value);
     }, delay);
 
     return () => {
-      clearTimeout(hanlder);
+      clearTimeout(handler);
     };
   }, [value, delay]);
 

packages/maps/package.json

@@ -42,6 +42,7 @@
     "@draftbit/ui": "48.4.11",
     "@react-google-maps/api": "~2.18.1",
     "@teovilla/react-native-web-maps": "^0.9.1",
+    "color": "^4.2.3",
     "lodash.isequal": "^4.5.0",
     "react-native-maps": "1.3.2"
   },

packages/maps/src/components/MapCircle.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { Platform } from "react-native";
+import { Circle as MapCircleComponent } from "./react-native-maps";
+import type { MapCircleProps as MapCircleComponentProps } from "react-native-maps";
+import { withTheme, DefaultTheme } from "@draftbit/ui";
+import Color from "color";
+
+export interface MapCircleProps
+  extends Omit<MapCircleComponentProps, "center"> {
+  latitude: number;
+  longitude: number;
+  theme: typeof DefaultTheme;
+}
+
+const MapCircle: React.FC<React.PropsWithChildren<MapCircleProps>> = ({
+  theme,
+  latitude,
+  longitude,
+  radius = 2000,
+  fillColor: fillColorProp = theme.colors.primary,
+  strokeColor = theme.colors.primary,
+  ...rest
+}) => {
+  // Web maps by default uses a lower opacity for the circle, native needs an extra step
+  const fillColor =
+    Platform.OS === "web"
+      ? fillColorProp
+      : Color(fillColorProp).alpha(0.3).rgb().string();
+
+  return (
+    <MapCircleComponent
+      center={{
+        latitude,
+        longitude,
+      }}
+      radius={radius}
+      fillColor={fillColor}
+      strokeColor={strokeColor}
+      {...rest}
+    />
+  );
+};
+
+export default withTheme(MapCircle);

packages/maps/src/components/MapView.tsx

@@ -12,7 +12,8 @@ import { MapViewContext, ZoomLocation } from "./MapViewCommon";
 import { MapMarkerClusterView } from "./marker-cluster";
 import { flattenReactFragments } from "@draftbit/ui";
 import type { MapMarker as MapMarkerRefType } from "react-native-maps";
-import { useDeepCompareMemo } from "./useDeepCompareMemo";
+import { useDeepCompareMemo, useDebounce } from "../utils";
+import MapCircle from "./MapCircle";
 
 export interface MapMarkerContextType {
   onMarkerPress: (marker: MapMarkerProps) => void;
@@ -26,8 +27,15 @@ export const MapMarkerContext = React.createContext<MapMarkerContextType>({
   getMarkerRef: () => undefined,
 });
 
+interface RegionWithZoom extends Region {
+  zoom: number;
+}
+
 export interface MapViewProps<T>
-  extends Omit<MapViewComponentProps, "onRegionChangeComplete" | "onPress"> {
+  extends Omit<
+    MapViewComponentProps,
+    "onRegionChangeComplete" | "onPress" | "onRegionChange"
+  > {
   apiKey: string;
   zoom?: number;
   latitude?: number;
@@ -37,7 +45,7 @@ export interface MapViewProps<T>
   markersData?: T[];
   keyExtractor?: (item: T, index: number) => string;
   renderItem?: ({ item, index }: { item: T; index: number }) => JSX.Element;
-  onRegionChange?: (region: Region) => void;
+  onRegionChange?: (region: RegionWithZoom) => void;
   onPress?: (latitude: number, longitude: number) => void;
 }
 
@@ -66,6 +74,7 @@ const MapViewF = <T extends object>({
   mapRef: React.RefObject<MapViewComponent>;
 }) => {
   const [currentRegion, setCurrentRegion] = React.useState<Region | null>(null);
+  const delayedRegionValue = useDebounce(currentRegion, 300);
 
   const markerRefs = React.useMemo<
     Map<string, React.RefObject<MapMarkerRefType>>
@@ -216,10 +225,28 @@ const MapViewF = <T extends object>({
     }
   }, [latitude, longitude, zoom, animateToLocation]);
 
+  // Use delayed/debounced value to prevent too many calls when map is being dragged
+  React.useEffect(() => {
+    const callOnRegionChange = async () => {
+      if (delayedRegionValue) {
+        const camera = await mapRef.current?.getCamera();
+        onRegionChange?.({ ...delayedRegionValue, zoom: camera?.zoom ?? 1 });
+      }
+    };
+
+    callOnRegionChange();
+    // onRegionChange excluded to prevent calling on every rerender when using an anonymous function (which is most common)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [delayedRegionValue]);
+
   const markers = React.useMemo(
     () => getChildrenForType(MapMarker),
     [getChildrenForType]
   );
+  const circles = React.useMemo(
+    () => getChildrenForType(MapCircle),
+    [getChildrenForType]
+  );
   const clusters = React.useMemo(
     () => getChildrenForType(MapMarkerCluster),
     [getChildrenForType]
@@ -255,9 +282,6 @@ const MapViewF = <T extends object>({
         showsCompass={showsCompass}
         initialCamera={camera}
         loadingEnabled={loadingEnabled}
-        onRegionChangeComplete={(region) => {
-          onRegionChange?.(region);
-        }}
         onRegionChange={setCurrentRegion}
         onPress={(event) => {
           const coordinate = event.nativeEvent.coordinate;
@@ -290,6 +314,8 @@ const MapViewF = <T extends object>({
             <React.Fragment key={index}>{cluster}</React.Fragment>
           ))}
         </MapMarkerContext.Provider>
+
+        {circles}
       </MapViewComponent>
     ),
     [
@@ -337,8 +363,8 @@ class MapView<T extends object> extends React.Component<
       heading: 0,
       pitch: 0,
       center: {
-        latitude,
-        longitude,
+        latitude: Number(latitude),
+        longitude: Number(longitude),
       },
     };
 

packages/maps/src/components/marker-cluster/MapMarkerClusterView.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { ViewStyle, StyleProp, Text, View } from "react-native";
 import { MapMarkerClusterContext } from "./MapMarkerClusterContext";
-import { withTheme } from "@draftbit/ui";
+import { withTheme, DefaultTheme } from "@draftbit/ui";
 
 interface MapMarkerClusterViewProps {
   zoomOnPress?: boolean;
@@ -27,36 +27,38 @@ const MapMarkerClusterView: React.FC<MapMarkerClusterViewProps> = ({
   );
 };
 
-export const DefaultMapMarkerClusterView = withTheme(({ theme }) => {
-  return (
-    <MapMarkerClusterView
-      renderItem={({ markerCount }) => (
-        <View
-          testID="default-map-marker-cluster-view"
-          style={{
-            backgroundColor: theme.colors.primary,
-            borderColor: theme.colors.background,
-            borderWidth: 1,
-            borderRadius: 15,
-            paddingHorizontal: 3,
-            minWidth: 30,
-            minHeight: 30,
-            alignItems: "center",
-            justifyContent: "center",
-          }}
-        >
-          <Text
+export const DefaultMapMarkerClusterView = withTheme(
+  ({ theme }: { theme: typeof DefaultTheme }) => {
+    return (
+      <MapMarkerClusterView
+        renderItem={({ markerCount }) => (
+          <View
+            testID="default-map-marker-cluster-view"
             style={{
-              color: theme.colors.background,
-              textAlign: "center",
+              backgroundColor: theme.colors.primary,
+              borderColor: theme.colors.background,
+              borderWidth: 1,
+              borderRadius: 15,
+              paddingHorizontal: 3,
+              minWidth: 30,
+              minHeight: 30,
+              alignItems: "center",
+              justifyContent: "center",
             }}
           >
-            {markerCount}
-          </Text>
-        </View>
-      )}
-    />
-  );
-});
+            <Text
+              style={{
+                color: theme.colors.background,
+                textAlign: "center",
+              }}
+            >
+              {markerCount}
+            </Text>
+          </View>
+        )}
+      />
+    );
+  }
+);
 
 export default MapMarkerClusterView;

packages/maps/src/components/react-native-maps/Circle.tsx

@@ -0,0 +1 @@
+export { Circle } from "react-native-maps";

packages/maps/src/components/react-native-maps/Circle.web.tsx

@@ -0,0 +1 @@
+export { Circle } from "@teovilla/react-native-web-maps";

packages/maps/src/components/react-native-maps/index.tsx

@@ -1,3 +1,4 @@
 export { default as default } from "./MapView";
 export { Callout } from "./Callout";
 export { Marker } from "./Marker";
+export { Circle } from "./Circle";

packages/maps/src/index.tsx

@@ -5,3 +5,4 @@ export {
   MapMarkerClusterView,
 } from "./components/marker-cluster";
 export { default as MapCallout } from "./components/MapCallout";
+export { default as MapCircle } from "./components/MapCircle";

…aps/src/components/useDeepCompareMemo.ts packages/maps/src/utils.tspackages/maps/src/components/useDeepCompareMemo.ts renamed to packages/maps/src/utils.ts packages/maps/src/components/useDeepCompareMemo.ts renamed to packages/maps/src/utils.ts

@@ -21,3 +21,19 @@ export function useDeepCompareMemo<T>(
   // eslint-disable-next-line react-hooks/exhaustive-deps
   return React.useMemo(factory, deps?.map(useDeepCompareMemoize));
 }
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = React.useState(value);
+
+  React.useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}