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

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

Utility to explode ArcGIS geometries into individual, component geometries

@odoe/explode A small utility to explode ArcGIS geometries into individual, component geometries. Inspired by the Explode utility of ArcGIS Desktop Po

Jul 11, 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

Jan 2, 2023

This is collection of the CNCF logos packed into a draw.io importable file to draw cloud native architectures

draw-io-cncf-shape This is collection of the CNCF logos packed into a draw.io importable file to draw cloud native architectures How to embed the shap

Dec 26, 2022

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

May 18, 2022

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

May 3, 2022

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

Jan 3, 2023

📚 Study guide and introduction to the modern front end stack.

Grab Front End Guide Credits: Illustration by @yangheng This guide has been cross-posted on Free Code Camp. Grab is Southeast Asia (SEA)'s leading tra

Jan 3, 2023

The Illusion of Life: An SVG Animation Case Study

svgAnimation.js is a Snap.svg plugin used to create complex animations from simple SVGs svgAnimation takes the complexity out of creating Snap.svg ani

Nov 8, 2022

This is built code of Facebook.com - study only

Notes Repo này gồm một số mã được tải từ Facebook, nhằm mục đích nghiên cứu và học tập. Một số trong này đã được mình phân loại, nhưng sẽ không được l

Jul 22, 2022

Bringing an all Open-Source Platform to study Data Structures and Algorithms ⚡

NeoAlgo-Docs Bringing an all Open-Source Platform to study Data Structures and Algorithms ⚡ 🔧 Installation You will need to have NodeJS and Yarn inst

Jun 2, 2022

365 Days of study and preparation to get an internship and then a job at Google.

365DaysToGoogle 365 Days of study and preparation to get an internship and then a job at Google. Study Program Introduction Let's make a quick introdu

Jan 19, 2022

GraphQL Projects Study Cases with TypeScript/Node.js & Other Stacks

GraphQL Projects Study Cases with TypeScript/Node.js & Other Stacks A real world projects with intention of studying a little bit more about GraphQL w

Dec 5, 2022

Use this app to track and prioritize the topics you need to study during your job search

Interview Skills Grid Use this app to track and prioritize the topics you need to study during your job search. Try it for yourself! -- Interview Ski

Apr 13, 2022

A repository with the purpose of Node.js streams study. Powered by JS Expert Week / @ErickWendel

Spotify Radio - Semana JS Expert 6.0 Seja bem vindo(a) à sexta Semana Javascript Expert. Este é o código inicial para iniciar nossa jornada. Marque es

Oct 28, 2022

Quick study on NextJs + Material UI

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Jun 29, 2022

A study-with-me/pomodoro app, made for streamers by streamers

Study with me A simple pomodoro "study with me app" to render a counter and a progress bar. Ideal for use on software such as OBS. Visit stdywith.me/s

Jul 1, 2022

Digitally enabled cafe for students to order drinks, socialize, and study hard.

Coffee Shop Full Stack Full Stack Nano - IAM Final Project Udacity has decided to open a new digitally enabled cafe for students to order drinks, soci

Nov 20, 2022

A scalable rock, paper and scissors game for study purpose

A scalable rock, paper and scissors game for personal study purposes. The original game is rock, paper and scissors. However, assuming you want to add

Aug 11, 2022

Cuteanime is a website where you can watch anime with Japanese subtitles, it is a fun way to study japanese.

Cuteanime.moe Cuteanime is a website where you can watch anime with Japanese subtitles and lookup words with a dictionary extension like Yomichan. We

Oct 27, 2022

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)