react-native-map-scale-bar v1.0.5

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

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.