Needling Perl Mongers

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

    1.0.9 • 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 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 <MapView /> 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 <MapView /> Events

    Install

    npm i react-native-cluster-map

    DownloadsWeekly Downloads

    173

    Version

    1.0.9

    License

    MIT

    Unpacked Size

    529 kB

    Total Files

    63

    Last publish

    Collaborators

    • codempire