@react-native-ohos/react-native-map-clustering 3.4.1-rc.1 → 3.5.0-rc.1

package/example/react-native.config.js

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+module.exports = {
+  project: {
+  },
+  assets: ['./assets/fonts/'],
+};

package/example/scripts/create-build-profile.js

@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+
+const fs = require('fs');
+const JSON5 = require('json5');
+const path = require('path');
+
+const templatePath = path.join(
+  __dirname,
+  '..',
+  'harmony',
+  'build-profile.template.json5',
+);
+const existingProfilePath = path.join(
+  __dirname,
+  '..',
+  'harmony',
+  'build-profile.json5',
+);
+
+if (fs.existsSync(existingProfilePath)) {
+  let existingProfile = JSON5.parse(
+    fs.readFileSync(existingProfilePath, 'utf-8'),
+  );
+  let template = JSON5.parse(fs.readFileSync(templatePath, 'utf-8'));
+  let signingConfigs =
+    existingProfile.app && existingProfile.app.signingConfigs;
+
+  existingProfile = {...template};
+
+  if (signingConfigs) {
+    existingProfile.app.signingConfigs = signingConfigs;
+  }
+
+  fs.writeFileSync(
+    existingProfilePath,
+    JSON5.stringify(existingProfile, null, 2),
+  );
+} else {
+  // File doesn't exist, create a copy from the template
+  fs.copyFileSync(templatePath, existingProfilePath);
+}

package/example/src/App.tsx

