react-native-scale-bar

Scale bar for MapView in React Native. Works with Mapbox and Google Map.

Installation

npm install --save react-native-scale-bar

Usage

import React, { Component } from "react";
import Mapbox from "@mapbox/react-native-mapbox-gl";
import ScaleBar from "react-native-scale-bar";
import debounce from "lodash.debounce";

(...)

onUserLocationUpdate(location) {
  const latitude = location.coords.latitude;
  this.setState({latitude});
}

async handleMapChange() {
  const zoom = await this._map.getZoom();
  this.setState({zoom});
}

(...)

<Mapbox.MapView
  ref={c => (this._map = c)}
  onRegionDidChange={() => this.handleMapChange()}
  onRegionIsChanging={debounce(() => this.handleMapChange(), 200)}
  onRegionWillChange={() => this.handleMapChange()}
  onUserLocationUpdate={this.onUserLocationUpdate}
  (...)
/>

<ScaleBar zoom={this.state.zoom} latitude={this.state.latitude}/>

Properties

| Prop | Required | Type | Default | Description | | :------------ |:---------------:| :---------------:| :---------------:| :-----| | zoom | yes | number | - | Pass the zoom level to the component to adjust the scale bar. | | latitude | no | number | 48.8187 | Use the latitude to adjust the scale bar precision. | | left | no | number | 10 | Padding with left border of the screen. | | bottom | no | number | 32 | Padding with bottom of the screen. |

Todo

• Option to place the scale bar anywhere on the screen
• Add imperial units