tmp-react-map-gl-draw
A lite version editing layer with react
Last updated 2 months ago by intelcoder .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install tmp-react-map-gl-draw 
SYNC missed versions from official npm registry.

React Map GL Draw

react-map-gl-draw is a react based drawing library tailored for react-map-gl.

Options

  • mode (String, Optional)

    • EditorModes.READ_ONLY - Not interactive. This is the default mode.
    • EditorModes.SELECT - Lets you select, delete, and drag features.
    • EditorModes.EDITTING - Lets you select, delete, and drag vertices; and drag features.
    • EditorModes.DRAW_PATH - Lets you draw a GeoJson LineString feature.
    • EditorModes.DRAW_POLYGON - Lets you draw a GeoJson Polygon feature.
    • EditorModes.DRAW_POINT - Lets you draw a GeoJson Point feature.
    • EditorModes.DRAW_RECTANGLE - Lets you draw a Rectangle (represented as GeoJson Polygon feature).
  • features (Feature[], Optional) - List of features in GeoJson format. If features are provided from users, then react-map-gl-draw respect the users' input, and therefore ignore any internal features. But if features are not provided, then react-map-gl-draw manages features internally, and users can access and manipulate the features by calling getFeatures, addFeatures, and deleteFeatures.

  • selectedFeatureIndex (String, Optional) - Index of the selected feature.

  • clickRadius (Number, Optional) - Radius to detect features around a hovered or clicked point. Default value is 0

  • onSelect (Function, Optional) - callback when clicking a position under SELECT and EDITTING mode. Receives an object containing the following parameters

    • selectedFeature: selected feature. null if clicked an empty space.
    • selectedFeatureIndex: selected feature index.null if clicked an empty space.
    • editHandleIndex: selected editHandle index. null if clicked an empty space.
    • screenCoords: screen coordinates of the clicked position.
    • mapCoords: map coordinates of the clicked position.
  • onUpdate (Function, Optional) - callback when anything is updated. Receives an object containing the following parameters

    • features (Feature[]) - the updated list of GeoJSON features.
    • editType (String) - addFeature, addPosition, finishMovePosition
    • editContext (Array) - list of edit objects, depend on editType, each object may contain featureIndexes, editHandleIndexes, screenCoords, mapCoords.

Feature object structure:

{
  id, // an unique identified generated inside react-map-gl-draw library 
  geometry: {
    coordinates, // latitude longitude pairs of the geometry points
    type // geojson type, one of `Point`, `LineString`, or `Polygon`
  },
  properties: {
    renderType, // Mainly used for styling, one of `Point`, `LineString`, `Polygon`, or `Rectangle`. Different from `geometry.type`. i.e. a rectangle's renderType is `Rectangle`, and `geometry.type` is `Polygon`. An incomplete (not closed) Polygon's renderType is `Polygon`, `geometry.type` is `LineString`
    ...otherProps // other properties user passed in
  }
}

Styling related options

  • featureStyle (Object|Function, Optional) : Object - Either a style objects or a function to style a feature, function parameters are
    • feature: feature to style.
    • index: index of the feature.
    • state: one of SELECTED, HOVERED, INACTIVE, UNCOMMITTED, CLOSING.

