Skip to content

zakjan/mapbox-gl-draw-waypoint

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
August 11, 2020 11:24
September 15, 2020 10:32
src
August 13, 2020 07:35
August 11, 2020 11:22
August 11, 2020 11:22
August 11, 2020 11:22
September 15, 2020 10:08
August 11, 2020 11:22
September 15, 2020 10:08
September 15, 2020 10:08
August 11, 2020 11:22

mapbox-gl-draw-waypoint

Waypoint plugin for Mapbox GL Draw. It allows user to drag vertices only, prevents dragging features. Also, it merges UX of simple_select and direct_select modes together, to save mouse clicks when switching between them.

Demo

Screenshot

Supported Mapbox GL Draw modes:

  • simple_select
    • clicking an inactive polygon/line feature switches to direct_select mode, saves one mouse click
    • multi-selection is prevented for consistency with direct_select mode
  • direct_select
    • clicking an inactive feature selects it (point feature in simple_select mode, polygon/line feature in direct_select mode), saves one mouse click
    • dragging a polygon/line feature is prevented

Install

npm install mapbox-gl-draw-waypoint

or

<script src="https://unpkg.com/mapbox-gl-draw-waypoint@1.0.3/dist/mapbox-gl-draw-waypoint.min.js"></script>

Usage

This plugin exposes a single function enable, which should be used to patch the original MapboxDraw.modes object.

import MapboxDraw from 'mapbox-gl-draw';
import * as MapboxDrawWaypoint from 'mapbox-gl-draw-waypoint';

let modes = MapboxDraw.modes;
modes = MapboxDrawWaypoint.enable(modes);
const draw = new MapboxDraw({ modes });

The second argument to MapboxDrawWaypoint.enable is a function to select features which should have the plugin enabled (defaults to all).

modes = MapboxDrawWaypoint.enable(modes, feature => feature.properties.risk);

The patching method is compatible with mapbox-gl-draw-geodesic, both patches can be used together.

import MapboxDraw from 'mapbox-gl-draw';
import * as MapboxDrawGeodesic from 'mapbox-gl-draw-geodesic';
import * as MapboxDrawWaypoint from 'mapbox-gl-draw-waypoint';

let modes = MapboxDraw.modes;
modes = MapboxDrawGeodesic.enable(modes);
modes = MapboxDrawWaypoint.enable(modes);
const draw = new MapboxDraw({ modes });

Sponsors

MariTrace

About

Waypoint plugin for Mapbox GL Draw

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published