How to use react-map-gl-draw - 9 common examples
To help you get started, we’ve selected a few react-map-gl-draw examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
uber / nebula.gl / examples / react-map-gl-draw / toolbar.js View on Github 
/* global setTimeout */
import React, { PureComponent } from 'react';
import styled from 'styled-components';
import { EditorModes } from 'react-map-gl-draw';
const MODES = [
{ id: EditorModes.SELECT, text: 'Edit Feature', icon: 'icon-select.svg' },
{ id: EditorModes.DRAW_POINT, text: 'Draw Point', icon: 'icon-point.svg' },
{ id: EditorModes.DRAW_PATH, text: 'Draw Polyline', icon: 'icon-path.svg' },
{ id: EditorModes.DRAW_POLYGON, text: 'Draw Polygon', icon: 'icon-polygon.svg' },
{ id: EditorModes.DRAW_RECTANGLE, text: 'Draw Rectangle', icon: 'icon-rectangle.svg' }
];
const Container = styled.div`
position: absolute;
width: 48px;
left: 24px;
top: 24px;
background: #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
outline: none;
display: flex;
justify-content: center;
flex-direction: column;
`;constructor(props) {
super(props);
this.state = {
// map
viewport: DEFAULT_VIEWPORT,
// editor
selectedMode: EditorModes.READ_ONLY,
features: [],
selectedFeatureIndex: null
};
this._editorRef = null;
}/* global setTimeout */
import React, { PureComponent } from 'react';
import styled from 'styled-components';
import { EditorModes } from 'react-map-gl-draw';
const MODES = [
{ id: EditorModes.SELECT, text: 'Edit Feature', icon: 'icon-select.svg' },
{ id: EditorModes.DRAW_POINT, text: 'Draw Point', icon: 'icon-point.svg' },
{ id: EditorModes.DRAW_PATH, text: 'Draw Polyline', icon: 'icon-path.svg' },
{ id: EditorModes.DRAW_POLYGON, text: 'Draw Polygon', icon: 'icon-polygon.svg' },
{ id: EditorModes.DRAW_RECTANGLE, text: 'Draw Rectangle', icon: 'icon-rectangle.svg' }
];
const Container = styled.div`
position: absolute;
width: 48px;
left: 24px;
top: 24px;
background: #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
outline: none;
display: flex;
justify-content: center;
flex-direction: column;
`;/* global setTimeout */
import React, { PureComponent } from 'react';
import styled from 'styled-components';
import { EditorModes } from 'react-map-gl-draw';
const MODES = [
{ id: EditorModes.SELECT, text: 'Edit Feature', icon: 'icon-select.svg' },
{ id: EditorModes.DRAW_POINT, text: 'Draw Point', icon: 'icon-point.svg' },
{ id: EditorModes.DRAW_PATH, text: 'Draw Polyline', icon: 'icon-path.svg' },
{ id: EditorModes.DRAW_POLYGON, text: 'Draw Polygon', icon: 'icon-polygon.svg' },
{ id: EditorModes.DRAW_RECTANGLE, text: 'Draw Rectangle', icon: 'icon-rectangle.svg' }
];
const Container = styled.div`
position: absolute;
width: 48px;
left: 24px;
top: 24px;
background: #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
outline: none;
display: flex;
justify-content: center;
flex-direction: column;/* global setTimeout */
import React, { PureComponent } from 'react';
import styled from 'styled-components';
import { EditorModes } from 'react-map-gl-draw';
const MODES = [
{ id: EditorModes.SELECT, text: 'Edit Feature', icon: 'icon-select.svg' },
{ id: EditorModes.DRAW_POINT, text: 'Draw Point', icon: 'icon-point.svg' },
{ id: EditorModes.DRAW_PATH, text: 'Draw Polyline', icon: 'icon-path.svg' },
{ id: EditorModes.DRAW_POLYGON, text: 'Draw Polygon', icon: 'icon-polygon.svg' },
{ id: EditorModes.DRAW_RECTANGLE, text: 'Draw Rectangle', icon: 'icon-rectangle.svg' }
];
const Container = styled.div`
position: absolute;
width: 48px;
left: 24px;
top: 24px;
background: #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
outline: none;
display: flex;
justify-content: center;
flex-direction: column;
`;
const Row = styled.div`/* global setTimeout */
import React, { PureComponent } from 'react';
import styled from 'styled-components';
import { EditorModes } from 'react-map-gl-draw';
const MODES = [
{ id: EditorModes.SELECT, text: 'Edit Feature', icon: 'icon-select.svg' },
{ id: EditorModes.DRAW_POINT, text: 'Draw Point', icon: 'icon-point.svg' },
{ id: EditorModes.DRAW_PATH, text: 'Draw Polyline', icon: 'icon-path.svg' },
{ id: EditorModes.DRAW_POLYGON, text: 'Draw Polygon', icon: 'icon-polygon.svg' },
{ id: EditorModes.DRAW_RECTANGLE, text: 'Draw Rectangle', icon: 'icon-rectangle.svg' }
];
const Container = styled.div`
position: absolute;
width: 48px;
left: 24px;
top: 24px;
background: #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
outline: none;
display: flex;
justify-content: center; onClick={() => this.setState({mode: EditorModes.DRAW_POLYGON})}
/>constructor(props) {
super(props);
this._editorRef = null;
this.state = {
viewport: {
longitude: -91.874,
latitude: 42.76,
zoom: 12
},
mode: EditorModes.READ_ONLY,
selectedFeatureIndex: null
};
}_onUpdate = ({editType}) => {
if (editType === 'addFeature') {
this.setState({
mode: EditorModes.EDITING
});
}
};react-map-gl-draw
A lite version editing layer with react
