react-native-map-scale-bar

A customizable map scale bar for React Native Mapbox GL.

Installation

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

Usage

1. Import the scale bar from the package.

import ScaleBar from "react-native-map-scale-bar";

2. Create states to hold MapView's center and zoom properties.

const [zoom, setZoom] = useState(0);
const [center, setCenter] = useState([0, 0]);

3. Create a reference to be used on MapBox's MapView component.

const map = useRef();

4. Create handler function to capture Mapbox MapView's center and zoom properties.

const handleMapChange = async () => {
  setZoom(await map.current.getZoom());
  setCenter(await map.current.getCenter());
};

5. Assign the reference and handler function to Mapbox's MapView component.

<MapboxGL.MapView
  ref={map}
  onRegionDidchange={handleMapChange}
  onRegionIsChanging={handleMapChange}
  onRegionWillChange={_.debounce(handleMapChange, 200)}
/>

6. Add the scale bar component after the Mapbox's MapView component.

<ScaleBar zoom={zoom} latitude={center[1]}>

Props

Prop	Required	Type	Default	Description
zoom	yes	number	-	Zoom level to adjust the scale bar.
latitude	yes	number	-	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.
metricBarStyle	no	object	{ borderWidth: 1, borderStyle: "solid", borderTopWidth: 0, borderBottomWidth: 1, borderColor: "rgba(0, 0, 0, 1)", borderBottomColor: "rgba(0, 0, 0, 0.4)", backgroundColor: "rgba(255, 255, 255, 0.5)" }	Styles for the metric bar.
metricBarTextStyle	no	object	{ fontSize: 10, paddingTop: 5, paddingLeft: 5, paddingBottom: 5, color: "rgba(0, 0, 0, 1)"}	Styles for the metric bar's text.
imperialBarStyle	no	object	{ borderWidth: 1, borderStyle: "solid", borderTopWidth: 0, borderBottomWidth: 0, borderColor: "rgba(0, 0, 0, 1)", backgroundColor: "rgba(255, 255, 255, 0.5)"}	Styles for the imperial bar.
imperialBarTextStyle	no	object	{ fontSize: 10, paddingTop: 5, paddingLeft: 5, paddingBottom: 5, color: "rgba(0, 0, 0, 1)"}	Styles for the imperial bar's text.

Example

import React from "react";
import { StyleSheet } from "react-native";
import { useState, useEffect, useRef } from "react";

import _ from "lodash";
import ScaleBar from "react-native-map-scale-bar";
import MapboxGL from "@react-native-mapbox-gl/maps";

const STYLES = StyleSheet.create({
  map: {
    flex: 1,
  },
});

const MAPBOX_API_KEY = "...";

function App() {
  const map = useRef();

  const [zoom, setZoom] = useState(2);
  const [center, setCenter] = useState([0, 48]);

  useEffect(() => {
    MapboxGL.setAccessToken(MAPBOX_API_KEY);
    MapboxGL.setTelemetryEnabled(false);
    handleMapChange();
  }, []);

  const handleMapChange = async () => {
    setZoom(await map.current.getZoom());
    setCenter(await map.current.getCenter());
  };

  return (
    <>
      <MapboxGL.MapView
        ref={map}
        style={STYLES.map}
        onRegionDidchange={handleMapChange}
        onRegionIsChanging={handleMapChange}
        onRegionWillChange={_.debounce(handleMapChange, 200)}
      />
      <ScaleBar zoom={zoom} latitude={center[1]} />
    </>
  );
}

export default App;

Credits

This project adapted code from ScaleBar.

Contributing

Looking to contribute additional features, updates or bug fixes? Please see our contributing guide for more info.