@evnydd0sf/react-native-amap3d-fix 3.2.4-fix.1

package/lib/ios/MapView/MapViewManager.swift

@@ -0,0 +1,159 @@
+@objc(AMapViewManager)
+class AMapViewManager: RCTViewManager {
+  override class func requiresMainQueueSetup() -> Bool { false }
+
+  override func view() -> UIView {
+    let view = MapView()
+    view.delegate = view
+    return view
+  }
+
+  @objc func moveCamera(_ reactTag: NSNumber, position: NSDictionary, duration: Int) {
+    getView(reactTag: reactTag) { view in
+      view.moveCamera(position: position, duration: duration)
+    }
+  }
+
+  @objc func call(_ reactTag: NSNumber, callerId: Double, name: String, args: NSDictionary) {
+    getView(reactTag: reactTag) { view in
+      view.call(id: callerId, name: name, args: args)
+    }
+  }
+
+  func getView(reactTag: NSNumber, callback: @escaping (MapView) -> Void) {
+    bridge.uiManager.addUIBlock { _, viewRegistry in
+      callback(viewRegistry![reactTag] as! MapView)
+    }
+  }
+}
+
+class MapView: MAMapView, MAMapViewDelegate {
+  var initialized = false
+  var overlayMap: [MABaseOverlay: Overlay] = [:]
+  var markerMap: [MAPointAnnotation: Marker] = [:]
+
+  @objc var onLoad: RCTBubblingEventBlock = { _ in }
+  @objc var onCameraMove: RCTBubblingEventBlock = { _ in }
+  @objc var onCameraIdle: RCTBubblingEventBlock = { _ in }
+  @objc var onPress: RCTBubblingEventBlock = { _ in }
+  @objc var onPressPoi: RCTBubblingEventBlock = { _ in }
+  @objc var onLongPress: RCTBubblingEventBlock = { _ in }
+  @objc var onLocation: RCTBubblingEventBlock = { _ in }
+  @objc var onCallback: RCTBubblingEventBlock = { _ in }
+
+  @objc func setInitialCameraPosition(_ json: NSDictionary) {
+    if !initialized {
+      initialized = true
+      moveCamera(position: json)
+    }
+  }
+
+  func moveCamera(position: NSDictionary, duration: Int = 0) {
+    let status = MAMapStatus()
+    status.zoomLevel = (position["zoom"] as? Double)?.cgFloat ?? zoomLevel
+    status.cameraDegree = (position["tilt"] as? Double)?.cgFloat ?? cameraDegree
+    status.rotationDegree = (position["bearing"] as? Double)?.cgFloat ?? rotationDegree
+    status.centerCoordinate = (position["target"] as? NSDictionary)?.coordinate ?? centerCoordinate
+    setMapStatus(status, animated: true, duration: Double(duration) / 1000)
+  }
+
+  func call(id: Double, name: String, args: NSDictionary) {
+    switch name {
+    case "getLatLng":
+      callback(id: id, data: convert(args.point, toCoordinateFrom: self).json)
+    default:
+      break
+    }
+  }
+
+  func callback(id: Double, data: [String: Any]) {
+    onCallback(["id": id, "data": data])
+  }
+
+  override func didAddSubview(_ subview: UIView) {
+    if let overlay = (subview as? Overlay)?.getOverlay() {
+      overlayMap[overlay] = subview as? Overlay
+      add(overlay)
+    }
+    if let annotation = (subview as? Marker)?.annotation {
+      markerMap[annotation] = subview as? Marker
+      addAnnotation(annotation)
+    }
+  }
+
+  override func removeReactSubview(_ subview: UIView!) {
+    super.removeReactSubview(subview)
+    if let overlay = (subview as? Overlay)?.getOverlay() {
+      overlayMap.removeValue(forKey: overlay)
+      remove(overlay)
+    }
+    if let annotation = (subview as? Marker)?.annotation {
+      markerMap.removeValue(forKey: annotation)
+      removeAnnotation(annotation)
+    }
+  }
+
+  func mapView(_: MAMapView, rendererFor overlay: MAOverlay) -> MAOverlayRenderer? {
+    if let key = overlay as? MABaseOverlay {
+      return overlayMap[key]?.getRenderer()
+    }
+    return nil
+  }
+
+  func mapView(_: MAMapView!, viewFor annotation: MAAnnotation) -> MAAnnotationView? {
+    if let key = annotation as? MAPointAnnotation {
+      return markerMap[key]?.getView()
+    }
+    return nil
+  }
+
+  func mapView(_: MAMapView!, annotationView view: MAAnnotationView!, didChange newState: MAAnnotationViewDragState, fromOldState _: MAAnnotationViewDragState) {
+    if let key = view.annotation as? MAPointAnnotation {
+      let market = markerMap[key]!
+      if newState == MAAnnotationViewDragState.starting {
+        market.onDragStart(nil)
+      }
+      if newState == MAAnnotationViewDragState.dragging {
+        market.onDrag(nil)
+      }
+      if newState == MAAnnotationViewDragState.ending {
+        market.onDragEnd(view.annotation.coordinate.json)
+      }
+    }
+  }
+
+  func mapView(_: MAMapView!, didAnnotationViewTapped view: MAAnnotationView!) {
+    if let key = view.annotation as? MAPointAnnotation {
+      markerMap[key]?.onPress(nil)
+    }
+  }
+
+  func mapInitComplete(_: MAMapView!) {
+    onLoad(nil)
+  }
+
+  func mapView(_: MAMapView!, didSingleTappedAt coordinate: CLLocationCoordinate2D) {
+    onPress(coordinate.json)
+  }
+
+  func mapView(_: MAMapView!, didTouchPois pois: [Any]!) {
+    let poi = pois[0] as! MATouchPoi
+    onPressPoi(["name": poi.name!, "id": poi.uid!, "position": poi.coordinate.json])
+  }
+
+  func mapView(_: MAMapView!, didLongPressedAt coordinate: CLLocationCoordinate2D) {
+    onLongPress(coordinate.json)
+  }
+
+  func mapViewRegionChanged(_: MAMapView!) {
+    onCameraMove(cameraEvent)
+  }
+
+  func mapView(_: MAMapView!, regionDidChangeAnimated _: Bool) {
+    onCameraIdle(cameraEvent)
+  }
+
+  func mapView(_: MAMapView!, didUpdate userLocation: MAUserLocation!, updatingLocation _: Bool) {
+    onLocation(userLocation.json)
+  }
+}

