项目作者: codempireio

项目描述 :
ReactNative MapView clustering component for iOS + Android
高级语言: TypeScript
项目地址: git://github.com/codempireio/react-native-cluster-map.git
创建时间: 2019-03-26T14:39:40Z
项目社区:https://github.com/codempireio/react-native-cluster-map

开源协议:MIT License

下载


react-native-cluster-map

license
Version
npm
Email

React Native MapView clustering component for iOS + Android


Made by CODEMPIRE

Examples

Zoom in Zoom out
Example zoom out Example zoom in
Cluster Expand Nested Cluster Expand
Example cluster expand Example nested cluster expand

Installation

  1. Install react-native-maps

  2. Install this component

  1. npm install --save react-native-cluster-map

Usage

  1. import { Marker } from 'react-native-maps';
  2. import { ClusterMap } from 'react-native-cluster-map';
  3. <ClusterMap
  4. region={{
  5. latitude: 37.78825,
  6. longitude: -122.4324,
  7. latitudeDelta: 0.0922,
  8. longitudeDelta: 0.0421,
  9. }}
  10. >
  11. <Marker coordinate={{ latitude: 37.78725, longitude: -122.434 }} ></Marker>
  12. <Marker coordinate={{ latitude: 37.789, longitude: -122.431 }} ></Marker>
  13. <Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }} ></Marker>
  14. </ClusterMap>;

Custom Cluster Marker

You can customize cluster marker with renderClusterMarker prop

MyMap.jsx

  1. import { Marker } from "react-native-maps";
  2. import { MyCluster } from "./MyCluster";
  3. // ...
  4. renderCustomClusterMarker = (count) => <MyCluster count={count} ></MyCluster>
  5. render () {
  6. const { markers, region } = this.state;
  7. return (
  8. <ClusterMap
  9. renderClusterMarker={this.renderCustomClusterMarker}
  10. region={region}
  11. >
  12. {markers.map((marker) => (
  13. <Marker {...marker} ></Marker>
  14. ))}
  15. <ClusterMap>
  16. )
  17. }

MyCluster.jsx

  1. import * as React from 'react';
  2. import { View, Text, StyleSheet } from 'react-native';
  3. export const MyCluster = (props) => {
  4. const { count } = props;
  5. return (
  6. <View style={styles}>
  7. <Text>{count}</Text>
  8. </View>
  9. );
  10. };
  11. const styles = StyleSheet.create({
  12. width: 50,
  13. height: 50,
  14. borderRadius: 25,
  15. backgroundColor: 'red',
  16. justifyContent: 'center',
  17. alignItems: 'center',
  18. });

Result

Custom Marker Example

Props

Props Type Default value Note
superClusterOptions Options { radius: 16, maxZoom: 15, minZoom: 1, nodeSize: 16 } SuperCluster lib options
isClusterExpandClick boolean true Enables cluster zoom on click
region Region required Google Map Region
priorityMarker ReactNode null Marker which will be outside of clusters
renderClusterMarker (object):ReactNode undefined Returns cluster marker component
clusterMarkerProps object undefined Additional ClusterMarker props
provider ‘google’ or null ‘google’ Map provider. If null will use the platform default one (Google Maps for Android and MapKit for iOS)
style StyleProp absoluteFillObject Styling for MapView

Children Props

Props Type Default Note
isOutsideCluster boolean false Prevent child from clusterization. Required for not a Marker children (e.g. Polygon, Polyline, Circle)

Also contains react-native-maps \ Props

Events

Event Name Returns Notes
onClusterClick ({ clusterId: number, coordinate : LatLng }, children: Marker[]) Callback that is called when the user pressed on the cluster marker
onZoomChange void Callback that is called with updated map zoom in number

Also contains react-native-maps \ Events