leaflet.draw

How to clear leaflet map in reactjs by button?

自作多情 提交于 2021-02-11 14:03:19
问题 I want to clear my leaflet map by clicking a button...how to do this... I want to clear all drawed shapes on the map, so the map to be clear This is my code of the leaflet map in the return statement: <Map key={this.state.keyMAP} style={{ height: "50vh" }} center={position} zoom={13} onClick={this.handleClick} onCreate={this.onCreate} onLocationfound={this.handleLocationFound} > {/* startDirectly */} <TileLayer attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

Leaflet draw edit control custom text

懵懂的女人 提交于 2021-02-10 05:31:47
问题 I'd like to change the options text from edit control at Leaflet Draw. So instead of Save | Cancel | Clear All Display this text in another language. Same on the tooltips. Is it possible? 回答1: I solved in this way. L.drawLocal = { draw: { toolbar: { // #TODO: this should be reorganized where actions are nested in actions // ex: actions.undo or actions.cancel actions: { title: 'Cancel - your text-', text: '- your text-' }, finish: { title: '- your text-', text: '- your text-' }, undo: { title:

how to calculate area of polygon using Leaflet.Draw GeometryUtil

对着背影说爱祢 提交于 2020-07-10 08:09:07
问题 I read this answer on how to calculate the area of a polygon and I am trying to achieve the same. However, I consistently get 0 (zero) for the area. JS fiddle is here. The crux of my code is: var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm); var latlngs = [[19.04469, 72.9258], [19.07459, 72.9358], [19.08469, 72.4758]]; var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map); console.log('area is: '+L.GeometryUtil.geodesi I consistently get area is: 0 on the console.

Node.js Leaflet error

非 Y 不嫁゛ 提交于 2020-02-25 13:35:48
问题 Please help!! I know I'm missing something very simple but I'm new to all this and I read lots of different post and tutorial and can't get whats wrong. I initiate a new project on Ubuntu 14.04 Navigate to the folder I want my app to be. This is the steps I take: sudo apt-get install nodejs-legacy sudo npm install express-generator -g (framework) express -e --ejs (Establece el lenguaje ejs como base) https://www.npmjs.com/package/ejs npm install To run the app DEBUG=myapp:* npm start Then

Node.js Leaflet error

折月煮酒 提交于 2020-02-25 13:35:31
问题 Please help!! I know I'm missing something very simple but I'm new to all this and I read lots of different post and tutorial and can't get whats wrong. I initiate a new project on Ubuntu 14.04 Navigate to the folder I want my app to be. This is the steps I take: sudo apt-get install nodejs-legacy sudo npm install express-generator -g (framework) express -e --ejs (Establece el lenguaje ejs como base) https://www.npmjs.com/package/ejs npm install To run the app DEBUG=myapp:* npm start Then

Property 'Draw' does not exist on type 'typeof Control'

两盒软妹~` 提交于 2020-02-23 13:11:38
问题 I'm attempting to implement a map component with leaflet and other leaflet plugins. The issue is other plugins don't work from TypeScript for some reason. For example I'm unable to compile code with leaflet-draw plugin and getting the error: Property 'Draw' does not exist on type 'typeof Control' mapbox.component.ts import { DataService } from "../data-service.service"; import { Component, OnInit } from '@angular/core'; import * as $ from 'jquery'; /// <reference types="leaflet" /> ///

Property 'Draw' does not exist on type 'typeof Control'

冷暖自知 提交于 2020-02-23 13:05:48
问题 I'm attempting to implement a map component with leaflet and other leaflet plugins. The issue is other plugins don't work from TypeScript for some reason. For example I'm unable to compile code with leaflet-draw plugin and getting the error: Property 'Draw' does not exist on type 'typeof Control' mapbox.component.ts import { DataService } from "../data-service.service"; import { Component, OnInit } from '@angular/core'; import * as $ from 'jquery'; /// <reference types="leaflet" /> ///

rotate polygon around point in leaflet map

…衆ロ難τιáo~ 提交于 2020-01-11 04:12:06
问题 I have an issue, in my leaflet map I've created a triangle from polygon: var polygon = L.polygon([ [parseFloat(decimal_lat),parseFloat(decimal_lon)], [parseFloat(decimal_lat) + 1, parseFloat(decimal_lon) - 1], [parseFloat(decimal_lat) + 1, parseFloat(decimal_lon) + 1] ], { color:'green' }); polygon.addTo(map); and I want to rotate this polygon around Point[decimal_lon, decimal_lat] . But I'm not able to solve it.. I've created DEMO, where I'm rotating polynom the same I want to rotate my

Leaflet edit toolbar icons misaligned

寵の児 提交于 2020-01-07 02:37:06
问题 I am using - Leaflet version 1.0.1 and Leaflet draw version - 0.4.1 The edit toolbar icons appear to be misaligned on page load. Please help! 回答1: I found a solution to this issue by using the css file in the "Master" branch together with the leaflet-draw script which I downloaded. 来源: https://stackoverflow.com/questions/40337606/leaflet-edit-toolbar-icons-misaligned

Add existing leaflet polygons to an existing leaflet layer

风流意气都作罢 提交于 2020-01-03 04:28:19
问题 I have a bunch of polygons which are stored in a database. I would like to add them to the map in such a way that they can be edited using the leaflet-draw toolbar. Although, now the polygons get added to the map, I am unable edit them. I think this is because they are not added to the layerGroup() to which newly drawn shapes are added. Please help. 回答1: You have to add your polygons to the featureGroup drawnItems ! Let's say, var polyLayers = dbArray; is your database array with polygons.