package/lib/ios/MapView/MarkerManager.m

@@ -0,0 +1,18 @@
+#import <React/RCTUIManager.h>
+
+@interface RCT_EXTERN_MODULE(AMapMarkerManager, RCTViewManager)
+
+RCT_EXPORT_VIEW_PROPERTY(latLng, CLLocationCoordinate2D)
+RCT_EXPORT_VIEW_PROPERTY(centerOffset, CGPoint)
+RCT_EXPORT_VIEW_PROPERTY(draggable, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(zIndex, int)
+RCT_EXPORT_VIEW_PROPERTY(icon, NSDictionary)
+
+RCT_EXPORT_VIEW_PROPERTY(onPress, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onDragStart, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onDrag, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onDragEnd, RCTBubblingEventBlock)
+
+RCT_EXTERN_METHOD(update:(nonnull NSNumber *)reactTag)
+
+@end

package/lib/ios/MapView/MarkerManager.swift

@@ -0,0 +1,100 @@
+@objc(AMapMarkerManager)
+class AMapMarkerManager: RCTViewManager {
+  override class func requiresMainQueueSetup() -> Bool { false }
+
+  override func view() -> UIView {
+    let view = Marker()
+    view.imageLoader = bridge.module(forName: "ImageLoader") as? RCTImageLoader
+    return view
+  }
+
+  @objc func update(_ reactTag: NSNumber) {
+    getView(reactTag: reactTag) { view in view.update() }
+  }
+
+  func getView(reactTag: NSNumber, callback: @escaping (Marker) -> Void) {
+    bridge.uiManager.addUIBlock { _, viewRegistry in
+      callback(viewRegistry![reactTag] as! Marker)
+    }
+  }
+}
+
+class Marker: UIView {
+  var imageLoader: RCTImageLoader?
+  var view: MAAnnotationView?
+  var annotation = MAPointAnnotation()
+  var icon: UIImage?
+  var iconView: UIView?
+  var centerOffset: CGPoint?
+
+  @objc var draggable = false { didSet { view?.isDraggable = draggable } }
+  @objc var zIndex = 1 { didSet { view?.zIndex = zIndex } }
+
+  @objc var onPress: RCTDirectEventBlock = { _ in }
+  @objc var onDragStart: RCTDirectEventBlock = { _ in }
+  @objc var onDrag: RCTDirectEventBlock = { _ in }
+  @objc var onDragEnd: RCTDirectEventBlock = { _ in }
+
+  @objc func setIcon(_ icon: NSDictionary?) {
+    imageLoader?.loadImage(icon) { image in
+      self.icon = image
+      self.view?.image = image
+      self.updateCenterOffset()
+    }
+  }
+
+  @objc func setLatLng(_ coordinate: CLLocationCoordinate2D) {
+    annotation.coordinate = coordinate
+  }
+
+  @objc func setCenterOffset(_ centerOffset: CGPoint) {
+    self.centerOffset = centerOffset
+    view?.centerOffset = centerOffset
+  }
+
+  override func didAddSubview(_ subview: UIView) {
+    subview.layer.opacity = 0
+    iconView = subview
+  }
+
+  /**
+   * subview 不能直接用作 marker 的 icon，因为在实现点聚合的时候发现，subview 一定概率无法正常 layout，会堆在右上角。
+   * 于是索性把 subview 渲染成 image，原来用 subview 带来的 offset、点击问题也都不用处理了。
+   * 正常情况下就把 subview 的 opacity 设成 0，需要渲染的时候才设成 1，渲染然后马上设回 0。
+   */
+  func update() {
+    if centerOffset == nil, view != nil {
+      iconView?.layer.opacity = 1
+      let renderer = UIGraphicsImageRenderer(bounds: iconView!.bounds)
+      view?.image = renderer.image { context in layer.render(in: context.cgContext) }
+      iconView?.layer.opacity = 0
+      updateCenterOffset()
+    }
+  }
+
+  func updateCenterOffset() {
+    if centerOffset == nil, view != nil {
+      let size: CGSize = (view?.image.size)!
+      view?.centerOffset = CGPoint(x: 0, y: -size.height / 2)
+    }
+  }
+
+  func getView() -> MAAnnotationView {
+    if view == nil {
+      view = MAAnnotationView(annotation: annotation, reuseIdentifier: nil)
+      if icon == nil, iconView == nil {
+        view?.image = MAPinAnnotationView(annotation: annotation, reuseIdentifier: nil).image
+      }
+      view?.isDraggable = draggable
+      view?.zIndex = zIndex
+      if centerOffset != nil {
+        view?.centerOffset = centerOffset!
+      }
+      if icon != nil {
+        view?.image = icon
+        updateCenterOffset()
+      }
+    }
+    return view!
+  }
+}

package/lib/ios/MapView/MultiPointManager.m

@@ -0,0 +1,9 @@
+#import <React/RCTUIManager.h>
+
+@interface RCT_EXTERN_MODULE(AMapMultiPointManager, RCTViewManager)
+
+RCT_EXPORT_VIEW_PROPERTY(items, NSArray)
+RCT_EXPORT_VIEW_PROPERTY(icon, NSDictionary)
+RCT_EXPORT_VIEW_PROPERTY(onPress, RCTBubblingEventBlock)
+
+@end

package/lib/ios/MapView/MultiPointManager.swift

@@ -0,0 +1,47 @@
+@objc(AMapMultiPointManager)
+class AMapMultiPointManager: RCTViewManager {
+  override class func requiresMainQueueSetup() -> Bool { false }
+
+  override func view() -> UIView {
+    let view = MultiPoint()
+    view.imageLoader = bridge.module(forName: "ImageLoader") as? RCTImageLoader
+    return view
+  }
+}
+
+class MultiPoint: UIView, Overlay, MAMultiPointOverlayRendererDelegate {
+  var imageLoader: RCTImageLoader?
+  var overlay: MAMultiPointOverlay?
+  var renderer: MAMultiPointOverlayRenderer?
+  var icon: UIImage?
+
+  @objc var onPress: RCTDirectEventBlock = { _ in }
+
+  @objc func setIcon(_ icon: NSDictionary) {
+    imageLoader?.loadImage(icon) { image in
+      self.renderer?.icon = image
+    }
+  }
+
+  @objc func setItems(_ items: NSArray) {
+    overlay = MAMultiPointOverlay(multiPointItems: items.map { it -> MAMultiPointItem in
+      let item = MAMultiPointItem()
+      item.coordinate = (it as! NSDictionary).coordinate
+      return item
+    })
+  }
+
+  func getOverlay() -> MABaseOverlay { overlay! }
+  func getRenderer() -> MAOverlayRenderer {
+    if renderer == nil {
+      renderer = MAMultiPointOverlayRenderer(multiPointOverlay: overlay)
+      renderer?.icon = icon
+      renderer?.delegate = self
+    }
+    return renderer!
+  }
+
+  func multiPointOverlayRenderer(_: MAMultiPointOverlayRenderer!, didItemTapped item: MAMultiPointItem!) {
+    onPress(["index": (overlay?.items.firstIndex(of: item))!])
+  }
+}

package/lib/ios/MapView/Overlay.swift

@@ -0,0 +1,4 @@
+protocol Overlay: UIView {
+  func getOverlay() -> MABaseOverlay
+  func getRenderer() -> MAOverlayRenderer
+}

package/lib/ios/MapView/PolygonManager.m

@@ -0,0 +1,10 @@
+#import <React/RCTUIManager.h>
+
+@interface RCT_EXTERN_MODULE(AMapPolygonManager, RCTViewManager)
+
+RCT_EXPORT_VIEW_PROPERTY(points, NSArray)
+RCT_EXPORT_VIEW_PROPERTY(strokeWidth, double)
+RCT_EXPORT_VIEW_PROPERTY(strokeColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(fillColor, UIColor)
+
+@end

package/lib/ios/MapView/PolygonManager.swift

@@ -0,0 +1,30 @@
+@objc(AMapPolygonManager)
+class AMapPolygonManager: RCTViewManager {
+  override class func requiresMainQueueSetup() -> Bool { false }
+  override func view() -> UIView { Polygon() }
+}
+
+class Polygon: UIView, Overlay {
+  var overlay = MAPolygon()
+  var renderer: MAPolygonRenderer?
+
+  @objc var strokeWidth = 1.0 { didSet { renderer?.lineWidth = strokeWidth } }
+  @objc var strokeColor = UIColor.black { didSet { renderer?.strokeColor = strokeColor } }
+  @objc var fillColor = UIColor.white { didSet { renderer?.fillColor = fillColor } }
+
+  @objc func setPoints(_ points: NSArray) {
+    var coordinates = points.map { it -> CLLocationCoordinate2D in (it as! NSDictionary).coordinate }
+    overlay.setPolygonWithCoordinates(&coordinates, count: points.count)
+  }
+
+  func getOverlay() -> MABaseOverlay { overlay }
+  func getRenderer() -> MAOverlayRenderer {
+    if renderer == nil {
+      renderer = MAPolygonRenderer(polygon: overlay)
+      renderer?.fillColor = fillColor
+      renderer?.strokeColor = strokeColor
+      renderer?.lineWidth = strokeWidth
+    }
+    return renderer!
+  }
+}

package/lib/ios/MapView/PolylineManager.m

@@ -0,0 +1,12 @@
+#import <React/RCTUIManager.h>
+
+@interface RCT_EXTERN_MODULE(AMapPolylineManager, RCTViewManager)
+
+RCT_EXPORT_VIEW_PROPERTY(points, NSArray)
+RCT_EXPORT_VIEW_PROPERTY(width, double)
+RCT_EXPORT_VIEW_PROPERTY(color, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(dotted, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(gradient, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(colors, UIColorArray)
+
+@end

package/lib/ios/MapView/PolylineManager.swift

@@ -0,0 +1,41 @@
+@objc(AMapPolylineManager)
+class AMapPolylineManager: RCTViewManager {
+  override class func requiresMainQueueSetup() -> Bool { false }
+  override func view() -> UIView { Polyline() }
+}
+
+class Polyline: UIView, Overlay {
+  var overlay = MAMultiPolyline()
+  var renderer: MAMultiColoredPolylineRenderer?
+
+  @objc var width = 1.0 { didSet { renderer?.lineWidth = width } }
+  @objc var color = UIColor.black { didSet { renderer?.strokeColor = color } }
+  @objc var gradient = false { didSet { renderer?.isGradient = gradient } }
+  @objc var dotted = false { didSet { setDotted() } }
+  @objc var colors: [UIColor] = [] { didSet {
+    renderer?.strokeColors = colors
+    overlay.drawStyleIndexes = (0 ..< colors.count).map { it in NSNumber(value: it) }
+  } }
+
+  @objc func setPoints(_ points: NSArray) {
+    var coordinates = points.map { it -> CLLocationCoordinate2D in (it as! NSDictionary).coordinate }
+    overlay.setPolylineWithCoordinates(&coordinates, count: points.count)
+  }
+
+  func setDotted() {
+    renderer?.lineDashType = dotted ? kMALineDashTypeDot : kMALineDashTypeNone
+  }
+
+  func getOverlay() -> MABaseOverlay { overlay }
+  func getRenderer() -> MAOverlayRenderer {
+    if renderer == nil {
+      renderer = MAMultiColoredPolylineRenderer(multiPolyline: overlay)
+      renderer?.strokeColor = color
+      renderer?.lineWidth = width
+      renderer?.isGradient = gradient
+      renderer?.strokeColors = colors
+      setDotted()
+    }
+    return renderer!
+  }
+}

package/lib/ios/Modules/SdkModule.m

@@ -0,0 +1,8 @@
+#import <React/RCTBridgeModule.h>
+
+@interface RCT_EXTERN_MODULE(AMapSdk, NSObject)
+
+RCT_EXTERN_METHOD(initSDK: (NSString)apiKey)
+RCT_EXTERN_METHOD(getVersion: (RCTPromiseResolveBlock)resolve reject: (RCTPromiseRejectBlock)_)
+
+@end

package/lib/ios/Modules/SdkModule.swift

@@ -0,0 +1,16 @@
+@objc(AMapSdk)
+class AMapSdk: NSObject {
+  @objc static func requiresMainQueueSetup() -> Bool {
+    false
+  }
+
+  @objc func initSDK(_ apiKey: String) {
+    AMapServices.shared().apiKey = apiKey
+    MAMapView.updatePrivacyAgree(AMapPrivacyAgreeStatus.didAgree)
+    MAMapView.updatePrivacyShow(AMapPrivacyShowStatus.didShow, privacyInfo: AMapPrivacyInfoStatus.didContain)
+  }
+
+  @objc func getVersion(_ resolve: RCTPromiseResolveBlock, reject _: RCTPromiseRejectBlock) {
+    resolve("8.0.1")
+  }
+}

package/lib/ios/Utils.swift

@@ -0,0 +1,104 @@
+extension NSDictionary {
+  var coordinate: CLLocationCoordinate2D {
+    CLLocationCoordinate2DMake(self["latitude"] as! Double, self["longitude"] as! Double)
+  }
+
+  var point: CGPoint {
+    CGPoint(x: self["x"] as! Double, y: self["y"] as! Double)
+  }
+}
+
+extension CLLocationCoordinate2D {
+  var json: [String: Double] {
+    ["latitude": latitude, "longitude": longitude]
+  }
+}
+
+extension MAUserLocation {
+  var json: [String: Any] {
+    [
+      "coords": [
+        "latitude": coordinate.latitude,
+        "longitude": coordinate.longitude,
+        "altitude": location?.altitude ?? 0,
+        "heading": heading?.trueHeading,
+        "accuracy": location?.horizontalAccuracy ?? 0,
+        "speed": location?.speed ?? 0,
+      ],
+      "timestamp": NSDate().timeIntervalSince1970 * 1000,
+    ]
+  }
+}
+
+extension MACoordinateRegion {
+  var json: [String: Any] {
+    [
+      "southwest": [
+        "latitude": center.latitude - span.latitudeDelta / 2,
+        "longitude": center.longitude - span.longitudeDelta / 2,
+      ],
+      "northeast": [
+        "latitude": center.latitude + span.latitudeDelta / 2,
+        "longitude": center.longitude + span.longitudeDelta / 2,
+      ],
+    ]
+  }
+}
+
+extension MAMapStatus {
+  var json: [String: Any] {
+    [
+      "target": centerCoordinate.json,
+      "zoom": zoomLevel,
+      "bearing": rotationDegree,
+      "tilt": cameraDegree,
+    ]
+  }
+}
+
+extension MAMapView {
+  var cameraEvent: [String: Any] {
+    [
+      "cameraPosition": getMapStatus().json,
+      "latLngBounds": region.json,
+    ]
+  }
+}
+
+extension Double {
+  var cgFloat: CGFloat {
+    CGFloat(self)
+  }
+}
+
+extension RCTConvert {
+  @objc static func MAMapType(_ json: Any) -> MAMapType {
+    MAMapKit.MAMapType(rawValue: json as! NSInteger)!
+  }
+}
+
+extension RCTImageLoader {
+  func loadImage(_ icon: NSDictionary?, callback: @escaping (UIImage) -> Void) {
+    if icon == nil {
+      return
+    }
+    let width = icon?["width"] as? Double ?? 0
+    let height = icon?["height"] as? Double ?? 0
+    loadImage(
+      with: RCTConvert.nsurlRequest(icon),
+      size: CGSize(width: width, height: height),
+      scale: RCTScreenScale(),
+      clipped: false,
+      resizeMode: RCTResizeMode.cover,
+      progressBlock: { _, _ in },
+      partialLoad: { _ in },
+      completionBlock: { _, image in
+        if image != nil {
+          DispatchQueue.main.async {
+            callback(image!)
+          }
+        }
+      }
+    )
+  }
+}

package/lib/ios/react-native-amap3d.podspec

@@ -0,0 +1,20 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "../../package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-amap3d"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => "10.0" }
+  s.source       = { :git => "https://github.com/evnydd0sf/react-native-amap3d.git", :tag => "#{s.version}" }
+
+  s.source_files = "**/*.{h,m,mm,swift}"
+
+  s.dependency "React-Core"
+  s.dependency 'AMap3DMap', "10.0.1000"
+end

package/lib/src/circle.tsx

@@ -0,0 +1,36 @@
+import { requireNativeComponent } from "react-native";
+import { LatLng } from "./types";
+
+export interface CircleProps {
+  /**
+   * 圆点坐标
+   */
+  center: LatLng;
+
+  /**
+   * 半径（米）
+   */
+  radius: number;
+
+  /**
+   * 边线宽度
+   */
+  strokeWidth?: number;
+
+  /**
+   * 边线颜色
+   */
+  strokeColor?: string;
+
+  /**
+   * 填充颜色
+   */
+  fillColor?: string;
+
+  /**
+   * 层级
+   */
+  zIndex?: number;
+}
+
+export default requireNativeComponent<CircleProps>("AMapCircle");

package/lib/src/cluster/cluster-view.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { StyleSheet, Text, View, ViewStyle } from "react-native";
+import { ClusterParams } from ".";
+import Marker from "../marker";
+
+interface Props {
+  cluster: ClusterParams;
+  style?: ViewStyle;
+  textStyle?: ViewStyle;
+  onPress?: (params: ClusterParams) => void;
+}
+
+export default class ClusterView extends React.PureComponent<Props> {
+  onPress = () => {
+    this.props.onPress?.call(this, this.props.cluster);
+  };
+
+  renderClusterView = () => {
+    const { count } = this.props.cluster;
+    const size = 36 + Math.log2(count);
+    const clusterStyle = { width: size, height: size, borderRadius: size / 2 };
+    return (
+      <View style={[style.cluster, clusterStyle, this.props.style]}>
+        <Text style={[style.text, this.props.textStyle]}>{count}</Text>
+      </View>
+    );
+  };
+
+  render() {
+    return (
+      <Marker onPress={this.onPress} position={this.props.cluster.position}>
+        {this.renderClusterView()}
+      </Marker>
+    );
+  }
+}
+
+const style = StyleSheet.create({
+  cluster: {
+    borderWidth: 4,
+    borderColor: "#fff",
+    backgroundColor: "rgba(245,83,61,0.9)",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  text: { color: "#fff", fontWeight: "600" },
+});