@thisisbarney/react-map-control

1.0.0 • Public • Published

@thisisbarney/react-map-control

a bundle of buttons for map control, includes:

  • a compass indicating the current direction
  • adjust pitch: 0/30/60 degrees
  • reset bearing to 0
  • zoom in/out the map
import React from 'react';
import MapControl from '@thisisbarney/react-map-control';

<MapControl
  viewport={viewport}
  callback={callback}
/>

viewport is the current viewport of react-map-gl

callback is the function which receives dest viewport and animate to it, eg

callback = ({zoom, pitch, longitude, latitude, bearing}) => {
  const viewport = {
    longitude: longitude || viewport.longitude,
    latitude: latitude || viewport.latitude,
    pitch: pitch || viewport.pitch,
    zoom: zoom || viewport.zoom,
    bearing: bearing || viewport.bearing,
  };
  this.setState({
    viewport: {
      ...this.state.viewport,
      ...viewport,
    }
  });
}

Readme

Keywords

Package Sidebar

Install

npm i @thisisbarney/react-map-control

Weekly Downloads

2

Version

1.0.0

License

ISC

Unpacked Size

45.6 kB

Total Files

5

Last publish

Collaborators

  • thisisbarney