Skip to content

Latest commit

 

History

History
135 lines (108 loc) · 11.2 KB

README.md

File metadata and controls

135 lines (108 loc) · 11.2 KB
Raw

React Native Map Clustering

React Native module that handles map clustering for you.

Works with Expo and react-native-cli 🚀

This repo is proudly sponsored by:


React Native Templates & Starter Kits and Apps for easier start.

Demo

Demo

Installation

npm install react-native-map-clustering react-native-maps --save
// yarn add react-native-map-clustering react-native-maps

Full example

import React from "react";
import MapView from "react-native-map-clustering";
import { Marker } from "react-native-maps";

const INITIAL_REGION = {
  latitude: 52.5,
  longitude: 19.2,
  latitudeDelta: 8.5,
  longitudeDelta: 8.5,
};

const App = () => (
  <MapView initialRegion={INITIAL_REGION} style={{ flex: 1 }}>
    <Marker coordinate={{ latitude: 52.4, longitude: 18.7 }} />
    <Marker coordinate={{ latitude: 52.1, longitude: 18.4 }} />
    <Marker coordinate={{ latitude: 52.6, longitude: 18.3 }} />
    <Marker coordinate={{ latitude: 51.6, longitude: 18.0 }} />
    <Marker coordinate={{ latitude: 53.1, longitude: 18.8 }} />
    <Marker coordinate={{ latitude: 52.9, longitude: 19.4 }} />
    <Marker coordinate={{ latitude: 52.2, longitude: 21 }} />
    <Marker coordinate={{ latitude: 52.4, longitude: 21 }} />
    <Marker coordinate={{ latitude: 51.8, longitude: 20 }} />
  </MapView>
);

export default App;

Props

Name Type Default Note
clusterColor String #00B386 Background color of cluster.
clusterTextColor String #FFFFFF Color of text in cluster.
clusterFontFamily String undefined Font family of text in cluster.
onClusterPress(cluster, markers) Function () => {} Allows you to control cluster on click event. Function returns information about cluster and its markers.
tracksViewChanges Bool false Sets whether the cluster markers should track view changes. It's turned off by default to improve cluster markers performance.
width Number window width map's width.
height Number window height map's height.
radius Number window.width * 6% SuperCluster radius.
extent Number 512 SuperCluster extent.
minZoom Number 1 SuperCluster minZoom.
maxZoom Number 20 SuperCluster maxZoom.
minPoints Number 2 SuperCluster minPoints.
preserveClusterPressBehavior Bool false If set to true, after clicking on cluster it will not be zoomed.
edgePadding Object { top: 50, left: 50, bottom: 50, right: 50 } Edge padding for react-native-maps's fitToCoordinates method, called in onClusterPress for fitting to pressed cluster children.
animationEnabled Bool true Animate imploding/exploding of clusters' markers and clusters size change. Works only on iOS.
layoutAnimationConf LayoutAnimationConfig LayoutAnimation.Presets.spring LayoutAnimation.Presets.spring
onRegionChangeComplete(region, markers) Function () => {} Called when map's region changes. In return you get current region and markers data.
onMarkersChange(markers) Function () => {} Called when markers change. In return you get markers data.
superClusterRef MutableRefObject {} Return reference to supercluster library. You can read more about options it has here.
clusteringEnabled Bool true Set true to enable and false to disable clustering.
spiralEnabled Bool true Set true to enable and false to disable spiral view.
renderCluster Function undefined Enables you to render custom cluster with custom styles and logic.
spiderLineColor String #FF0000 Enables you to set color of spider line which joins spiral location with center location.

How to animate to region?

Full example of how to use animateToRegion().

import React, { useRef } from "react";
import { Button } from "react-native";
import MapView from "react-native-map-clustering";
import { Marker } from "react-native-maps";

const INITIAL_REGION = {
  latitude: 52.5,
  longitude: 19.2,
  latitudeDelta: 8.5,
  longitudeDelta: 8.5,
};

const App = () => {
  const mapRef = useRef();

  const animateToRegion = () => {
    let region = {
      latitude: 42.5,
      longitude: 15.2,
      latitudeDelta: 7.5,
      longitudeDelta: 7.5,
    };

    mapRef.current.animateToRegion(region, 2000);
  };

  return (
    <>
      <MapView
        ref={mapRef}
        initialRegion={INITIAL_REGION}
        style={{ flex: 1 }}
      />
      <Button onPress={animateToRegion} title="Animate" />
    </>
  );
};

export default App;

Support

Feel free to create issues and pull requests. I will try to provide as much support as possible over GitHub. In case of questions or problems, contact me at: [email protected]

Happy Coding 💖🚀