react-native-cluster-map-hwan
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    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

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

    Usage

    import { Marker } from "react-native-maps";
    import { ClusterMap } from "react-native-cluster-map";
     
    <ClusterMap
      region={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    >
      <Marker coordinate={{ latitude:37.78725, longitude: -122.434 }} />
      <Marker coordinate={{ latitude:37.789, longitude: -122.431 }} />
      <Marker coordinate={{ latitude:37.78825, longitude:-122.4324 }} />
    </ClusterMap>

    Custom Cluster Marker

    You can customize cluster marker with renderClusterMarker prop

    MyMap.jsx

    import { Marker } from "react-native-maps";
    import { MyCluster } from "./MyCluster";
     
    // ...
     
    renderCustomClusterMarker = (count) => <MyCluster count={count} />
     
    render () {
      const { markers, region } = this.state;
      return (
        <ClusterMap
          renderClusterMarker={this.renderCustomClusterMarker}
          region={region}
        >
          {markers.map((marker) => (
              <Marker {...marker} />
          ))}
        <ClusterMap>
      )
    }
     

    MyCluster.jsx

    import * as React from 'react';
    import { View, Text, StyleSheet } from 'react-native';
     
    export const MyCluster = (props) => {
      const { count } = props;
      return (
        <View style={styles}>
          <Text>{count}</Text>
        </View>
      )
    }
     
    const styles = StyleSheet.create({
      width: 50,
      height: 50,
      borderRadius: 25,
      backgroundColor: 'red',
      justifyContent: 'center',
      alignItems: 'center'
    })

    Result

    Custom Marker Example

    Props

    Props Type Default 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 ():ReactNode () => { return <CustomClusterMarker /> } Returns cluster marker component
    style StyleProp absoluteFillObject Styling for MapView

    Also contains react-native-maps <MapView /> Props

    Events

    Event Name Returns Notes
    onClusterClick void 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 <MapView /> Events

    Install

    npm i react-native-cluster-map-hwan

    DownloadsWeekly Downloads

    4

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    6.8 MB

    Total Files

    15

    Last publish

    Collaborators

    • tictochwan