react-geojson-editor

WARNING: This package is still under development, and therefore unstable

Allowing you to draw and edit shapes on maps!

Features

• onCreate action
• onUpdate action
• drawing mode
• edit mode
• view mode
• Drawing hollow polygons
• Center map

Usage

import React from 'react';
import GeoJsonEditor from 'react-geojson-editor';
 
<GeoJsonEditor
    googleMapKey="google api key"
    existingPolygons={GeoJson}
    center={{ lng: number, lat: number }}
    zoom={5}
    mapHeight={700}
    onSave={(geojson, area) => {/* Ex: save updated geojson to the backend */}}
/>

Other components

GoogleMapWithLoader

Used if you want to access the map instance within your own components

Example:

import { GoogleMapContext } from 'react-geojson-editor/google-map';
 
class YourComponent extends Component {
    static contextType = GoogleMapContext;
    componentDidMount() {
        if (this.context.map) {
            this.context.map.addListener('click', (e) => {
                this.context.map.setCenter(e.latLng);
            })
        }
    }
    render() {
        return <div>Access to map instance using GoogleMapContext</div>;
    }
}

import React from 'react';
import { GoogleMapWithLoader } from 'react-geojson-editor/google-map';
 
<GoogleMapWithLoader {{
    googleMapURL: '',
    center: { lat: 0, lng: 0 },
    zoom: 1,
    height: 100,
    width: 100,
}}>
    <YourComponent />
</GoogleMapWithLoader>