@@ -0,0 +1,186 @@
+import React, { useRef, useState } from 'react';
+import {
+  SafeAreaView,
+  StatusBar,
+  Text,
+  View,
+  Dimensions,
+  Button,
+  ScrollView
+} from 'react-native';
+import { NavigationContainer, Page } from './Navigation';
+import { PortalProvider } from '@gorhom/portal';
+import MapView from 'react-native-map-clustering';
+import { Marker } from 'react-native-maps';
+const { width, height } = Dimensions.get('window');
+
+
+const INITIAL_REGION = {
+  latitude: 52.5,
+  longitude: 19.2,
+  latitudeDelta: 8.5,
+  longitudeDelta: 8.5,
+};
+const markers = [
+  { coordinate: { latitude: 52.4, longitude: 18.7 } },
+  { coordinate: { latitude: 52.1, longitude: 18.4 } },
+  { coordinate: { latitude: 52.6, longitude: 18.3 } },
+  { coordinate: { latitude: 51.6, longitude: 18.0 } },
+  { coordinate: { latitude: 53.1, longitude: 18.8 } },
+  { coordinate: { latitude: 52.9, longitude: 19.4 } },
+  { coordinate: { latitude: 52.2, longitude: 21 } },
+  { coordinate: { latitude: 52.4, longitude: 21 } },
+  { coordinate: { latitude: 51.8, longitude: 20 } }
+]
+
+
+
+const App = () => {
+  const [onPressText, setOnPressText] = useState('');
+  const [onRegionChangeCompleteText, setOnRegionChangeCompleteText] = useState('');
+  const [onMarkerText, setOnMarkerText] = useState('');
+  const [rrefText, setRrefText] = useState('');
+  const rref = useRef(null);
+  const comList = [
+    {
+      name: 'onClusterPress',
+      prop: {
+        onClusterPress: (cluster, markers) => {
+          setOnPressText(`onClusterPress触发, cluster:${JSON.stringify(cluster)},markers:聚合数组长度${markers?.length}`);
+        }
+      },
+      text: onPressText
+    },
+    {
+      name: 'width: 200',
+      prop: { width: 200 },
+    },
+    {
+      name: 'width: 250',
+      prop: { width: 250 },
+    },
+    {
+      name: 'radius: 20',
+      prop: { radius: 20 },
+    },
+    {
+      name: 'radius: 200',
+      prop: { radius: 200 },
+    },
+    {
+      name: 'extent: 512',
+      prop: { extent: 512 },
+    },
+    {
+      name: 'extent: 112',
+      prop: { extent: 112 },
+    },
+    {
+      name: 'minZoom: 4',
+      prop: { minZoom: 4 },
+    },
+    {
+      name: 'minZoom: 1',
+      prop: { minZoom: 1 },
+    },
+    {
+      name: 'minPoints: 2',
+      prop: { minPoints: 2 },
+    },
+    {
+      name: 'minPoints: 4',
+      prop: { minPoints: 4 },
+    },
+    {
+      name: 'preserveClusterPressBehavior: false',
+      prop: { preserveClusterPressBehavior: false },
+    },
+    {
+      name: 'preserveClusterPressBehavior: true',
+      prop: { preserveClusterPressBehavior: true },
+    },
+    {
+      name: 'onRegionChangeComplete',
+      prop: {
+        onRegionChangeComplete: (region, markers) => {
+          setOnRegionChangeCompleteText(`onRegionChangeComplete触发, region:${JSON.stringify(region)},markers:聚合数组长度${markers?.length}`);
+        }
+      },
+      text: onRegionChangeCompleteText
+    },
+    {
+      name: 'onMarkersChange',
+      prop: {
+        onMarkersChange: (markers) => {
+          setOnMarkerText(`onMarkersChange触发, markers:聚合数组长度${markers?.length}`);
+        }
+      },
+      text: onMarkerText
+    },
+    {
+      name: 'superClusterRef',
+      prop: { superClusterRef: rref },
+      btn: () => {
+        setRrefText(`superClusterRef触发, superClusterRef.current.options:${JSON.stringify(rref?.current.options)}`);
+      },
+      text: rrefText
+    },
+    {
+      name: 'clusteringEnabled: false',
+      prop: { clusteringEnabled: false },
+    },
+    {
+      name: 'clusteringEnabled: true',
+      prop: { clusteringEnabled: true },
+    }
+  ]
+  return (
+    <View style={{ backgroundColor: 'black' }}>
+      <StatusBar barStyle="light-content" />
+      <SafeAreaView>
+        <NavigationContainer>
+          <PortalProvider>
+            {comList.map((com: any) => {
+              return (
+                <Page
+                  key={com.name}
+                  name={`${com.name}`}>
+                        <View style={{ height: height - 315 }}>
+                          <MapView
+                            initialRegion={INITIAL_REGION}
+                            style={{ flex: 1 }}
+                            //@ts-ignore
+                            clusterDistance={100}
+                            {...com.prop}
+                          >
+                            {markers.map((marker, idx) => <Marker key={idx} coordinate={marker.coordinate} />)}
+                          </MapView>
+                          {com?.text && <Text style={{ color: "red" }}>{com?.text}</Text>}
+                          {com?.btn && <Button color="red" title={com.name} onPress={com?.btn} />}
+                        </View>
+                </Page>
+              );
+            })}
+          </PortalProvider>
+        </NavigationContainer>
+      </SafeAreaView>
+    </View>
+  );
+}
+export default App;
+
+export const displayName = 'react-native-map-clustering';
+export const framework = 'React';
+export const category = 'UI';
+export const title = 'react-native-map-clustering';
+export const documentationURL = 'https://github.com/tomekvenits/react-native-map-clustering';
+export const description = 'React Native Map Clustering';
+
+export const examples = [
+  {
+    title: 'react-native-map-clustering',
+    render: function () {
+      return <App />;
+    },
+  },
+];

package/example/src/Navigation.tsx

