React component of leaflet-draw for react-leaflet

Giovane Santos Silva

Last update: Oct 20, 2022

Related tags

Maps react-leaflet-draft

Overview

React Leaflet Draft

A modern study React component of leaflet draw for react-leaflet

React component of leaflet-draw for react-leaflet

Main
Getting started
API
License

Main

dist/
└── index.min.js

Getting started

Requirements

yarn add leaflet leaflet-draw react-leaflet

Installation

yarn add react-leaflet-draft

Usage

Basic Example

<FeatureGroup>
    <DraftControl/>
</FeatureGroup>

Full Example

  

 ) }">
import { DraftControl } from "react-leaflet-draft";
import { MapContainer, TileLayer, Marker, FeatureGroup } from "react-leaflet";

function Map() {
    return(
        <MapContainer
            zoom={14}
            center={position}
        >
            <TileLayer
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <FeatureGroup>
                <DraftControl />
            </FeatureGroup>
        </MapContainer>
    )
}

API

You can see the properties in Leaflet-draw Documentation

Example options

<DraftControl
    draw={{
        circle: true,
        rectangle: true
    }}
    edit={{
        edit: false
    }}
    limitLayers={2}
/>

Example listeners

<DraftControl
    onEdited={e => console.log(e)}
    onDeleted={e => console.log(e)}
    onCreated={e => console.log(e)}
/>

License

ISC © Giovane Santos

You might also like...

React Component Library for Mapbox GL JS

Urbica React Mapbox GL JS React Component Library for Mapbox GL JS. Mapbox GL JS is a JavaScript library that renders interactive maps from vector til

392 Dec 24, 2022

Google street view component for React.js

Simple React.js component for Google Street View

22 Nov 1, 2022

React component for Nepal Map

37 Nov 17, 2022

React wrapper for mapbox-gl-geocoder for use with react-map-gl

react-map-gl-geocoder React wrapper for mapbox-gl-geocoder for use with react-map-gl. Demos Simple Example - https://codesandbox.io/s/l7p179qr6m Ignor

117 Jan 1, 2023

React wrapper for goong-geocoder for use with goong-map-react

@goongmaps/goong-geocoder-reat React wrapper for @goongmaps/goong-geocoder for use with @goongmaps/goong-map-react Demo https://codesandbox.io/s/goong

0 Jul 20, 2020

Cross platform map for react & react-native 🗺

@teovilla/react-native-web-maps Cross platfrom maps for react & react-native Installation $ yarn add @teovilla/react-native-web-maps Usage with Expo w

20 Nov 24, 2022

A declarative React interface to Google Maps

React Google Maps A declarative React interface to Google Maps. Check it out: Example usage API docs What's new Important Notes This is an alpha relea

222 Nov 8, 2022

React friendly API wrapper around MapboxGL JS

react-map-gl | Docs react-map-gl is a suite of React components designed to provide a React API for Mapbox GL JS-compatible libraries. More informatio

6.9k Jan 3, 2023

Google map library for react that allows rendering components as markers :tada:

Google Map React · google-map-react is a component written over a small set of the Google Maps API. It allows you to render any React component on the

5.9k Jan 5, 2023

Comments

Repo's value proposal?

I'm wondering what would be the difference on using the classic github.com/alex3165/react-leaflet-draw and using yours package.

Does this solves the unupdated states for polygons from alex3165?

opened by CxrlosKenobi 2
using other useEffect will cause multiple call of event handlers like onCreated

I am using websockets using useEffect and also one useEffect for load some markers, polylines and also shapes into map when compoent mounts. When DraftControl call onCreated, it calls it 5 times in my case. When I comment out my useEffects, then it is working as expected. The same happens for other event handlers as well.

I also tried to wrap it to parent component which has useEffect hooks and send props into child component with only mapContainer and DraftControl but it did not help. Is there any solution for that?

I need websockets and also I need data on load.

Thanks.

opened by tomcosk 1

Releases(v1.1.0)

v1.1.0(Jul 18, 2022)
Realease 1.1.0 (July 18, 2022)

Implemented

Fixed issue with multiple listeners

Memorized function onCreate

Source code(tar.gz)
Source code(zip)
v1.0.0(Feb 15, 2022)
Realease 1.0.0 (February 15, 2022)

Implemented

prop limitLayer for control layes in map

compatibility with react-leflet v3

More performance and modularity

Source code(tar.gz)
Source code(zip)