FAQ

Enable Right-to-Left Language Support

import {setRTLTextPlugin} from '@goongmaps/goong-map-react';

setRTLTextPlugin(
  // find out the latest version at https://www.npmjs.com/package/@mapbox/mapbox-gl-rtl-text
  'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js',
  null,
  // lazy: only load when the map first encounters Hebrew or Arabic text
  true
);

This is the same as import {setRTLTextPlugin} from '@goongmaps/goong-map-react' in the browser, but will not crash in node. The export mainly offers a convenience when using server-side rendering.

To use this API, consult Mapbox's setRTLTextPlugin documentation.

Where is fitBounds?

You can use the WebMercatorViewport utility to find the target viewport that fits around a longitude-latitude bounding box:

import {WebMercatorViewport} from '@goongmaps/goong-map-react';

const viewport = new WebMercatorViewport({width: 800, height: 600})
    .fitBounds([[-122.4, 37.7], [-122.5, 37.8]], {
      padding: 20,
      offset: [0, -100]
    });

/* viewport is a WebMercatorViewport instance, containing these fields:
    latitude: 37.75001689223574,
    longitude: -122.44999999999976,
    zoom: 10.966817190981073,
    pitch: 0,
    bearing: 0,
    ...
 */

Documentation of WebMercatorViewport

I called flyTo/panTo and all controls went out of sync

You cannot manipulate the map camera via getMap() and the native mapbox-gl API. To conform to the reactive programming paradigm, all camera changes should be driven by prop changes on the React component. Circumventing this will break the binding between React components and the underlying map instance.

Instead, use the InteractiveMap's transition props. See viewport transition for examples.

mapbox-gl-draw does not work with react-map-gl

Unfortunately, react-map-gl implements its own interative logic and disables the native event handling of mapbox-gl.

Short explanation: mapbox-gl is not designed to support React.

Long explanation: When using react-map-gl, we have two asynchronous rendering loops, React and Mapbox. Mapbox's move events are only fired after the camera changes and there is no way to control how and when the map rerenders. If we update React states upon the move events, all React controls/overlays may only get updated one animation frame after the map rerender. You can find discussions here and here.

Because of this, any mapbox-gl control that listens to the native map events will not work. An equivelant to mapbox-gl-draw is react-map-gl-draw. You can find an example here.