Improved web Mapview and MarkerView

src/components/MapView.tsx

@@ -1,31 +1,31 @@
+import { debounce } from 'debounce';
 import React, { Component } from 'react';
 import {
- View,
- StyleSheet,
- NativeModules,
- ViewProps,
- NativeSyntheticEvent,
- NativeMethods,
  HostComponent,
  LayoutChangeEvent,
+ NativeMethods,
+ NativeModules,
+ NativeSyntheticEvent,
+ StyleSheet,
+ View,
+ ViewProps,
 } from 'react-native';
-import { debounce } from 'debounce';
 
+import { type Location } from '../modules/location/locationManager';
+import NativeMapViewModule from '../specs/NativeMapViewModule';
 import NativeMapView, {
  type NativeMapViewActual,
 } from '../specs/RNMBXMapViewNativeComponent';
-import NativeMapViewModule from '../specs/NativeMapViewModule';
+import { type Position } from '../types/Position';
 import {
- isFunction,
  isAndroid,
+ isFunction,
  type NativeArg,
  type OrnamentPositonProp,
 } from '../utils';
 import { getFilter } from '../utils/filterUtils';
 import Logger from '../utils/Logger';
 import { FilterExpression } from '../utils/MapboxStyles';
-import { type Position } from '../types/Position';
-import { type Location } from '../modules/location/locationManager';
 
 import NativeBridgeComponent from './NativeBridgeComponent';
 
@@ -158,7 +158,7 @@ type LocalizeLabels =
  }
  | true;
 