Returns is a map of style objects passed to SVG path elements.

  • featureShape (String|Function, Optional): if is a string, should be one of rect or circle. If is a function, will receive the following parameters

    • feature: feature to style.
    • index: index of the feature.
    • state: one of SELECTED, HOVERED, INACTIVE, UNCOMMITTED, CLOSING.
  • editHandleStyle (Object|Function, Optional) : Object - Either a style objects or a function to style an `editHandle, function parameters are

    • feature: feature to style.
    • index: index of the editHandle vertex in the feature.
    • state: one of SELECTED, HOVERED, INACTIVE, UNCOMMITTED, CLOSING.
    • shape: shape resolved from editHandleShape.

Returns is a map of style objects passed to SVG circle or rect elements.

  • editHandleShape (String|Function, Optional): if is a string, should be one of rect or circle. If is a function, will receive the following parameters
    • feature: feature to style.
    • index: index of the editHandle vertex in the feature.
    • state: one of SELECTED, HOVERED, INACTIVE, UNCOMMITTED, CLOSING.

Explanations

  • Feature: any drawn shape, one of point, line, polygon or rectangle.
  • EditHandle: vertex of the feature being edited.

State related concepts:

  • INACTIVE: neither selected nor hovered, default state of a complete feature or editHandle.
  • SELECTED: being clicked or dragged.
  • HOVERED: hovered over by the mouse pointer.
  • UNCOMMITTED: in the middle of drawing, not yet added to the feature being edited.
  • CLOSING: closing a polygon.

Styling based on state:

img

As shown in the above image, for the feature currently being edited,

  • featureStyle({feature, state: SELECTED}) will be applied to the committed parts of the feature. (Green strokes)
  • editHandleStyle({state: SELECTED}) will be applied to the committed editHandle vertices. (Vertices with black stroke)
  • featureStyle({feature, state: UNCOMMITTED}) will be applied to the uncommitted parts of the feature. (Gray stroke)
  • editHandleStyle({state: UNCOMMITTED}) will be applied to the uncommitted editHandle vertex. (Gray vertex)

Methods

getFeatures
  • Return a list of finished GeoJson features.
addFeatures (Feature | Feature[])
  • Add a single or multiple GeoJson features to editor.
deleteDeatures (Feature | Feature[])
  • Delete a single or multiple GeoJson features to editor.

Code Example

import React, { Component } from 'react';
import MapGL from 'react-map-gl';
import { Editor, EditorModes } from 'react-map-gl-draw';

const MODES = [
  { id: EditorModes.EDITING, text: 'Select and Edit Feature'},
  { id: EditorModes.DRAW_POINT, text: 'Draw Point'},
  { id: EditorModes.DRAW_PATH, text: 'Draw Polyline'},
  { id: EditorModes.DRAW_POLYGON, text: 'Draw Polygon'},
  { id: EditorModes.DRAW_RECTANGLE, text: 'Draw Rectangle'}
];

const DEFAULT_VIEWPORT = {
  width: 800,
  height: 600,
  longitude: -122.45,
  latitude: 37.78,
  zoom: 14
};

class App extends Component {
  state = {
    // map
    viewport: DEFAULT_VIEWPORT,
    // editor
    selectedMode: EditorModes.READ_ONLY
  };

  _switchMode = evt => {
    const selectedMode = evt.target.id;
    this.setState({
     selectedMode: selectedMode === this.state.selectedMode ? null : selectedMode
    });
  };

  _renderToolbar = () => {
    return (
      <div style={{position: absolute, top: 0, right: 0, maxWidth: '320px'}}>
        <select onChange={this._switchMode}>
          <option value="">--Please choose a mode--</option>
          {MODES.map(mode => <option value={mode.id}>{mode.text}</option>)}
        </select>
      </div>
    );
  };

  render() {
    const { viewport, selectedMode } = this.state;
    return (
      <MapGL
        {...viewport}
        width="100%"
        height="100%"
        mapStyle={'mapbox://styles/mapbox/light-v9'}
        onViewportChange={this.setState({ viewport })}
      >
        <Editor
          clickRadius={12}
          mode={selectedMode}
        />
        {this._renderToolbar()}
      </MapGL>
    );
  }
}

Current Tags

  • 0.16.121                                ...           latest (2 months ago)

118 Versions

  • 0.16.121                                ...           2 months ago
  • 0.16.120                                ...           2 months ago
  • 0.16.119                                ...           2 months ago
  • 0.16.118                                ...           2 months ago
  • 0.16.117                                ...           2 months ago
  • 0.16.116                                ...           2 months ago
  • 0.16.115                                ...           2 months ago
  • 0.16.114                                ...           2 months ago
  • 0.16.113                                ...           2 months ago
  • 0.16.112                                ...           2 months ago
  • 0.16.111                                ...           2 months ago
  • 0.16.110                                ...           2 months ago
  • 0.16.109                                ...           2 months ago
  • 0.16.108                                ...           2 months ago
  • 0.16.107                                ...           2 months ago
  • 0.16.106                                ...           2 months ago
  • 0.16.105                                ...           2 months ago
  • 0.16.104                                ...           2 months ago
  • 0.16.103                                ...           2 months ago
  • 0.16.102                                ...           2 months ago
  • 0.16.101                                ...           2 months ago
  • 0.16.100                                ...           2 months ago
  • 0.16.99                                ...           2 months ago
  • 0.16.98                                ...           2 months ago
  • 0.16.97                                ...           2 months ago
  • 0.16.96                                ...           2 months ago
  • 0.16.95                                ...           2 months ago
  • 0.16.94                                ...           2 months ago
  • 0.16.93                                ...           2 months ago
  • 0.16.92                                ...           2 months ago
  • 0.16.91                                ...           2 months ago
  • 0.16.90                                ...           2 months ago
  • 0.16.89                                ...           2 months ago
  • 0.16.88                                ...           2 months ago
  • 0.16.87                                ...           2 months ago
  • 0.16.86                                ...           2 months ago
  • 0.16.85                                ...           2 months ago
  • 0.16.84                                ...           2 months ago
  • 0.16.83                                ...           2 months ago
  • 0.16.82                                ...           2 months ago
  • 0.16.81                                ...           2 months ago
  • 0.16.80                                ...           2 months ago
  • 0.16.79                                ...           2 months ago
  • 0.16.78                                ...           2 months ago
  • 0.16.77                                ...           2 months ago
  • 0.16.76                                ...           2 months ago
  • 0.16.75                                ...           2 months ago
  • 0.16.74                                ...           2 months ago
  • 0.16.73                                ...           2 months ago
  • 0.16.72                                ...           2 months ago
  • 0.16.71                                ...           2 months ago
  • 0.16.70                                ...           2 months ago
  • 0.16.69                                ...           2 months ago
  • 0.16.68                                ...           2 months ago
  • 0.16.67                                ...           2 months ago
  • 0.16.66                                ...           2 months ago
  • 0.16.65                                ...           2 months ago
  • 0.16.64                                ...           2 months ago
  • 0.16.63                                ...           2 months ago
  • 0.16.62                                ...           2 months ago
  • 0.16.61                                ...           2 months ago
  • 0.16.60                                ...           2 months ago
  • 0.16.59                                ...           2 months ago
  • 0.16.58                                ...           2 months ago
  • 0.16.57                                ...           2 months ago
  • 0.16.56                                ...           2 months ago
  • 0.16.55                                ...           2 months ago
  • 0.16.54                                ...           2 months ago
  • 0.16.53                                ...           2 months ago
  • 0.16.52                                ...           2 months ago
  • 0.16.51                                ...           2 months ago
  • 0.16.50                                ...           2 months ago
  • 0.16.49                                ...           2 months ago
  • 0.16.48                                ...           2 months ago
  • 0.16.47                                ...           2 months ago
  • 0.16.46                                ...           2 months ago
  • 0.16.45                                ...           2 months ago
  • 0.16.44                                ...           2 months ago
  • 0.16.43                                ...           2 months ago
  • 0.16.42                                ...           2 months ago
  • 0.16.41                                ...           2 months ago
  • 0.16.40                                ...           2 months ago
  • 0.16.39                                ...           2 months ago
  • 0.16.38                                ...           2 months ago
  • 0.16.37                                ...           2 months ago
  • 0.16.36                                ...           2 months ago
  • 0.16.35                                ...           2 months ago
  • 0.16.34                                ...           2 months ago
  • 0.16.33                                ...           2 months ago
  • 0.16.32                                ...           2 months ago
  • 0.16.31                                ...           2 months ago
  • 0.16.30                                ...           2 months ago
  • 0.16.29                                ...           2 months ago
  • 0.16.28                                ...           2 months ago
  • 0.16.27                                ...           2 months ago
  • 0.16.26                                ...           2 months ago
  • 0.16.25                                ...           2 months ago
  • 0.16.24                                ...           2 months ago
  • 0.16.23                                ...           2 months ago
  • 0.16.22                                ...           2 months ago
  • 0.16.21                                ...           2 months ago
  • 0.16.20                                ...           2 months ago
  • 0.16.19                                ...           2 months ago
  • 0.16.18                                ...           2 months ago
  • 0.16.17                                ...           2 months ago
  • 0.16.16                                ...           2 months ago
  • 0.16.15                                ...           2 months ago
  • 0.16.14                                ...           2 months ago
  • 0.16.13                                ...           2 months ago
  • 0.16.12                                ...           2 months ago
  • 0.16.11                                ...           2 months ago
  • 0.16.10                                ...           2 months ago
  • 0.16.9                                ...           2 months ago
  • 0.16.8                                ...           2 months ago
  • 0.16.4                                ...           2 months ago
  • 0.16.3                                ...           2 months ago
  • 0.16.2                                ...           2 months ago
  • 0.16.1                                ...           2 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dev Dependencies (1)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |