Have ideas to improve npm?Join in the discussion! »

    mapbox-gl-draw-rectangle-validation-mode

    1.0.0 • Public • Published

    mapbox-gl-draw-rectangle-validation-mode

    mapbox-gl Draw rectangle mode, with optional area limitation

    DEMO

    NPM

    Features

    • One/two click drawing
    • Mobile compabillity
    • Feature validation callback Optional

    Install

    npm install --save @mapbox/mapbox-gl-draw mapbox-gl-draw-rectangle-validation-mode

    Usage

    import MapboxDraw from "@mapbox/mapbox-gl-draw";
    import DrawRectangle, {
      DrawStyles,
    } from "mapbox-gl-draw-rectangle-validation-mode";
    
    const map = new mapboxgl.Map({
      container: "map", // container id
      style: "mapbox://styles/mapbox/streets-v11",
      center: [-91.874, 42.76], // starting position
      zoom: 12, // starting zoom
    });
    
    const draw = new MapboxDraw({
      userProperties: true,
      displayControlsDefault: false,
      styles: DrawStyles,
      modes: Object.assign(MapboxDraw.modes, {
        draw_rectangle: DrawRectangle,
      }),
    });
    map.addControl(draw);
    
    // when mode drawing should be activated
    draw.changeMode("draw_rectangle", {
      inspect: (rectangle) => ({ valid: true, anyOtherProps: "foo" }), // optional
      onInvalid: ({ anyOtherProps }) => console.log("invalid!", anyOtherProps), // optional
      allowCreateInvalid: false, // default false
      callInvalidOnce: true, // default false
      stopOnEscape: true, // default true
    });

    Styles

    Exceeded features

    Exeeded size feature has user_is_invalid: true property

    Default styles

    mapbox-gl-draw-rectangle-validation-mode use default mapbox-gl-draw styles with 2 overrided layers:

    [
      {
        id: "gl-draw-polygon-fill-active",
        type: "fill",
        filter: ["all", ["==", "active", "true"], ["==", "$type", "Polygon"]],
        paint: {
          "fill-color": [
            "case",
            ["!", ["to-boolean", ["get", "user_is_invalid"]]], // turns to red if feature has `user_is_invalid: true` prop
            "#fbb03b",
            "#ff0000",
          ],
          "fill-opacity": 0.2,
        },
      },
      {
        id: "gl-draw-polygon-stroke-active",
        type: "line",
        filter: ["all", ["==", "active", "true"], ["==", "$type", "Polygon"]],
        layout: {
          "line-cap": "round",
          "line-join": "round",
        },
        paint: {
          "line-color": [
            "case",
            ["!", ["to-boolean", ["get", "user_is_invalid"]]],
            "#fbb03b",
            "#ff0000",
          ],
          "line-dasharray": [0.2, 2],
          "line-width": 2,
        },
      },
    ];

    You also can export it

    import { ActivePolygonStyles } from "mapbox-gl-draw-rectangle-validation-mode";

    Override styles

    You can override default drawing styles with overrideDefaultStyles helper function

    import { overrideDefaultStyles } from "mapbox-gl-draw-rectangle-validation-mode";
    
    const drawStyles = overrideDefaultStyles(<your_custom_styles>);

    Default styles with same ids will be replaced.

    Example

    License

    MIT © dqunbp

    Install

    npm i mapbox-gl-draw-rectangle-validation-mode

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    14.7 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar