@wq/map-gl 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/map-gl 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/map-gl for npm

npm install @wq/map-gl # install @wq/map-gl, @wq/map, and deps

API

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

import app from '@wq/app';
import mapgl from '@wq/map-gl';

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

app.init(...);

@wq/map-gl consists entirely of React components that override the placeholders defined in @wq/map. The components in @wq/map-gl are abstractions over existing libraries for each environment supported by @wq/react and @wq/material. Specifically, @wq/map-gl 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/map-gl provides a consistent API in each of the three environments.

Configuration

@wq/map-gl 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/map-gl provides implementations of the components defined by @wq/map.

Source

The source code for @wq/map-gl is in the wq.app repository.