-type Props = ViewProps & {
+export type MapViewProps = ViewProps & {
  /**
  * The distance from the edges of the map view’s frame to the edges of the map view’s logical viewport.
  * @deprecated use Camera `padding` instead
@@ -474,10 +474,10 @@ type Debounced<F> = F & { clear(): void; flush(): void };
  * MapView backed by Mapbox Native GL
  */
 class MapView extends NativeBridgeComponent(
- React.PureComponent<Props>,
+ React.PureComponent<MapViewProps>,
  NativeMapViewModule,
 ) {
- static defaultProps: Props = {
+ static defaultProps: MapViewProps = {
  scrollEnabled: true,
  pitchEnabled: true,
  rotateEnabled: true,
@@ -527,7 +527,7 @@ class MapView extends NativeBridgeComponent(
  isUserInteraction: boolean;
  };
 
- constructor(props: Props) {
+ constructor(props: MapViewProps) {
  super(props);
 
  this.logger = Logger.sharedInstance();
@@ -570,11 +570,11 @@ class MapView extends NativeBridgeComponent(
  this.logger.stop();
  }
 
- UNSAFE_componentWillReceiveProps(nextProps: Props) {
+ UNSAFE_componentWillReceiveProps(nextProps: MapViewProps) {
  this._setHandledMapChangedEvents(nextProps);
  }
 
- _setHandledMapChangedEvents(props: Props) {
+ _setHandledMapChangedEvents(props: MapViewProps) {
  if (isAndroid() || RNMBXModule.MapboxV10) {
  const events: string[] = [];
 
@@ -1110,7 +1110,7 @@ class MapView extends NativeBridgeComponent(
  }
  }
 
- _setStyleURL(props: Props) {
+ _setStyleURL(props: MapViewProps) {
  // user set a styleURL, no need to alter props
  if (props.styleURL) {
  return;
@@ -1128,7 +1128,7 @@ class MapView extends NativeBridgeComponent(
  }
  }
 
- _setLocalizeLabels(props: Props) {
+ _setLocalizeLabels(props: MapViewProps) {
  if (!RNMBXModule.MapboxV10) {
  return;
  }
@@ -1184,7 +1184,7 @@ class MapView extends NativeBridgeComponent(
 }
 
 type NativeProps = Omit<
- Props,
+ MapViewProps,
  'onPress' | 'onLongPress' | 'onCameraChanged'
 > & {
  onPress?: (

src/components/MarkerView.tsx

@@ -11,7 +11,7 @@ import PointAnnotation from './PointAnnotation';
 
 const Mapbox = NativeModules.RNMBXModule;
 
-type Props = ViewProps & {
+export type MarkerViewProps = ViewProps & {
  /**
  * The center point (specified as a map coordinate) of the marker.
  */
@@ -61,8 +61,8 @@ type Props = ViewProps & {
  * This component has no dedicated `onPress` method. Instead, you should handle gestures
  * with the React views passed in as `children`.
  */
-class MarkerView extends React.PureComponent<Props> {
- static defaultProps: Partial<Props> = {
+class MarkerView extends React.PureComponent<MarkerViewProps> {
+ static defaultProps: Partial<MarkerViewProps> = {
  anchor: { x: 0.5, y: 0.5 },
  allowOverlap: false,
  allowOverlapWithPuck: false,

src/web/components/MapView.tsx

@@ -1,51 +1,66 @@
-import React from 'react';
 import mapboxgl from 'mapbox-gl';
+import React, { useEffect, useRef, useState } from 'react';
 
+import { point } from '@turf/helpers';
+import { MapViewProps } from '../../components/MapView';
 import MapContext from '../MapContext';
 
 /**
  * MapView backed by Mapbox GL KS
  */
-class MapView extends React.Component<
- { styleURL: string; children: JSX.Element },
- { map?: object | null }
-> {
- state = { map: null };
- mapContainer: HTMLElement | null = null;
- map: object | null = null;
-
- componentDidMount() {
- const { styleURL } = this.props;
- if (!this.mapContainer) {
- console.error('MapView - mapContainer should is null');
+export default function MapView(
+ props: Pick<MapViewProps, 'styleURL' | 'children' | 'onPress'>,
+) {
+ const mapContainerRef = useRef<HTMLDivElement>(null);
+
+ const [map, setMap] = useState<mapboxgl.Map | undefined>(undefined);
+
+ const _propsRef = useRef(props);
+ useEffect(() => {
+ _propsRef.current = props;
+ }, [props]);
+
+ useEffect(() => {
+ if (mapContainerRef.current === null) {
+ console.error('MapView - mapContainerRef should not be null');
  return;
  }
- const map = new mapboxgl.Map({
- container: this.mapContainer,
+
+ // Initialize map
+ const { styleURL } = props;
+ const _map = new mapboxgl.Map({
+ container: mapContainerRef.current,
  style: styleURL || 'mapbox://styles/mapbox/streets-v11',
  });
- this.map = map;
- this.setState({ map });
- }
-
- render() {
- const { children } = this.props;
- const { map } = this.state;
- return (
- <div
- style={{ width: '100%', height: '100%' }}
- ref={(el) => (this.mapContainer = el)}
- >
- {map && (
- <div style={{ position: 'absolute' }}>
- <MapContext.Provider value={{ map }}>
- {children}
- </MapContext.Provider>
- </div>
- )}
- </div>
- );
- }
-}
 
-export default MapView;
+ // Set map event listeners
+ _map.on('click', (e) => {
+ if (_propsRef.current.onPress === undefined) {
+ return;
+ }
+
+ _propsRef.current.onPress(point(e.lngLat.toArray()));
+ });
+
+ setMap(_map);
+
+ return () => {
+ _map.remove();
+ if (_map === map) {
+ setMap(undefined);
+ }
+ };
+ }, []);
+
+ return (
+ <div style={{ width: '100%', height: '100%' }} ref={mapContainerRef}>
+ {map && (
+ <div style={{ position: 'absolute' }}>
+ <MapContext.Provider value={{ map }}>
+ {props.children}
+ </MapContext.Provider>
+ </div>
+ )}
+ </div>
+ );
+}

src/web/components/MarkerView.tsx

@@ -3,7 +3,6 @@ import {
  forwardRef,
  isValidElement,
  memo,
- ReactElement,
  Ref,
  useContext,
  useEffect,
@@ -12,14 +11,13 @@ import {
 } from 'react';
 import { createPortal } from 'react-dom';
 
+import { MarkerViewProps } from '../../components/MarkerView';
 import MapContext from '../MapContext';
 
-type MarkerViewProps = {
- coordinate: [number, number];
- children?: ReactElement;
-};
-
-function MarkerView(props: MarkerViewProps, ref: Ref<Marker>) {
+function MarkerView(
+ props: Pick<MarkerViewProps, 'coordinate' | 'children'>,
+ ref: Ref<Marker>,
+) {
  const { map } = useContext(MapContext);
 
  // Create marker instance
@@ -30,8 +28,12 @@ function MarkerView(props: MarkerViewProps, ref: Ref<Marker>) {
  : undefined,
  });
 
- // Set marker coordinates
- _marker.setLngLat(props.coordinate);
+ if (props.coordinate.length !== 2) {
+ console.error('MarkerView - coordinate should be an array of length 2');
+ } else {
+ // Set marker coordinates
+ _marker.setLngLat(props.coordinate as [number, number]);
+ }
 
  // Fix marker position
  const { style } = _marker.getElement();