Skip to content

salindersidhu/react-native-map-scale-bar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-map-scale-bar

A customizable map scale bar for React Native Mapbox GL.

Downloads Software License

image

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";
  1. Create states to hold MapView's center and zoom properties.
const [zoom, setZoom] = useState(0);
const [center, setCenter] = useState([0, 0]);
  1. Create a reference to be used on MapBox's MapView component.
const map = useRef();
  1. 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());
};
  1. Assign the reference and handler function to Mapbox's MapView component.
<MapboxGL.MapView
  ref={map}
  onRegionDidchange={handleMapChange}
  onRegionIsChanging={handleMapChange}
  onRegionWillChange={_.debounce(handleMapChange, 200)}
/>
  1. 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

Animation

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.