ClusterMarker.js

"use-strict";

// base libs
import PropTypes from "prop-types";
import React, { Component } from "react";
import { MapView } from "expo";
import { Text, View, StyleSheet } from "react-native";

const Marker = MapView.Marker;

export default class ClusterMarker extends Component {
  constructor(props) {
    super(props);

    this.onPress = this.onPress.bind(this);
  }

  onPress() {
    this.props.onPress(this.props);
  }

  render() {
    const pointCount = this.props.properties.point_count; // eslint-disable-line camelcase
    const latitude = this.props.geometry.coordinates[1],
      longitude = this.props.geometry.coordinates[0];

    if (this.props.renderCluster) {
      const cluster = {
        pointCount,
        coordinate: { latitude, longitude },
        clusterId: this.props.properties.cluster_id
      };
      return this.props.renderCluster(cluster, this.onPress);
    }

    // keep default marker for backward compatibility, but it'll soon be deprecated
    console.warn(
      'Deprecation notice: default markers will soon be deprecated. Please, start using "renderCluster" prop.'
    ); // eslint-disable-line

    let scaleUpRatio = this.props.scaleUpRatio
      ? this.props.scaleUpRatio(pointCount)
      : 1 + Math.min(pointCount, 999) / 100;
    if (isNaN(scaleUpRatio)) {
      console.warn(
        "scaleUpRatio must return a Number, falling back to default"
      ); // eslint-disable-line
      scaleUpRatio = 1 + Math.min(pointCount, 999) / 100;
    }

    let textForCluster = "1";

    let width = Math.floor(this.props.clusterInitialDimension * scaleUpRatio),
      height = Math.floor(this.props.clusterInitialDimension * scaleUpRatio),
      fontSize = Math.floor(this.props.clusterInitialFontSize * scaleUpRatio),
      borderRadius = Math.floor(width / 2);

    // cluster dimension upper limit
    width =
      width <= this.props.clusterInitialDimension * 2
        ? width
        : this.props.clusterInitialDimension * 2;
    height =
      height <= this.props.clusterInitialDimension * 2
        ? height
        : this.props.clusterInitialDimension * 2;
    fontSize = fontSize <= 18 ? fontSize : 18;

    if (pointCount >= 2 && pointCount <= 10) {
      textForCluster = pointCount.toString();
    }
    if (pointCount > 10 && pointCount <= 25) {
      textForCluster = "10+";
    }
    if (pointCount > 25 && pointCount <= 50) {
      textForCluster = "25+";
    }
    if (pointCount > 50 && pointCount <= 100) {
      textForCluster = "50+";
    }
    if (pointCount > 100) {
      textForCluster = "100+";
    }

    const { containerStyle, textStyle } = this.props;

    return (
      <Marker coordinate={{ latitude, longitude }} onPress={this.onPress}>
        <View
          style={[
            styles.container,
            containerStyle,
            { width, height, borderRadius }
          ]}
        >
          <Text style={[styles.counterText, textStyle, { fontSize }]}>
            {textForCluster}
          </Text>
        </View>
      </Marker>
    );
  }
}

ClusterMarker.defaultProps = {
  textStyle: {},
  containerStyle: {}
};

ClusterMarker.propTypes = {
  scaleUpRatio: PropTypes.func,
  renderCluster: PropTypes.func,
  onPress: PropTypes.func.isRequired,
  geometry: PropTypes.object.isRequired,
  textStyle: PropTypes.object.isRequired,
  properties: PropTypes.object.isRequired,
  containerStyle: PropTypes.object.isRequired,
  clusterInitialFontSize: PropTypes.number.isRequired,
  clusterInitialDimension: PropTypes.number.isRequired
};

const styles = StyleSheet.create({
  container: {
    borderWidth: 1,
    alignItems: "center",
    borderColor: "#65bc46",
    justifyContent: "center",
    backgroundColor: "#fff"
  },
  counterText: {
    fontSize: 16,
    color: "#65bc46",
    fontWeight: "400"
  }
});