@rnmapbox/maps 10.1.22 → 10.1.24

package/android/build.gradle

@@ -13,11 +13,6 @@ def isNewArchitectureEnabled() {
     return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true"
 }
 
-
-def getKotlinVersion() {
-    return rootProject.ext.has('kotlinVersion') ? rootProject.ext.get('kotlinVersion') : '1.6.21'
-}
-
 def getCoroutinesVersion(kotlinVersion) {
     return kotlinVersion >= '1.9' ? '1.8.0' : '1.6.4'
 }
@@ -30,17 +25,15 @@ if (rootProject.ext.has('expoRNMapboxMapsVersion')) {
     rootProject.ext.set('RNMapboxMapsVersion', rootProject.ext.get('expoRNMapboxMapsVersion'))
 }
 
-project.ext.set("kotlinVersion", getKotlinVersion())
-
 buildscript {
   repositories {
     google()
     mavenCentral()
   }
 
-  def kotlinVersion = this.kotlinVersion
+  project.ext.set("kotlinVersion", rootProject.ext.has('kotlinVersion') ? rootProject.ext.get('kotlinVersion') : '1.7.21')
   dependencies {
-      classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${kotlinVersion}"
+      classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${project.kotlinVersion}"
   }
 }
 
@@ -153,8 +146,8 @@ dependencies {
     // React Native
     implementation "com.facebook.react:react-native:+"
 
-    implementation "org.jetbrains.kotlinx:kotlinx-coroutines-core:${safeExtGet('kotlinxCoroutinesCoreVersion', getCoroutinesVersion(getKotlinVersion()))}"
-    implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:${safeExtGet('kotlinxCoroutinesAndroidVersion', getCoroutinesVersion(getKotlinVersion()))}"
+    implementation "org.jetbrains.kotlinx:kotlinx-coroutines-core:${safeExtGet('kotlinxCoroutinesCoreVersion', getCoroutinesVersion(project.kotlinVersion))}"
+    implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:${safeExtGet('kotlinxCoroutinesAndroidVersion', getCoroutinesVersion(project.kotlinVersion))}"
 
     // Mapbox SDK
     customizableDependencies('RNMapboxMapsLibs') {

package/lib/commonjs/web/components/Camera.js

@@ -4,35 +4,126 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Camera = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = require("react");
 var _MapContext = _interopRequireDefault(require("../MapContext"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-class Camera extends _react.default.Component {
+function isArray(value) {
+  return value.length !== undefined;
+}
+function buildMapboxGlPadding(padding) {
+  if (padding === undefined) {
+    // undefined
+    return undefined;
+  } else if (!isArray(padding)) {
+    // padding
+    return padding;
+  } else {
+    // Array
+    if (padding.length === 0) {
+      // []
+      return undefined;
+    } else if (padding.length < 2) {
+      // [padding]
+      return padding[0];
+    } else if (padding.length < 4) {
+      // [vertical, horizontal]
+      return {
+        left: padding[0],
+        right: padding[0],
+        top: padding[1],
+        bottom: padding[1]
+      };
+    } else {
+      // [top, right, bottom, left]
+      return {
+        top: padding[0],
+        right: padding[1],
+        bottom: padding[2],
+        left: padding[3]
+      };
+    }
+  }
+}
+class Camera extends _react.Component {
   static contextType = _MapContext.default;
   static UserTrackingModes = [];
   componentDidMount() {
     const {
       map
     } = this.context;
+    if (!map) {
+      return;
+    }
+
+    // minZoomLevel
+    if (this.props.minZoomLevel !== undefined) {
+      map.setMinZoom(this.props.minZoomLevel);
+    }
+
+    // maxZoomLevel
+    if (this.props.maxZoomLevel !== undefined) {
+      map.setMaxZoom(this.props.maxZoomLevel);
+    }
+
+    // zoomLevel
+    if (this.props.zoomLevel !== undefined) {
+      map.setZoom(this.props.zoomLevel);
+    }
+
+    // centerCoordinate
+    if (this.props.centerCoordinate !== undefined) {
+      map.flyTo({
+        center: this.props.centerCoordinate.slice(0, 2),
+        duration: 0
+      });
+    }
+  }
+  fitBounds(northEastCoordinates, southWestCoordinates, padding = 0, animationDuration = 0) {
     const {
-      centerCoordinate
-    } = this.props;
-    if (map && centerCoordinate) {
+      map
+    } = this.context;
+    if (map) {
+      map.fitBounds([northEastCoordinates.slice(0, 2), southWestCoordinates.slice(0, 2)], {
+        padding: buildMapboxGlPadding(padding),
+        duration: animationDuration
+      });
+    }
+  }
+  flyTo(centerCoordinate, animationDuration = 2000) {
+    const {
+      map
+    } = this.context;
+    if (map) {
       map.flyTo({
-        center: centerCoordinate
+        center: centerCoordinate.slice(0, 2),
+        duration: animationDuration
       });
     }
   }
-  fitBounds(northEastCoordinates, southWestCoordinates, padding = 0, animationDuration = 0.0) {
+  moveTo(centerCoordinate, animationDuration = 0) {
     const {
       map
     } = this.context;
     if (map) {
-      map.fitBounds([northEastCoordinates, southWestCoordinates]);
+      map.easeTo({
+        center: centerCoordinate.slice(0, 2),
+        duration: animationDuration
+      });
+    }
+  }
+  zoomTo(zoomLevel, animationDuration = 2000) {
+    const {
+      map
+    } = this.context;
+    if (map) {
+      map.flyTo({
+        zoom: zoomLevel,
+        duration: animationDuration
+      });
     }
   }
   render() {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
   }
 }
 exports.Camera = Camera;

package/lib/commonjs/web/components/Camera.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_MapContext","obj","__esModule","default","Camera","React","Component","contextType","MapContext","UserTrackingModes","componentDidMount","map","context","centerCoordinate","props","flyTo","center","fitBounds","northEastCoordinates","southWestCoordinates","padding","animationDuration","render","createElement","Fragment","exports","_default"],"sourceRoot":"../../../../src","sources":["web/components/Camera.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEvC,MAAMG,MAAM,SAASC,cAAK,CAACC,SAAS,CAEjC;EAGD,OAAOC,WAAW,GAAGC,mBAAU;EAC/B,OAAOC,iBAAiB,GAAG,EAAE;EAE7BC,iBAAiBA,CAAA,EAAG;IAClB,MAAM;MAAEC;IAAI,CAAC,GAAG,IAAI,CAACC,OAAO;IAC5B,MAAM;MAAEC;IAAiB,CAAC,GAAG,IAAI,CAACC,KAAK;IACvC,IAAIH,GAAG,IAAIE,gBAAgB,EAAE;MAC3BF,GAAG,CAACI,KAAK,CAAC;QAAEC,MAAM,EAAEH;MAAiB,CAAC,CAAC;IACzC;EACF;EAEAI,SAASA,CACPC,oBAAsC,EACtCC,oBAAsC,EACtCC,OAAO,GAAG,CAAC,EACXC,iBAAiB,GAAG,GAAG,EACvB;IACA,MAAM;MAAEV;IAAI,CAAC,GAAG,IAAI,CAACC,OAAO;IAC5B,IAAID,GAAG,EAAE;MACPA,GAAG,CAACM,SAAS,CAAC,CAACC,oBAAoB,EAAEC,oBAAoB,CAAC,CAAC;IAC7D;EACF;EAEAG,MAAMA,CAAA,EAAG;IACP,oBAAOzB,MAAA,CAAAM,OAAA,CAAAoB,aAAA,CAAA1B,MAAA,CAAAM,OAAA,CAAAqB,QAAA,MAAI,CAAC;EACd;AACF;AAACC,OAAA,CAAArB,MAAA,GAAAA,MAAA;AAAA,IAAAsB,QAAA,GAAAD,OAAA,CAAAtB,OAAA,GAGcC,MAAM","ignoreList":[]}
+{"version":3,"names":["_react","require","_MapContext","_interopRequireDefault","obj","__esModule","default","isArray","value","length","undefined","buildMapboxGlPadding","padding","left","right","top","bottom","Camera","Component","contextType","MapContext","UserTrackingModes","componentDidMount","map","context","props","minZoomLevel","setMinZoom","maxZoomLevel","setMaxZoom","zoomLevel","setZoom","centerCoordinate","flyTo","center","slice","duration","fitBounds","northEastCoordinates","southWestCoordinates","animationDuration","moveTo","easeTo","zoomTo","zoom","render","React","createElement","Fragment","exports","_default"],"sourceRoot":"../../../../src","sources":["web/components/Camera.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/web/components/MarkerView.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _mapboxGl = require("mapbox-gl");
+var _react = require("react");
+var _reactDom = require("react-dom");
+var _MapContext = _interopRequireDefault(require("../MapContext"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function MarkerView(props, ref) {
+  const {
+    map
+  } = (0, _react.useContext)(_MapContext.default);
+
+  // Create marker instance
+  const marker = (0, _react.useMemo)(() => {
+    const _marker = new _mapboxGl.Marker({
+      element: /*#__PURE__*/(0, _react.isValidElement)(props.children) ? document.createElement('div') : undefined
+    });
+
+    // Set marker coordinates
+    _marker.setLngLat(props.coordinate);
+
+    // Fix marker position
+    const {
+      style
+    } = _marker.getElement();
+    style.position = 'absolute';
+    style.top = '0';
+    style.left = '0';
+    return _marker;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Add marker to map
+  (0, _react.useEffect)(() => {
+    if (map === undefined) {
+      return;
+    }
+    marker.addTo(map);
+    return () => {
+      marker.remove();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [map]);
+
+  // Expose marker instance
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  (0, _react.useImperativeHandle)(ref, () => marker, []);
+
+  // Update marker coordinates
+  const markerCoordinate = marker.getLngLat();
+  if (markerCoordinate.lng !== props.coordinate[0] || markerCoordinate.lat !== props.coordinate[1]) {
+    marker.setLngLat([props.coordinate[0], props.coordinate[1]]);
+  }
+
+  // Inject children into marker element
+  return /*#__PURE__*/(0, _reactDom.createPortal)(props.children, marker.getElement());
+}
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(MarkerView));
+//# sourceMappingURL=MarkerView.js.map

package/lib/commonjs/web/components/MarkerView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_mapboxGl","require","_react","_reactDom","_MapContext","_interopRequireDefault","obj","__esModule","default","MarkerView","props","ref","map","useContext","MapContext","marker","useMemo","_marker","Marker","element","isValidElement","children","document","createElement","undefined","setLngLat","coordinate","style","getElement","position","top","left","useEffect","addTo","remove","useImperativeHandle","markerCoordinate","getLngLat","lng","lat","createPortal","_default","exports","memo","forwardRef"],"sourceRoot":"../../../../src","sources":["web/components/MarkerView.tsx"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAWA,IAAAE,SAAA,GAAAF,OAAA;AAEA,IAAAG,WAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAuC,SAAAI,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAOvC,SAASG,UAAUA,CAACC,KAAsB,EAAEC,GAAgB,EAAE;EAC5D,MAAM;IAAEC;EAAI,CAAC,GAAG,IAAAC,iBAAU,EAACC,mBAAU,CAAC;;EAEtC;EACA,MAAMC,MAAc,GAAG,IAAAC,cAAO,EAAC,MAAM;IACnC,MAAMC,OAAO,GAAG,IAAIC,gBAAM,CAAC;MACzBC,OAAO,EAAE,iBAAAC,qBAAc,EAACV,KAAK,CAACW,QAAQ,CAAC,GACnCC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC,GAC7BC;IACN,CAAC,CAAC;;IAEF;IACAP,OAAO,CAACQ,SAAS,CAACf,KAAK,CAACgB,UAAU,CAAC;;IAEnC;IACA,MAAM;MAAEC;IAAM,CAAC,GAAGV,OAAO,CAACW,UAAU,CAAC,CAAC;IACtCD,KAAK,CAACE,QAAQ,GAAG,UAAU;IAC3BF,KAAK,CAACG,GAAG,GAAG,GAAG;IACfH,KAAK,CAACI,IAAI,GAAG,GAAG;IAEhB,OAAOd,OAAO;IACd;EACF,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA,IAAAe,gBAAS,EAAC,MAAM;IACd,IAAIpB,GAAG,KAAKY,SAAS,EAAE;MACrB;IACF;IAEAT,MAAM,CAACkB,KAAK,CAACrB,GAAG,CAAC;IAEjB,OAAO,MAAM;MACXG,MAAM,CAACmB,MAAM,CAAC,CAAC;IACjB,CAAC;IACD;EACF,CAAC,EAAE,CAACtB,GAAG,CAAC,CAAC;;EAET;EACA;EACA,IAAAuB,0BAAmB,EAACxB,GAAG,EAAE,MAAMI,MAAM,EAAE,EAAE,CAAC;;EAE1C;EACA,MAAMqB,gBAAgB,GAAGrB,MAAM,CAACsB,SAAS,CAAC,CAAC;EAC3C,IACED,gBAAgB,CAACE,GAAG,KAAK5B,KAAK,CAACgB,UAAU,CAAC,CAAC,CAAC,IAC5CU,gBAAgB,CAACG,GAAG,KAAK7B,KAAK,CAACgB,UAAU,CAAC,CAAC,CAAC,EAC5C;IACAX,MAAM,CAACU,SAAS,CAAC,CAACf,KAAK,CAACgB,UAAU,CAAC,CAAC,CAAC,EAAEhB,KAAK,CAACgB,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;EAC9D;;EAEA;EACA,oBAAO,IAAAc,sBAAY,EAAC9B,KAAK,CAACW,QAAQ,EAAEN,MAAM,CAACa,UAAU,CAAC,CAAC,CAAC;AAC1D;AAAC,IAAAa,QAAA,GAAAC,OAAA,CAAAlC,OAAA,gBAEc,IAAAmC,WAAI,gBAAC,IAAAC,iBAAU,EAACnC,UAAU,CAAC,CAAC","ignoreList":[]}

package/lib/commonjs/web/index.js

@@ -21,16 +21,24 @@ Object.defineProperty(exports, "MapView", {
     return _MapView.default;
   }
 });
+Object.defineProperty(exports, "MarkerView", {
+  enumerable: true,
+  get: function () {
+    return _MarkerView.default;
+  }
+});
 exports.default = void 0;
 var _MapboxModule = _interopRequireDefault(require("./MapboxModule"));
 var _Camera = _interopRequireDefault(require("./components/Camera"));
 var _MapView = _interopRequireDefault(require("./components/MapView"));
+var _MarkerView = _interopRequireDefault(require("./components/MarkerView"));
 var _Logger = _interopRequireDefault(require("./utils/Logger"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ExportedComponents = {
   Camera: _Camera.default,
   MapView: _MapView.default,
-  Logger: _Logger.default
+  Logger: _Logger.default,
+  MarkerView: _MarkerView.default
 };
 const Mapbox = {
   ..._MapboxModule.default,

package/lib/commonjs/web/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_MapboxModule","_interopRequireDefault","require","_Camera","_MapView","_Logger","obj","__esModule","default","ExportedComponents","Camera","MapView","Logger","Mapbox","MapboxModule","_default","exports"],"sourceRoot":"../../../src","sources":["web/index.js"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,aAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,QAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,OAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAAoC,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEpC,MAAMG,kBAAkB,GAAG;EACzBC,MAAM,EAANA,eAAM;EACNC,OAAO,EAAPA,gBAAO;EACPC,MAAM,EAANA;AACF,CAAC;AAED,MAAMC,MAAM,GAAG;EACb,GAAGC,qBAAY;EACf,GAAGL;AACL,CAAC;AAAC,IAAAM,QAAA,GAAAC,OAAA,CAAAR,OAAA,GAGaK,MAAM","ignoreList":[]}
+{"version":3,"names":["_MapboxModule","_interopRequireDefault","require","_Camera","_MapView","_MarkerView","_Logger","obj","__esModule","default","ExportedComponents","Camera","MapView","Logger","MarkerView","Mapbox","MapboxModule","_default","exports"],"sourceRoot":"../../../src","sources":["web/index.js"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,aAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,QAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,WAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,OAAA,GAAAL,sBAAA,CAAAC,OAAA;AAAoC,SAAAD,uBAAAM,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEpC,MAAMG,kBAAkB,GAAG;EACzBC,MAAM,EAANA,eAAM;EACNC,OAAO,EAAPA,gBAAO;EACPC,MAAM,EAANA,eAAM;EACNC,UAAU,EAAVA;AACF,CAAC;AAED,MAAMC,MAAM,GAAG;EACb,GAAGC,qBAAY;EACf,GAAGN;AACL,CAAC;AAAC,IAAAO,QAAA,GAAAC,OAAA,CAAAT,OAAA,GAGaM,MAAM","ignoreList":[]}

package/lib/module/web/components/Camera.js

@@ -1,27 +1,118 @@
-import React from 'react';
+import { Component } from 'react';
 import MapContext from '../MapContext';
-class Camera extends React.Component {
+function isArray(value) {
+  return value.length !== undefined;
+}
+function buildMapboxGlPadding(padding) {
+  if (padding === undefined) {
+    // undefined
+    return undefined;
+  } else if (!isArray(padding)) {
+    // padding
+    return padding;
+  } else {
+    // Array
+    if (padding.length === 0) {
+      // []
+      return undefined;
+    } else if (padding.length < 2) {
+      // [padding]
+      return padding[0];
+    } else if (padding.length < 4) {
+      // [vertical, horizontal]
+      return {
+        left: padding[0],
+        right: padding[0],
+        top: padding[1],
+        bottom: padding[1]
+      };
+    } else {
+      // [top, right, bottom, left]
+      return {
+        top: padding[0],
+        right: padding[1],
+        bottom: padding[2],
+        left: padding[3]
+      };
+    }
+  }
+}
+class Camera extends Component {
   static contextType = MapContext;
   static UserTrackingModes = [];
   componentDidMount() {
     const {
       map
     } = this.context;
+    if (!map) {
+      return;
+    }
+
+    // minZoomLevel
+    if (this.props.minZoomLevel !== undefined) {
+      map.setMinZoom(this.props.minZoomLevel);
+    }
+
+    // maxZoomLevel
+    if (this.props.maxZoomLevel !== undefined) {
+      map.setMaxZoom(this.props.maxZoomLevel);
+    }
+
+    // zoomLevel
+    if (this.props.zoomLevel !== undefined) {
+      map.setZoom(this.props.zoomLevel);
+    }
+
+    // centerCoordinate
+    if (this.props.centerCoordinate !== undefined) {
+      map.flyTo({
+        center: this.props.centerCoordinate.slice(0, 2),
+        duration: 0
+      });
+    }
+  }
+  fitBounds(northEastCoordinates, southWestCoordinates, padding = 0, animationDuration = 0) {
     const {
-      centerCoordinate
-    } = this.props;
-    if (map && centerCoordinate) {
+      map
+    } = this.context;
+    if (map) {
+      map.fitBounds([northEastCoordinates.slice(0, 2), southWestCoordinates.slice(0, 2)], {
+        padding: buildMapboxGlPadding(padding),
+        duration: animationDuration
+      });
+    }
+  }
+  flyTo(centerCoordinate, animationDuration = 2000) {
+    const {
+      map
+    } = this.context;
+    if (map) {
       map.flyTo({
-        center: centerCoordinate
+        center: centerCoordinate.slice(0, 2),
+        duration: animationDuration
       });
     }
   }
-  fitBounds(northEastCoordinates, southWestCoordinates, padding = 0, animationDuration = 0.0) {
+  moveTo(centerCoordinate, animationDuration = 0) {
     const {
       map
     } = this.context;
     if (map) {
-      map.fitBounds([northEastCoordinates, southWestCoordinates]);
+      map.easeTo({
+        center: centerCoordinate.slice(0, 2),
+        duration: animationDuration
+      });
+    }
+  }
+  zoomTo(zoomLevel, animationDuration = 2000) {
+    const {
+      map
+    } = this.context;
+    if (map) {
+      map.flyTo({
+        zoom: zoomLevel,
+        duration: animationDuration
+      });
     }
   }
   render() {

package/lib/module/web/components/Camera.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","MapContext","Camera","Component","contextType","UserTrackingModes","componentDidMount","map","context","centerCoordinate","props","flyTo","center","fitBounds","northEastCoordinates","southWestCoordinates","padding","animationDuration","render","createElement","Fragment"],"sourceRoot":"../../../../src","sources":["web/components/Camera.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,UAAU,MAAM,eAAe;AAEtC,MAAMC,MAAM,SAASF,KAAK,CAACG,SAAS,CAEjC;EAGD,OAAOC,WAAW,GAAGH,UAAU;EAC/B,OAAOI,iBAAiB,GAAG,EAAE;EAE7BC,iBAAiBA,CAAA,EAAG;IAClB,MAAM;MAAEC;IAAI,CAAC,GAAG,IAAI,CAACC,OAAO;IAC5B,MAAM;MAAEC;IAAiB,CAAC,GAAG,IAAI,CAACC,KAAK;IACvC,IAAIH,GAAG,IAAIE,gBAAgB,EAAE;MAC3BF,GAAG,CAACI,KAAK,CAAC;QAAEC,MAAM,EAAEH;MAAiB,CAAC,CAAC;IACzC;EACF;EAEAI,SAASA,CACPC,oBAAsC,EACtCC,oBAAsC,EACtCC,OAAO,GAAG,CAAC,EACXC,iBAAiB,GAAG,GAAG,EACvB;IACA,MAAM;MAAEV;IAAI,CAAC,GAAG,IAAI,CAACC,OAAO;IAC5B,IAAID,GAAG,EAAE;MACPA,GAAG,CAACM,SAAS,CAAC,CAACC,oBAAoB,EAAEC,oBAAoB,CAAC,CAAC;IAC7D;EACF;EAEAG,MAAMA,CAAA,EAAG;IACP,oBAAOlB,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAAoB,QAAA,MAAI,CAAC;EACd;AACF;AAEA,SAASlB,MAAM;AACf,eAAeA,MAAM","ignoreList":[]}
+{"version":3,"names":["Component","MapContext","isArray","value","length","undefined","buildMapboxGlPadding","padding","left","right","top","bottom","Camera","contextType","UserTrackingModes","componentDidMount","map","context","props","minZoomLevel","setMinZoom","maxZoomLevel","setMaxZoom","zoomLevel","setZoom","centerCoordinate","flyTo","center","slice","duration","fitBounds","northEastCoordinates","southWestCoordinates","animationDuration","moveTo","easeTo","zoomTo","zoom","render","React","createElement","Fragment"],"sourceRoot":"../../../../src","sources":["web/components/Camera.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/web/components/MarkerView.js

@@ -0,0 +1,56 @@
+import { Marker } from 'mapbox-gl';
+import { forwardRef, isValidElement, memo, useContext, useEffect, useImperativeHandle, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import MapContext from '../MapContext';
+function MarkerView(props, ref) {
+  const {
+    map
+  } = useContext(MapContext);
+
+  // Create marker instance
+  const marker = useMemo(() => {
+    const _marker = new Marker({
+      element: /*#__PURE__*/isValidElement(props.children) ? document.createElement('div') : undefined
+    });
+
+    // Set marker coordinates
+    _marker.setLngLat(props.coordinate);
+
+    // Fix marker position
+    const {
+      style
+    } = _marker.getElement();
+    style.position = 'absolute';
+    style.top = '0';
+    style.left = '0';
+    return _marker;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Add marker to map
+  useEffect(() => {
+    if (map === undefined) {
+      return;
+    }
+    marker.addTo(map);
+    return () => {
+      marker.remove();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [map]);
+
+  // Expose marker instance
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useImperativeHandle(ref, () => marker, []);
+
+  // Update marker coordinates
+  const markerCoordinate = marker.getLngLat();
+  if (markerCoordinate.lng !== props.coordinate[0] || markerCoordinate.lat !== props.coordinate[1]) {
+    marker.setLngLat([props.coordinate[0], props.coordinate[1]]);
+  }
+
+  // Inject children into marker element
+  return /*#__PURE__*/createPortal(props.children, marker.getElement());
+}
+export default /*#__PURE__*/memo( /*#__PURE__*/forwardRef(MarkerView));
+//# sourceMappingURL=MarkerView.js.map

package/lib/module/web/components/MarkerView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Marker","forwardRef","isValidElement","memo","useContext","useEffect","useImperativeHandle","useMemo","createPortal","MapContext","MarkerView","props","ref","map","marker","_marker","element","children","document","createElement","undefined","setLngLat","coordinate","style","getElement","position","top","left","addTo","remove","markerCoordinate","getLngLat","lng","lat"],"sourceRoot":"../../../../src","sources":["web/components/MarkerView.tsx"],"mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AAClC,SACEC,UAAU,EACVC,cAAc,EACdC,IAAI,EAGJC,UAAU,EACVC,SAAS,EACTC,mBAAmB,EACnBC,OAAO,QACF,OAAO;AACd,SAASC,YAAY,QAAQ,WAAW;AAExC,OAAOC,UAAU,MAAM,eAAe;AAOtC,SAASC,UAAUA,CAACC,KAAsB,EAAEC,GAAgB,EAAE;EAC5D,MAAM;IAAEC;EAAI,CAAC,GAAGT,UAAU,CAACK,UAAU,CAAC;;EAEtC;EACA,MAAMK,MAAc,GAAGP,OAAO,CAAC,MAAM;IACnC,MAAMQ,OAAO,GAAG,IAAIf,MAAM,CAAC;MACzBgB,OAAO,EAAE,aAAAd,cAAc,CAACS,KAAK,CAACM,QAAQ,CAAC,GACnCC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC,GAC7BC;IACN,CAAC,CAAC;;IAEF;IACAL,OAAO,CAACM,SAAS,CAACV,KAAK,CAACW,UAAU,CAAC;;IAEnC;IACA,MAAM;MAAEC;IAAM,CAAC,GAAGR,OAAO,CAACS,UAAU,CAAC,CAAC;IACtCD,KAAK,CAACE,QAAQ,GAAG,UAAU;IAC3BF,KAAK,CAACG,GAAG,GAAG,GAAG;IACfH,KAAK,CAACI,IAAI,GAAG,GAAG;IAEhB,OAAOZ,OAAO;IACd;EACF,CAAC,EAAE,EAAE,CAAC;;EAEN;EACAV,SAAS,CAAC,MAAM;IACd,IAAIQ,GAAG,KAAKO,SAAS,EAAE;MACrB;IACF;IAEAN,MAAM,CAACc,KAAK,CAACf,GAAG,CAAC;IAEjB,OAAO,MAAM;MACXC,MAAM,CAACe,MAAM,CAAC,CAAC;IACjB,CAAC;IACD;EACF,CAAC,EAAE,CAAChB,GAAG,CAAC,CAAC;;EAET;EACA;EACAP,mBAAmB,CAACM,GAAG,EAAE,MAAME,MAAM,EAAE,EAAE,CAAC;;EAE1C;EACA,MAAMgB,gBAAgB,GAAGhB,MAAM,CAACiB,SAAS,CAAC,CAAC;EAC3C,IACED,gBAAgB,CAACE,GAAG,KAAKrB,KAAK,CAACW,UAAU,CAAC,CAAC,CAAC,IAC5CQ,gBAAgB,CAACG,GAAG,KAAKtB,KAAK,CAACW,UAAU,CAAC,CAAC,CAAC,EAC5C;IACAR,MAAM,CAACO,SAAS,CAAC,CAACV,KAAK,CAACW,UAAU,CAAC,CAAC,CAAC,EAAEX,KAAK,CAACW,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;EAC9D;;EAEA;EACA,oBAAOd,YAAY,CAACG,KAAK,CAACM,QAAQ,EAAEH,MAAM,CAACU,UAAU,CAAC,CAAC,CAAC;AAC1D;AAEA,4BAAerB,IAAI,eAACF,UAAU,CAACS,UAAU,CAAC,CAAC","ignoreList":[]}

package/lib/module/web/index.js

@@ -1,16 +1,18 @@
 import MapboxModule from './MapboxModule';
 import Camera from './components/Camera';
 import MapView from './components/MapView';
+import MarkerView from './components/MarkerView';
 import Logger from './utils/Logger';
 const ExportedComponents = {
   Camera,
   MapView,
-  Logger
+  Logger,
+  MarkerView
 };
 const Mapbox = {
   ...MapboxModule,
   ...ExportedComponents
 };
-export { Camera, MapView, Logger };
+export { Camera, MapView, Logger, MarkerView };
 export default Mapbox;
 //# sourceMappingURL=index.js.map

package/lib/module/web/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["MapboxModule","Camera","MapView","Logger","ExportedComponents","Mapbox"],"sourceRoot":"../../../src","sources":["web/index.js"],"mappings":"AAAA,OAAOA,YAAY,MAAM,gBAAgB;AACzC,OAAOC,MAAM,MAAM,qBAAqB;AACxC,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,OAAOC,MAAM,MAAM,gBAAgB;AAEnC,MAAMC,kBAAkB,GAAG;EACzBH,MAAM;EACNC,OAAO;EACPC;AACF,CAAC;AAED,MAAME,MAAM,GAAG;EACb,GAAGL,YAAY;EACf,GAAGI;AACL,CAAC;AAED,SAASH,MAAM,EAAEC,OAAO,EAAEC,MAAM;AAChC,eAAeE,MAAM","ignoreList":[]}
+{"version":3,"names":["MapboxModule","Camera","MapView","MarkerView","Logger","ExportedComponents","Mapbox"],"sourceRoot":"../../../src","sources":["web/index.js"],"mappings":"AAAA,OAAOA,YAAY,MAAM,gBAAgB;AACzC,OAAOC,MAAM,MAAM,qBAAqB;AACxC,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,OAAOC,UAAU,MAAM,yBAAyB;AAChD,OAAOC,MAAM,MAAM,gBAAgB;AAEnC,MAAMC,kBAAkB,GAAG;EACzBJ,MAAM;EACNC,OAAO;EACPE,MAAM;EACND;AACF,CAAC;AAED,MAAMG,MAAM,GAAG;EACb,GAAGN,YAAY;EACf,GAAGK;AACL,CAAC;AAED,SAASJ,MAAM,EAAEC,OAAO,EAAEE,MAAM,EAAED,UAAU;AAC5C,eAAeG,MAAM","ignoreList":[]}

package/lib/typescript/src/web/components/Camera.d.ts

@@ -1,17 +1,20 @@
 /// <reference types="mapbox-gl" />
-import React from 'react';
+import { Component, ContextType } from 'react';
+import { CameraProps, CameraRef } from '../../components/Camera';
+import { Position } from '../../types/Position';
 import MapContext from '../MapContext';
-declare class Camera extends React.Component<{
-    centerCoordinate: [number, number] | null;
-}> {
-    context: React.ContextType<typeof MapContext>;
-    static contextType: React.Context<{
+declare class Camera extends Component<Pick<CameraProps, 'centerCoordinate' | 'zoomLevel' | 'minZoomLevel' | 'maxZoomLevel'>> implements Omit<CameraRef, 'setCamera'> {
+    context: ContextType<typeof MapContext>;
+    static contextType: import("react").Context<{
         map?: import("mapbox-gl").Map | undefined;
     }>;
     static UserTrackingModes: never[];
     componentDidMount(): void;
-    fitBounds(northEastCoordinates: [number, number], southWestCoordinates: [number, number], padding?: number, animationDuration?: number): void;
-    render(): React.JSX.Element;
+    fitBounds(northEastCoordinates: Position, southWestCoordinates: Position, padding?: number | number[], animationDuration?: number): void;
+    flyTo(centerCoordinate: Position, animationDuration?: number): void;
+    moveTo(centerCoordinate: Position, animationDuration?: number): void;
+    zoomTo(zoomLevel: number, animationDuration?: number): void;
+    render(): import("react").JSX.Element;
 }
 export { Camera };
 export default Camera;

package/lib/typescript/src/web/components/Camera.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Camera.d.ts","sourceRoot":"","sources":["../../../../../src/web/components/Camera.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAAU,MAAM,eAAe,CAAC;AAEvC,cAAM,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC;IACnC,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;CAC3C,CAAC;IACA,OAAO,EAAG,KAAK,CAAC,WAAW,CAAC,OAAO,UAAU,CAAC,CAAC;IAE/C,MAAM,CAAC,WAAW;;OAAc;IAChC,MAAM,CAAC,iBAAiB,UAAM;IAE9B,iBAAiB;IAQjB,SAAS,CACP,oBAAoB,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EACtC,oBAAoB,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EACtC,OAAO,SAAI,EACX,iBAAiB,SAAM;IAQzB,MAAM;CAGP;AAED,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Camera.d.ts","sourceRoot":"","sources":["../../../../../src/web/components/Camera.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,UAAU,MAAM,eAAe,CAAC;AA2CvC,cAAM,MACJ,SAAQ,SAAS,CACf,IAAI,CACF,WAAW,EACX,kBAAkB,GAAG,WAAW,GAAG,cAAc,GAAG,cAAc,CACnE,CAEH,YAAW,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC;IAEvC,OAAO,EAAG,WAAW,CAAC,OAAO,UAAU,CAAC,CAAC;IAEzC,MAAM,CAAC,WAAW;;OAAc;IAChC,MAAM,CAAC,iBAAiB,UAAM;IAE9B,iBAAiB;IA8BjB,SAAS,CACP,oBAAoB,EAAE,QAAQ,EAC9B,oBAAoB,EAAE,QAAQ,EAC9B,OAAO,GAAE,MAAM,GAAG,MAAM,EAAM,EAC9B,iBAAiB,SAAI;IAiBvB,KAAK,CAAC,gBAAgB,EAAE,QAAQ,EAAE,iBAAiB,SAAO;IAU1D,MAAM,CAAC,gBAAgB,EAAE,QAAQ,EAAE,iBAAiB,SAAI;IAUxD,MAAM,CAAC,SAAS,EAAE,MAAM,EAAE,iBAAiB,SAAO;IAUlD,MAAM;CAGP;AAED,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,eAAe,MAAM,CAAC"}

package/lib/typescript/src/web/components/MarkerView.d.ts

@@ -0,0 +1,9 @@
+import { Marker } from 'mapbox-gl';
+import { ReactElement } from 'react';
+type MarkerViewProps = {
+    coordinate: [number, number];
+    children?: ReactElement;
+};
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<MarkerViewProps & import("react").RefAttributes<Marker>>>;
+export default _default;
+//# sourceMappingURL=MarkerView.d.ts.map

package/lib/typescript/src/web/components/MarkerView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkerView.d.ts","sourceRoot":"","sources":["../../../../../src/web/components/MarkerView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAIL,YAAY,EAMb,MAAM,OAAO,CAAC;AAKf,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,YAAY,CAAC;CACzB,CAAC;;AAyDF,wBAA4C"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rnmapbox/maps",
   "description": "A Mapbox react native module for creating custom maps",
-  "version": "10.1.22",
+  "version": "10.1.24",
   "publishConfig": {
     "access": "public"
   },
@@ -59,7 +59,8 @@
     "expo": ">=47.0.0",
     "mapbox-gl": "^2.9.0",
     "react": ">=16.6.1",
-    "react-native": ">=0.59.9"
+    "react-native": ">=0.59.9",
+    "react-dom": ">= 17.0.0"
   },
   "peerDependenciesMeta": {
     "expo": {
@@ -67,6 +68,9 @@
     },
     "mapbox-gl": {
       "optional": true
+    },
+    "react-dom": {
+      "optional": true
     }
   },
   "dependencies": {

package/rnmapbox-maps.podspec

@@ -193,7 +193,7 @@ def $RNMapboxMaps.pre_install(installer)
 end
 
 ## RNMapboxMapsDownloadToken
-# expo does not supports `.netrc`, so we need to patch curl commend used by cocoapods to pass the credentials
+# expo does not support `.netrc`, so we need to patch curl command used by cocoapods to pass the credentials
 
 if $RNMapboxMapsDownloadToken
   module AddCredentialsToCurlWhenDownloadingMapbox

package/src/web/components/Camera.tsx

@@ -1,32 +1,142 @@
-import React from 'react';
+import { Component, ContextType } from 'react';
 
+import { CameraProps, CameraRef } from '../../components/Camera';
+import { Position } from '../../types/Position';
 import MapContext from '../MapContext';
 
-class Camera extends React.Component<{
-  centerCoordinate: [number, number] | null;
-}> {
-  context!: React.ContextType<typeof MapContext>;
+function isArray<T>(value: T | ArrayLike<T>): value is ArrayLike<T> {
+  return (value as ArrayLike<T>).length !== undefined;
+}
+
+function buildMapboxGlPadding(
+  padding?: number | number[],
+): number | mapboxgl.PaddingOptions | undefined {
+  if (padding === undefined) {
+    // undefined
+    return undefined;
+  } else if (!isArray(padding)) {
+    // padding
+    return padding;
+  } else {
+    // Array
+    if (padding.length === 0) {
+      // []
+      return undefined;
+    } else if (padding.length < 2) {
+      // [padding]
+      return padding[0];
+    } else if (padding.length < 4) {
+      // [vertical, horizontal]
+      return {
+        left: padding[0],
+        right: padding[0],
+        top: padding[1],
+        bottom: padding[1],
+      };
+    } else {
+      // [top, right, bottom, left]
+      return {
+        top: padding[0],
+        right: padding[1],
+        bottom: padding[2],
+        left: padding[3],
+      };
+    }
+  }
+}
+
+class Camera
+  extends Component<
+    Pick<
+      CameraProps,
+      'centerCoordinate' | 'zoomLevel' | 'minZoomLevel' | 'maxZoomLevel'
+    >
+  >
+  implements Omit<CameraRef, 'setCamera'>
+{
+  context!: ContextType<typeof MapContext>;
 
   static contextType = MapContext;
   static UserTrackingModes = [];
 
   componentDidMount() {
     const { map } = this.context;
-    const { centerCoordinate } = this.props;
-    if (map && centerCoordinate) {
-      map.flyTo({ center: centerCoordinate });
+    if (!map) {
+      return;
+    }
+
+    // minZoomLevel
+    if (this.props.minZoomLevel !== undefined) {
+      map.setMinZoom(this.props.minZoomLevel);
+    }
+
+    // maxZoomLevel
+    if (this.props.maxZoomLevel !== undefined) {
+      map.setMaxZoom(this.props.maxZoomLevel);
+    }
+
+    // zoomLevel
+    if (this.props.zoomLevel !== undefined) {
+      map.setZoom(this.props.zoomLevel);
+    }
+
+    // centerCoordinate
+    if (this.props.centerCoordinate !== undefined) {
+      map.flyTo({
+        center: this.props.centerCoordinate.slice(0, 2) as [number, number],
+        duration: 0,
+      });
     }
   }
 
   fitBounds(
-    northEastCoordinates: [number, number],
-    southWestCoordinates: [number, number],
-    padding = 0,
-    animationDuration = 0.0,
+    northEastCoordinates: Position,
+    southWestCoordinates: Position,
+    padding: number | number[] = 0,
+    animationDuration = 0,
   ) {
     const { map } = this.context;
     if (map) {
-      map.fitBounds([northEastCoordinates, southWestCoordinates]);
+      map.fitBounds(
+        [
+          northEastCoordinates.slice(0, 2) as [number, number],
+          southWestCoordinates.slice(0, 2) as [number, number],
+        ],
+        {
+          padding: buildMapboxGlPadding(padding),
+          duration: animationDuration,
+        },
+      );
+    }
+  }
+
+  flyTo(centerCoordinate: Position, animationDuration = 2000) {
+    const { map } = this.context;
+    if (map) {
+      map.flyTo({
+        center: centerCoordinate.slice(0, 2) as [number, number],
+        duration: animationDuration,
+      });
+    }
+  }
+
+  moveTo(centerCoordinate: Position, animationDuration = 0) {
+    const { map } = this.context;
+    if (map) {
+      map.easeTo({
+        center: centerCoordinate.slice(0, 2) as [number, number],
+        duration: animationDuration,
+      });
+    }
+  }
+
+  zoomTo(zoomLevel: number, animationDuration = 2000) {
+    const { map } = this.context;
+    if (map) {
+      map.flyTo({
+        zoom: zoomLevel,
+        duration: animationDuration,
+      });
     }
   }
 

package/src/web/components/MarkerView.tsx

@@ -0,0 +1,77 @@
+import { Marker } from 'mapbox-gl';
+import {
+  forwardRef,
+  isValidElement,
+  memo,
+  ReactElement,
+  Ref,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+import MapContext from '../MapContext';
+
+type MarkerViewProps = {
+  coordinate: [number, number];
+  children?: ReactElement;
+};
+
+function MarkerView(props: MarkerViewProps, ref: Ref<Marker>) {
+  const { map } = useContext(MapContext);
+
+  // Create marker instance
+  const marker: Marker = useMemo(() => {
+    const _marker = new Marker({
+      element: isValidElement(props.children)
+        ? document.createElement('div')
+        : undefined,
+    });
+
+    // Set marker coordinates
+    _marker.setLngLat(props.coordinate);
+
+    // Fix marker position
+    const { style } = _marker.getElement();
+    style.position = 'absolute';
+    style.top = '0';
+    style.left = '0';
+
+    return _marker;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Add marker to map
+  useEffect(() => {
+    if (map === undefined) {
+      return;
+    }
+
+    marker.addTo(map);
+
+    return () => {
+      marker.remove();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [map]);
+
+  // Expose marker instance
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useImperativeHandle(ref, () => marker, []);
+
+  // Update marker coordinates
+  const markerCoordinate = marker.getLngLat();
+  if (
+    markerCoordinate.lng !== props.coordinate[0] ||
+    markerCoordinate.lat !== props.coordinate[1]
+  ) {
+    marker.setLngLat([props.coordinate[0], props.coordinate[1]]);
+  }
+
+  // Inject children into marker element
+  return createPortal(props.children, marker.getElement());
+}
+
+export default memo(forwardRef(MarkerView));

package/src/web/index.js

@@ -1,12 +1,14 @@
 import MapboxModule from './MapboxModule';
 import Camera from './components/Camera';
 import MapView from './components/MapView';
+import MarkerView from './components/MarkerView';
 import Logger from './utils/Logger';
 
 const ExportedComponents = {
   Camera,
   MapView,
   Logger,
+  MarkerView,
 };
 
 const Mapbox = {
@@ -14,5 +16,5 @@ const Mapbox = {
   ...ExportedComponents,
 };
 
-export { Camera, MapView, Logger };
+export { Camera, MapView, Logger, MarkerView };
 export default Mapbox;