react-native-mapbox-boundaries

Get Started

Installation

npm i react-native-mapbox-boundaries --save

or by using yarn

yarn add react-native-mapbox-boundaries

Usage

Start using the components

import {getBoundaries} from 'react-native-mapbox-boundaries';

const boundries = getBoundaries(area, location);

Methods included:

• [x] getBoundaries
• [x] getCircleRadiusByPx

React Native Web support

As a cross platform UI Toolkit, you can now use RNE on the web & share your codebase between your React Native + React web apps. RNE components are rendered perfectly on browser. You can achieve this to target iOS, Android and Web by collaborating RNE and React Native for Web.

Get Boundaries

Allow you to get the mapBox boundaries for offline download using a center point, and a radius size [km]

import {getBoundaries} from 'react-native-mapbox-boundaries';

const area = 15;
const location = {coords: {latitude: 51.509865, longitude: -0.118092}}
const boundaries = getBoundaries(area, location);

and after that we can use the download map using mapbox and our new boundaries

    await MapboxGL.offlineManager.createPack(
    {
        name: 'offlinePack',
        styleURL: MapboxGL.StyleURL.Street,
        bounds: [
            [boundries.neLng, boundries.neLat],
            [boundries.swLng, boundries.swLat],
        ],
    },
    progressListener,
    errorListener
);

Get Dynamic Marker Circle Radius

Allow you to get a dynamic marker radius that's can change by the zoom level, you can use it by adding the marker element on a MapboxGL.MarkerView and use it inside the radius this function take 3 params an area [m], zoomLevel and must by dynamic depending the mapBox zoom level and a location center coordinates.

import {getCircleRadiusByPx} from 'react-native-mapbox-boundaries';

..

<Marker
    type="area"
    radius={getCircleRadiusByPx(area, zoomLevel, location)}
    color={theme.primary}
/>

...
/>

Demo App

A fully working demo to download an offline map by setting the Region, and the radius size,

you can download it now from here

Report

If there is something you's like to see or request a new feature, please submit an issue or a pull request.

Core Contributors

We are currently looking for new core contributors that can help lead this project.

Learn more here

react-native-mapbox-boundaries