Skip to content

mapmelabs/mapbox-gl-draw-rotate-scale-rect-mode

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

TxRectMode mapbox-gl-draw custom mode

This is the custom mapbox-gl-draw mode which allows to rotate and scale rectangle polygons.

Live demo is here

Demo gif

Features:

  • rotate/scale polygons
  • options to choose rotation pivot and scale center
  • discrete rotation whith SHIFT button pressed
  • demo how to transform image

Installation:

npm install git+https://github.com/drykovanov/mapbox-gl-draw-rotate-scale-rect-mode#0.1.10

Usage examples:

First, init MapboxDraw with TxRectMode and styling provided.

There is an example of styling in demo.js and icon set for scaling and rotation.

    import { TxRectMode, TxCenter } from 'mapbox-gl-draw-rotate-scale-rect-mode';
    ...
    const draw = new MapboxDraw({
        displayControlsDefault: false,
        controls: {
        },

        modes: Object.assign({
            tx_poly: TxRectMode,
        }, MapboxDraw.modes),

        styles: drawStyle,
    });

Second, create your rectangle polygon (with turf) and provide it's featureId to changeMode():

    const coordinates = [cUL,cUR,cLR,cLL,cUL];
    const poly = turf.polygon([coordinates]);
    poly.id = <unique id>;
    
    draw.add(poly);

    draw.changeMode('tx_poly', {
        featureId: poly.id, // required
    });

changeMode('tx_poly', ...) accepts the following options:

  • rotatePivot - change rotation pivot to the middle of the opposite polygon side
  • scaleCenter - change scaling center to the opposite vertex
  • singleRotationPoint - set true to show only one rotation widget
  • rotationPointRadius - offset rotation point from feature perimeter
  • canScale - set false to disable scaling
  • canRotate - set false to disable rotation
  • canTrash - set false to disable feature delete
  • canSelectFeatures - set false to forbid exiting the mode
    draw.changeMode('tx_poly', {
        featureId: poly.id, // required
        
        canScale: false,
        canRotate: true,    // only rotation enabled
        canTrash: false,    // disable feature delete

        rotatePivot: TxCenter.Center,   // rotate around center
        scaleCenter: TxCenter.Opposite, // scale around opposite vertex
        
        singleRotationPoint: true, // only one rotation point
        rotationPointRadius: 1.2, // offset rotation point
        
        canSelectFeatures: true,
    });

See how scaling and rotation around opposite side works:

Demo gif

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%