@@ -0,0 +1,163 @@
+import React, {useEffect} from 'react';
+import {
+  FlatList,
+  Image,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+export const PALETTE = {
+  REACT_CYAN_LIGHT: 'hsl(193, 95%, 68%)',
+  REACT_CYAN_DARK: 'hsl(193, 95%, 30%)',
+};
+
+const NavigationContext = React.createContext<
+  | {
+      currentPageName: string;
+      navigateTo: (pageName: string) => void;
+      registerPageName: (pageName: string) => void;
+      registeredPageNames: string[];
+    }
+  | undefined
+>(undefined);
+
+export function NavigationContainer({
+  initialPage = 'INDEX',
+  hasHeader = true,
+  children,
+}: {
+  initialPage?: string;
+  children: any;
+  hasHeader?: boolean
+}) {
+  const [currentPageName, setCurrentPageName] = React.useState(initialPage);
+  const [registeredPageNames, setRegisteredPageNames] = React.useState<
+    string[]
+  >([]);
+
+  return (
+    <NavigationContext.Provider
+      value={{
+        currentPageName,
+        navigateTo: setCurrentPageName,
+        registerPageName: (pageName: string) => {
+          setRegisteredPageNames(pageNames => {
+            if (pageNames.includes(pageName)) {
+              return pageNames;
+            }
+            return [...pageNames, pageName];
+          });
+        },
+        registeredPageNames,
+      }}>
+      <View style={{width: '100%', height: '100%', flexDirection: 'column'}}>
+        <Page name="INDEX">
+        <IndexPage hasHeader={hasHeader} />
+        </Page>
+        {children}
+      </View>
+    </NavigationContext.Provider>
+  );
+}
+
+export function useNavigation() {
+  return React.useContext(NavigationContext)!;
+}
+
+export function Page({name, children}: {name: string; children: any}) {
+  const {currentPageName, navigateTo, registerPageName} = useNavigation();
+
+  useEffect(() => {
+    if (name !== 'INDEX') {
+      registerPageName(name);
+    }
+  }, [name]);
+
+  return name === currentPageName ? (
+    <View style={{width: '100%', height: '100%'}}>
+      {name !== 'INDEX' && (
+        <View style={{backgroundColor: PALETTE.REACT_CYAN_DARK}}>
+          <TouchableOpacity
+            onPress={() => {
+              navigateTo('INDEX');
+            }}>
+            <Text
+              style={[styles.buttonText, {color: PALETTE.REACT_CYAN_LIGHT}]}>
+              {'‹ Back'}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      )}
+      <View style={{width: '100%', flex: 1}}>{children}</View>
+    </View>
+  ) : null;
+}
+
+export function IndexPage({ hasHeader }: { hasHeader: boolean }) {
+  const {navigateTo, registeredPageNames} = useNavigation();
+
+  return (
+    <FlatList
+      data={registeredPageNames}
+      ListHeaderComponent={
+        hasHeader ? <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingHorizontal: 16,
+            paddingVertical: 16,
+          }}>
+          <Text
+            style={{
+              color: '#EEE',
+              fontSize: 24,
+              fontWeight: 'bold',
+              padding: 16,
+            }}>
+            RN Map Clustering Capi Tester
+            {'rnohArchitecture' in Platform.constants
+              ? (` (${Platform.constants.rnohArchitecture})` as string)
+              : ''}
+          </Text>
+        </View>
+        : null
+      }
+      renderItem={({item}) => {
+        return (
+          <View style={{backgroundColor: PALETTE.REACT_CYAN_DARK}}>
+            <TouchableOpacity
+              onPress={() => {
+                navigateTo(item);
+              }}>
+              <Text style={styles.buttonText}>{item}</Text>
+            </TouchableOpacity>
+          </View>
+        );
+      }}
+      ItemSeparatorComponent={() => (
+        <View
+          style={{height: StyleSheet.hairlineWidth, backgroundColor: '#666'}}
+        />
+      )}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#888',
+  },
+  buttonText: {
+    width: '100%',
+    fontWeight: 'bold',
+    paddingHorizontal: 16,
+    paddingVertical: 24,
+    color: 'white',
+    backgroundColor: 'black',
+  },
+});

package/example/src/index.tsx

@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+import React from "react";
+import MapView from "react-native-map-clustering";
+import { Marker } from "react-native-maps";
+
+function getRandomLatitude(min = 48, max = 56) {
+  return Math.random() * (max - min) + min;
+}
+
+function getRandomLongitude(min = 14, max = 24) {
+  return Math.random() * (max - min) + min;
+}
+
+const INITIAL_REGION = {
+  latitude: 52.5,
+  longitude: 19.2,
+  latitudeDelta: 8.5,
+  longitudeDelta: 8.5
+};
+
+function MapClusteringExample() {
+  const _generateMarkers = (count: number) => {
+    const markers = [];
+
+    for (let i = 0; i < count; i++) {
+      markers.push(
+        <Marker
+
+          title='456'
+          key={i}
+          coordinate={{
+            latitude: getRandomLatitude(),
+            longitude: getRandomLongitude()
+          }}
+        />
+      );
+    }
+
+    return markers;
+  };
+
+  return (
+    <MapView initialRegion={INITIAL_REGION}
+      style={{ flex: 1 }}
+    >
+      {_generateMarkers(200)}
+    </MapView>
+  );
+};
+
+
+
+//export default App
+export default MapClusteringExample;

package/example/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@react-native/typescript-config/tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-native",
+    "paths": {
+      "react-native": [
+        "./node_modules/react-native-harmony"
+      ],
+    },
+  },
+  "exclude": [
+    "harmony"
+  ]
+}

package/index.d.ts

