fix(web): fix marker not defined (#3487)

docs/Camera.md

@@ -347,4 +347,4 @@ camera.zoomTo(16, 100);
 ```
 
 
-
+[Fit](../examples/Camera/Fit)

docs/examples.json

@@ -759,6 +759,58 @@
     "metadata": {
       "title": "Camera"
     },
-    "examples": []
+    "examples": [
+      {
+        "metadata": {
+          "title": "Fit",
+          "tags": [
+            "Camera",
+            "Camera#zoomTo"
+          ],
+          "docs": "\nChange camera via imperative methods"
+        },
+        "fullPath": "example/src/examples/Camera/Fit.js",
+        "relPath": "Camera/Fit.js",
+        "name": "Fit"
+      },
+      {
+        "metadata": {
+          "title": "FlyTo",
+          "tags": [
+            "Camera"
+          ],
+          "docs": "\nChange camera via change of camera properties\n"
+        },
+        "fullPath": "example/src/examples/Camera/FlyTo.js",
+        "relPath": "Camera/FlyTo.js",
+        "name": "FlyTo"
+      },
+      {
+        "metadata": {
+          "title": "GetCenter",
+          "tags": [
+            "Camera",
+            "Camera#getCenter"
+          ],
+          "docs": "\nGet center of map via Camera#getCenter\n"
+        },
+        "fullPath": "example/src/examples/Camera/GetCenter.js",
+        "relPath": "Camera/GetCenter.js",
+        "name": "GetCenter"
+      },
+      {
+        "metadata": {
+          "title": "GetZoom",
+          "tags": [
+            "Camera",
+            "Camera#getZoom"
+          ],
+          "docs": "\nGet zoom level of map via Camera#getZoom\n"
+        },
+        "fullPath": "example/src/examples/Camera/GetZoom.js",
+        "relPath": "Camera/GetZoom.js",
+        "name": "GetZoom"
+      }
+    ]
   }
 ]

example/src/examples/Camera/Fit.js

@@ -1,11 +1,9 @@
 import React from 'react';
 import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
 import { isEqual } from 'lodash';
-import MapboxGL from '@rnmapbox/maps';
+import Mapbox from '@rnmapbox/maps';
 
 import sheet from '../../styles/sheet';
-import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
-import Page from '../common/Page';
 
 const buildPadding = ([top, right, bottom, left] = [0, 0, 0, 0]) => {
   return {
@@ -40,8 +38,6 @@ const paddingTop = buildPadding([200, 40, 40, 40]);
 const paddingBottom = buildPadding([40, 40, 200, 40]);
 
 class Fit extends React.Component {
-  static propTypes = { ...BaseExamplePropTypes };
-
   constructor(props) {
     super(props);
 
@@ -210,19 +206,19 @@ class Fit extends React.Component {
     });
 
     return (
-      <Page {...this.props}>
-        <MapboxGL.MapView
-          styleURL={MapboxGL.StyleURL.Satellite}
+      <>
+        <Mapbox.MapView
+          styleURL={Mapbox.StyleURL.Satellite}
           style={sheet.matchParent}
         >
-          <MapboxGL.Camera
+          <Mapbox.Camera
             ref={(ref) => (this.camera = ref)}
             {...this.cameraProps()}
           />
           <View style={{ flex: 1, ...padding }}>
             <View style={{ flex: 1, borderColor: 'white', borderWidth: 4 }} />
           </View>
-        </MapboxGL.MapView>
+        </Mapbox.MapView>
 
         <ScrollView
           style={{
@@ -293,9 +289,19 @@ class Fit extends React.Component {
             },
           ])}
         </ScrollView>
-      </Page>
+      </>
     );
   }
 }
 
 export default Fit;
+/* end-example-doc */
+
+/** @type ExampleWithMetadata['metadata'] */
+const metadata = {
+  title: 'Fit',
+  tags: ['Camera', 'Camera#zoomTo'],
+  docs: `
+Change camera via imperative methods`,
+};
+Fit.metadata = metadata;

example/src/examples/Camera/FlyTo.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert } from 'react-native';
+import { Alert, Platform } from 'react-native';
 import Mapbox from '@rnmapbox/maps';
 import { ButtonGroup } from '@rneui/base';
 
@@ -87,17 +87,32 @@ class FlyTo extends React.Component {
             centerCoordinate={this.state.location}
           />
 
-          <Mapbox.UserLocation />
-
-          <Mapbox.FillExtrusionLayer
-            id="building3d"
-            sourceLayerID="building"
-            style={layerStyles.building}
-          />
+          {Platform.OS !== 'web' && (
+            <>
+              <Mapbox.UserLocation />
+
+              <Mapbox.FillExtrusionLayer
+                id="building3d"
+                sourceLayerID="building"
+                style={layerStyles.building}
+              />
+            </>
+          )}
         </Mapbox.MapView>
       </>
     );
   }
 }
 
 export default FlyTo;
+/* end-example-doc */
+
+/** @type ExampleWithMetadata['metadata'] */
+const metadata = {
+  title: 'FlyTo',
+  tags: ['Camera'],
+  docs: `
+Change camera via change of camera properties
+`,
+};
+FlyTo.metadata = metadata;

example/src/examples/Camera/GetCenter.js

@@ -1,20 +1,14 @@
 import React from 'react';
 import { Text } from 'react-native';
-import MapboxGL from '@rnmapbox/maps';
+import Mapbox from '@rnmapbox/maps';
 
-import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
-import Page from '../common/Page';
 import Bubble from '../common/Bubble';
 
 const styles = {
   mapView: { flex: 1 },
 };
 
 class GetCenter extends React.Component {
-  static propTypes = {
-    ...BaseExamplePropTypes,
-  };
-
   constructor(props) {
     super(props);
 
@@ -44,27 +38,38 @@ class GetCenter extends React.Component {
 
   render() {
     return (
-      <Page {...this.props}>
-        <MapboxGL.MapView
+      <>
+        <Mapbox.MapView
           onRegionDidChange={this.onRegionDidChange}
           ref={(c) => (this._map = c)}
           onPress={this.onPress}
           style={styles.mapView}
         >
-          <MapboxGL.Camera
+          <Mapbox.Camera
             zoomLevel={9}
             centerCoordinate={[-73.970895, 40.723279]}
           />
-        </MapboxGL.MapView>
+        </Mapbox.MapView>
 
         <Bubble>
           <Text>Center</Text>
           <Text>{this.getLng()}</Text>
           <Text>{this.getLat()}</Text>
         </Bubble>
-      </Page>
+      </>
     );
   }
 }
 
 export default GetCenter;
+/* end-example-doc */
+
+/** @type ExampleWithMetadata['metadata'] */
+const metadata = {
+  title: 'GetCenter',
+  tags: ['Camera', 'Camera#getCenter'],
+  docs: `
+Get center of map via Camera#getCenter
+`,
+};
+GetCenter.metadata = metadata;

example/src/examples/Camera/GetZoom.js

@@ -2,19 +2,13 @@ import React from 'react';
 import { Text } from 'react-native';
 import MapboxGL from '@rnmapbox/maps';
 
-import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
-import Page from '../common/Page';
 import Bubble from '../common/Bubble';
 
 const styles = {
   mapView: { flex: 1 },
 };
 
 class GetZoom extends React.Component {
-  static propTypes = {
-    ...BaseExamplePropTypes,
-  };
-
   constructor(props) {
     super(props);
 
@@ -32,7 +26,7 @@ class GetZoom extends React.Component {
 
   render() {
     return (
-      <Page {...this.props}>
+      <>
         <MapboxGL.MapView
           onRegionDidChange={this.onRegionDidChange}
           ref={(c) => (this._map = c)}
@@ -48,9 +42,20 @@ class GetZoom extends React.Component {
         <Bubble>
           <Text>Current zoom: {this.state.zoom}</Text>
         </Bubble>
-      </Page>
+      </>
     );
   }
 }
 
 export default GetZoom;
+/* end-example-doc */
+
+/** @type ExampleWithMetadata['metadata'] */
+const metadata = {
+  title: 'GetZoom',
+  tags: ['Camera', 'Camera#getZoom'],
+  docs: `
+Get zoom level of map via Camera#getZoom
+`,
+};
+GetZoom.metadata = metadata;

src/web/components/MarkerView.tsx

@@ -34,7 +34,7 @@ function MarkerView(props: MarkerViewProps, ref: Ref<Marker>) {
     _marker.setLngLat(props.coordinate);
 
     // Fix marker position
-    const { style } = marker.getElement();
+    const { style } = _marker.getElement();
     style.position = 'absolute';
     style.top = '0';
     style.left = '0';

src/web/index.js

@@ -16,5 +16,5 @@ const Mapbox = {
   ...ExportedComponents,
 };
 
-export { Camera, Logger, MapView, MarkerView };
+export { Camera, MapView, Logger, MarkerView };
 export default Mapbox;