npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-mapbox-gl-draw

v2.0.4

Published

Draw tools for Mapbox with React: react-mapbox-gl + mapbox-gl-draw

Downloads

32,144

Readme

react-mapbox-gl-draw

Actions Status npm npm dependencies Status

Draw tools for Mapbox with React: 🗺️ react-mapbox-gl + 🖌️ mapbox-gl-draw

This package is basically creating React bindings for mapbox-gl-draw so that it can be used with react-mapbox-gl.

❗ Important: This package does not work with Uber's react-map-gl. See this issue for more info.

Demo

See https://codesandbox.io/s/xenodochial-tu-pwly8.

Getting Started

yarn add react-mapbox-gl mapbox-gl @mapbox/mapbox-gl-draw # required peer dependencies
yarn add react-mapbox-gl-draw

Note: this version of react-mapbox-gl-draw will only work with the latest react-mapbox-gl@^4.4.0. If you wish to use Draw tools with [email protected] or [email protected], please use [email protected].

import ReactMapboxGl from 'react-mapbox-gl';
import DrawControl from 'react-mapbox-gl-draw';

// Don't forget to import the CSS
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';

const Map = ReactMapboxGl({
  accessToken:
    'pk.eyJ1IjoiZmFrZXVzZXJnaXRodWIiLCJhIjoiY2pwOGlneGI4MDNnaDN1c2J0eW5zb2ZiNyJ9.mALv0tCpbYUPtzT7YysA2g'
});

<Map
  style="mapbox://styles/mapbox/streets-v9"
  containerStyle={{
    height: '100vh',
    width: '100vw'
  }}
>
  <DrawControl />
</Map>;

API

Here are the props you can pass to <DrawControl />:

  • keybindings, boolean (default true): Whether or not to enable keyboard interactions for drawing.
  • touchEnabled, boolean (default true): Whether or not to enable touch interactions for drawing.
  • boxSelect, boolean (default true): Whether or not to enable box selection of features with shift+click+drag. If false, shift+click+drag zooms into an area.
  • clickBuffer, number (default: 2): Number of pixels around any feature or vertex (in every direction) that will respond to a click.
  • touchBuffer, number (default: 25): Number of pixels around any feature of vertex (in every directoin) that will respond to a touch.
  • controls, Object: Hide or show individual controls. Each property's name is a control, and value is a boolean indicating whether the control is on or off. Available control names are point, line_string, polygon, trash, combine_features and uncombine_features. By default, all controls are on. To change that default, use displayControlsDefault.
  • displayControlsDefault, boolean (default: true): The default value for controls. For example, if you would like all controls to be off by default, and specify a whitelist with controls, use displayControlsDefault: false.
  • styles, Array<Object>: An array of map style objects. By default, Draw provides a map style for you. To learn about overriding styles, see the Styling Draw section below.
  • modes, Object: over ride the default modes with your own. MapboxDraw.modes can be used to see the default values. More information on custom modes can be found here.
  • defaultMode, String (default: 'simple_select'): the mode (from modes) that user will first land in.
  • position, String (default: 'top-left'): the position of the draw controls on the map.

Draw Events passed as props

These additional props are functions that receive the event data, see mapbox-gl-draw documentantion.

  • onDrawCreate
  • onDrawDelete
  • onDrawUpdate
  • onDrawCombine
  • onDrawUncombine
  • onDrawSelectionChange
  • onDrawModeChange
  • onDrawRender
  • onDrawActionable

To learn more about mapbox-gl-draw: https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/API.md

To access the Draw object with all the API methods, you need to define a ref on the <DrawControl> component, and the Draw object will be in the draw field of this ref:

<Map
  style="mapbox://styles/mapbox/streets-v9"
  containerStyle={{
    height: '100vh',
    width: '100vw'
  }}>
    <DrawControl
      ref={(drawControl) => { this.drawControl = drawControl; }}
    />
</Map>

//...
handleButtonClick() {
  this.drawControl.draw.getAll(); // Or any other API method
}

Example

An example application of how to use react-mapbox-gl-draw can be found in the example/ folder. To run it, run:

yarn example

The example app should run on localhost:8080. An online demo is also hosted on CodeSandbox: https://codesandbox.io/s/xenodochial-tu-pwly8.

Testing

Only eslint is run for linting. Proper testing needs to be added, see #19 if you would like to help.