@@ -1,40 +1,40 @@
-declare module "react-native-map-clustering" {
-  import * as React from "react";
-  import { LayoutAnimationConfig } from "react-native";
-  import Map, { MapViewProps, Marker } from "react-native-maps";
-
-  export type Cluster = {};
-
-  interface MapClusteringProps {
-    clusteringEnabled?: boolean;
-    spiralEnabled?: boolean;
-    animationEnabled?: boolean;
-    preserveClusterPressBehavior?: boolean;
-    tracksViewChanges?: boolean;
-    layoutAnimationConf?: LayoutAnimationConfig;
-    radius?: number;
-    maxZoom?: number;
-    minZoom?: number;
-    extent?: number;
-    nodeSize?: number;
-    minPoints?: number;
-    edgePadding?: { top: number; left: number; right: number; bottom: number };
-    clusterColor?: string;
-    clusterTextColor?: string;
-    clusterFontFamily?: string;
-    selectedClusterId?: string;
-    selectedClusterColor?: string;
-    spiderLineColor?: string;
-    superClusterRef?: React.MutableRefObject<any>;
-    mapRef?: (ref: React.Ref<Map>) => void;
-    onClusterPress?: (cluster: Marker, markers?: Marker[]) => void;
-    getClusterEngine?: (ref: any) => void;
-    onMarkersChange?: (markers?: Marker[]) => void;
-    renderCluster?: (cluster: any) => React.ReactNode;
-  }
-
-  export default class MapView extends React.Component<
-    MapViewProps & MapClusteringProps,
-    any
-  > {}
-}
+declare module "react-native-map-clustering" {
+  import * as React from "react";
+  import { LayoutAnimationConfig } from "react-native";
+  import Map, { MapViewProps, Marker } from "react-native-maps";
+
+  export type Cluster = {};
+
+  interface MapClusteringProps {
+    clusteringEnabled?: boolean;
+    spiralEnabled?: boolean;
+    animationEnabled?: boolean;
+    preserveClusterPressBehavior?: boolean;
+    tracksViewChanges?: boolean;
+    layoutAnimationConf?: LayoutAnimationConfig;
+    radius?: number;
+    maxZoom?: number;
+    minZoom?: number;
+    extent?: number;
+    nodeSize?: number;
+    minPoints?: number;
+    edgePadding?: { top: number; left: number; right: number; bottom: number };
+    clusterColor?: string;
+    clusterTextColor?: string;
+    clusterFontFamily?: string;
+    selectedClusterId?: string;
+    selectedClusterColor?: string;
+    spiderLineColor?: string;
+    superClusterRef?: React.MutableRefObject<any>;
+    mapRef?: (ref: React.Ref<Map>) => void;
+    onClusterPress?: (cluster: Marker, markers?: Marker[]) => void;
+    getClusterEngine?: (ref: any) => void;
+    onMarkersChange?: (markers?: Marker[]) => void;
+    renderCluster?: (cluster: any) => React.ReactNode;
+  }
+
+  export default class MapView extends React.Component<
+    MapViewProps & MapClusteringProps,
+    any
+  > {}
+}

package/index.js

@@ -1,2 +1,2 @@
-import * as MapView from "./lib/ClusteredMapView";
-module.exports = MapView;
+import * as MapView from "./lib/ClusteredMapView";
+module.exports = MapView;

package/lib/ClusterHarmony.js

@@ -1,21 +1,21 @@
-/*
- * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
- * Use of this source code is governed by a MIT license that can be
- * found in the LICENSE file.
- */
-
-import React, { memo } from "react";
-import { Cluster } from "react-native-maps";
-
-const ClusterHarmony = ({ marker, distance, onPress }) => {
-  return (
-    <Cluster
-      clusterItems={marker.clusterChildItem}
-      distance={distance ? distance : 40}
-      onPress={onPress}
-      style={{ zIndex: marker.properties.point_count + 1 }}
-    ></Cluster>
-  );
-};
-
-export default memo(ClusterHarmony);
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+import React, { memo } from "react";
+import { Cluster } from "react-native-maps";
+
+const ClusterHarmony = ({ marker, distance, onPress }) => {
+  return (
+    <Cluster
+      clusterItems={marker.clusterChildItem}
+      distance={distance ? distance : 40}
+      onPress={onPress}
+      style={{ zIndex: marker.properties.point_count + 1 }}
+    ></Cluster>
+  );
+};
+
+export default memo(ClusterHarmony);