@wq/mapbox v1.3.0-beta.0

@wq/mapbox

@wq/mapbox

@wq/mapbox is a plugin for @wq/app that provides integration with Mapbox GL JS (for web) and the Mapbox Map SDK for Android and iOS. When used together with @wq/map, @wq/mapbox can leverage the wq configuration object to generate interactive maps for pages rendered via @wq/app. The generated maps can automatically download and display GeoJSON data rendered by wq.db's REST API or any third party service.

Installation

wq.app for PyPI

python3 -m venv venv      # create virtual env (if needed)
. venv/bin/activate       # activate virtual env
python3 -m pip install wq # install wq framework (wq.app, wq.db, etc.)
# pip install wq.app      # install wq.app only

@wq/mapbox for npm

npm install @wq/mapbox # install @wq/mapbox, @wq/map, and deps

API

@wq/mapbox should be registered with @wq/app as a plugin. @wq/map will be registered automatically.

import app from '@wq/app';
import mapbox from '@wq/mapbox';

app.use(mapbox);  // Automatically registers @wq/map

app.init(...);

@wq/mapbox consists entirely of React components that override the placeholders defined in @wq/map. The components in @wq/mapbox are abstractions over existing libraries for each environment supported by @wq/react and @wq/material. Specifically, @wq/mapbox uses:

• react-mapbox-gl (for web)
• @react-native-mapbox-gl/maps (for React Native)
• react-native-maps (for Expo, since Mapbox Maps SDK is not currently supported)

@wq/mapbox provides a consistent API in each of the three environments.

Configuration

@wq/mapbox relies on @wq/map's configuration and conventions. If config.map.mapProps is defined, it will be passed on as-is to the ReactMapboxGl() constructor for web and to the MapView component in Expo. For React Native, the accessToken, dragRotate, and pitchWithRotate mapProps are converted to the corresponding @react-native-mapbox-gl/maps arguments, and other props are ignored.

Components

@wq/mapbox provides implementations of the components defined by @wq/map.

General Components

See @wq/map's general components for more info.

Basemap Components

See @wq/map's basemap components for more info. Note that @wq/mapbox maps the concept of a basemap to Mapbox's map-level "style" prop. As such, the provided Tile and VectorTile components are empty except for Tile.expo.js. (react-native-maps does not support vector tiles.)

Overlay Components

See @wq/map's overlay components for more info. @wq/mapbox also provides tile and vector-tile overlays that can be added and removed from the map without resetting the style (unlike the basemaps).