mapbox-gl-draw | Draw tools for mapbox-gl-js | Graphics library

by mapbox JavaScript Version: v1.4.1 License: ISC

X-Ray Key Features Code Snippets Community Discussions(9)Vulnerabilities Install Support

kandi X-RAY | mapbox-gl-draw Summary

mapbox-gl-draw is a JavaScript library typically used in User Interface, Graphics, Three.js, WebGL applications. mapbox-gl-draw has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i mapseed-mapbox-gl-draw' or download it from GitHub, npm.

Adds support for drawing and editing features on mapbox-gl.js maps. See a live example here.

Support

Quality

Security

License

Reuse

Support

mapbox-gl-draw has a medium active ecosystem.

It has 794 star(s) with 536 fork(s). There are 119 watchers for this library.

It had no major release in the last 12 months.

There are 157 open issues and 540 have been closed. On average issues are closed in 293 days. There are 31 open pull requests and 0 closed requests.

It has a neutral sentiment in the developer community.

The latest version of mapbox-gl-draw is v1.4.1

Quality

mapbox-gl-draw has 0 bugs and 0 code smells.

Security

mapbox-gl-draw has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

mapbox-gl-draw code analysis shows 0 unresolved vulnerabilities.

There are 0 security hotspots that need review.

License

mapbox-gl-draw is licensed under the ISC License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

Reuse

mapbox-gl-draw releases are available to install and integrate.

Deployable package is available in npm.

Installation instructions are not available. Examples and code snippets are available.

Top functions reviewed by kandi - BETA

kandi has reviewed mapbox-gl-draw and discovered the below as its top functions. This is intended to give you an instant insight into mapbox-gl-draw implemented functionality, and help decide if they suit your requirements.

Create a supplementary points .
Main entry point .
Creates the controls of the control .
Creates a polygon for a line segment .
Creates a map
Update the map classes .
Creates a new button element
Get features of a map
Change a mode .
Sort sorted area according to order

Get all kandi verified functions for this library.

mapbox-gl-draw Key Features

No Key Features are available at this moment for mapbox-gl-draw.

mapbox-gl-draw Examples and Code Snippets

No Code Snippets are available at this moment for mapbox-gl-draw.

Community Discussions

Trending Discussions on mapbox-gl-draw

the problem with leaflet and leaflet draw vue leaflet.draw.js?20d6:8 Uncaught TypeError: Cannot read properties of undefined (reading 'length')

import/export of external types failing in jest unit tests (vue2)

How to find react-map-gl-draw icons className

update to Angular 12 ng2-nouislider not working

Writing my own GeoJSON input component with a mapgox-gl interface

with Mapbox gl draw, after overriding polygon features' circle-radius, how to enlarge the selected vertex's circle-radius?

react-map-gl-draw addFeatures creating duplicates

Wicket 9: usage of JavaScriptFilteredIntoFooterHeaderResponse seems to cause trouble with renderHead

React-Rails 6 - Unable to import node_modules package

QUESTION

the problem with leaflet and leaflet draw vue leaflet.draw.js?20d6:8 Uncaught TypeError: Cannot read properties of undefined (reading 'length')

Asked 2022-Feb-19 at 21:00

mounted() {
 this.initMap();
},
methods: {
initMap() {
  this.map = L.map('mapContainer').setView([48.856663, 2.351556], 12);
  this.tileLayer = L.tileLayer(
      "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
      {
        attribution: 'CC-BY-SA, Imagery (c) Mapbox',
        maxZoom: 18,
        id: "mapbox/satellite-streets-v11",
        accessToken: "token",
      }
  );
  this.tileLayer.addTo(this.map);
  var drawnItems = new L.FeatureGroup();
  this.map.addLayer(drawnItems);
  var drawControl = new L.Control.Draw({
    edit: {
      featureGroup: drawnItems
    }
  });
  this.map.addControl(drawControl);

  this.map.on(L.Draw.Event.CREATED, function(event){
    let layer = event.layer;
    console.log(`start ${layer}`);
    drawnItems.addLayer((layer))
  })
 },
},
}

...

ANSWER

Answered 2021-Dec-24 at 08:38

I use a similar code to draw a polygon on a basemap and have a similar issue when using Vue3 with leaflet and leaflet-draw. After drawing a polygon, I get a bunch of errors in the console, probably triggered by a mouseover event.

Source https://stackoverflow.com/questions/70428824

QUESTION

import/export of external types failing in jest unit tests (vue2)

Asked 2022-Feb-13 at 16:09

I'm trying to create a package which exports some types, enums, consts and interfaces I use across multiple projects.

So I created a main.ts and I put all the exports there, specify it in package.json: "main": "main.ts".

One of my exports needs some mapbox-gl types. Obviously, I don't want my package to include mapbox-gl types. So I did the following:

...

ANSWER

Answered 2022-Feb-13 at 16:09

I was able to fix it by setting:

Source https://stackoverflow.com/questions/71101964

QUESTION

How to find react-map-gl-draw icons className

Asked 2021-Oct-06 at 20:12

I'm using the react-map-gl-draw library to draw polygons on the map. I would like to find out the className for the icons of react-map-gl-draw.

For example, className="mapbox-gl-draw_ctrl-draw-btn mapbox-gl-draw_trash" will give me a button with trash can icon. I was wondering where can I find other icons' className.

...

ANSWER

Answered 2021-Oct-06 at 20:12

In terms of buttons you can add, these are your options:

Source https://stackoverflow.com/questions/69472034

QUESTION

update to Angular 12 ng2-nouislider not working

Asked 2021-Oct-01 at 11:15

after update from angular 11.2.6 to angular 12.2.7 the binding to the nouislider component is not working anymore. Running ng serve prints this error:

The property and event halves of the two-way binding 'ngModel' are not bound to the same target.

Use the ng2-nouislider in a fresh installation it works fine.

app.module.ts

...

ANSWER

Answered 2021-Oct-01 at 11:15

As you can see from the image below, that library's latest Angular version is 4.4.1 which is before way Angular Ivy. It is not expected to work seamlessly wih Angular 12.

But you have an even better solution. You can copy-paste the code of the component in the GitHub project and put it in your own. It's a relatively simple component so it will not be very difficult to migrate it. You will also have the advantage of not worrying about the dependency anymore which makes it more maintanable.

You can check the component's code here: https://github.com/tb/ng2-nouislider/tree/master/src

Source https://stackoverflow.com/questions/69402206

QUESTION

Writing my own GeoJSON input component with a mapgox-gl interface

Asked 2021-Sep-20 at 15:53

Hej. I want to create a react admin input component MapInput where I'm given a map with drawing controls github. There I'm able to draw my polygon and get GeoJSON as a result, which I can then send to my backend REST API server (json-server).

My system consists of my react client program, and a json-server with REST API. Example for an area in my REST API:

...

ANSWER

Answered 2021-Sep-20 at 15:53

Your custom input component must display and allow the change of the polygon. This data is in the form state, handled by react-final-form. So you'll need to use react-final-form's useField() hook to grab the input value and change callback:

Source https://stackoverflow.com/questions/69245848

QUESTION

with Mapbox gl draw, after overriding polygon features' circle-radius, how to enlarge the selected vertex's circle-radius?

Asked 2021-Jun-29 at 15:41

in the official demo, after creating a polygon in the "draw_polygon" mode, as you direct_select a vertex on the polygon, that vertex will be enlarged. https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/

In this js fiddle: https://jsfiddle.net/frankzhang2046/y49mhtjx/16/ after overriding the styling rules for the vertices from line 258-271, the selected vertex under "direct_select" doesn't get enlarged anymore.

Was wondering what API/selector can I use to target the selected vertex to restore the "enlarged when selected" behavior. Thanks.

...

ANSWER

Answered 2021-Jun-29 at 15:41

update: discovered the ruleset used to target the selected vertex in the unminified MapboxDraw library. Changing the circle-radius bigging solved the problem

Source https://stackoverflow.com/questions/68171443

QUESTION

react-map-gl-draw addFeatures creating duplicates

Asked 2021-Jan-15 at 12:28

Describe the Issue When feature is deleted and new feature is added for vertices to update. The new feature is created twice. Every time this cycle is repeated. Function deleteVertex have the the code of this problem.

Actual Result new duplicate feature is added.

Expected Result Only 1 new feature should be created.

Reproduce Steps Add a feature. Remove the Feature any 1 index of coordinates. Remove the old Feature. Add the this new modified version of Feature using addFeatures.

Question Also I want to know if there is any easy way to add or remove the vertices.

Code

...

ANSWER

Answered 2021-Jan-15 at 12:28

I have reviewed your code and found out that it could be issue that delete features was finished deleting way after than adding feature. you can solve this issue by making the following changes:

make deleteVertex function async.
cloning the feature in the first line.
await the editorRef.current.deleteFeatures(featureRef.current.featureIndex);

Source https://stackoverflow.com/questions/65735230

QUESTION

Wicket 9: usage of JavaScriptFilteredIntoFooterHeaderResponse seems to cause trouble with renderHead

Asked 2020-Jul-30 at 07:42

I'm using Wicket 9 by including wicket-spring-boot-starter 3.0.4 .

In my demo project, it's necessary to put JavaScript at the end of . So I followed the explanations in https://ci.apache.org/projects/wicket/guide/9.x/single.html#_put_javascript_inside_page_body

I also added resources (CSS and JS) via an implementation of Component#renderHead(IHeaderReponse) in my page.

All works as expected with Wicket 8 (from wicket-spring-boot-starter 2.1.9).

With Wicket 9 , to make my App run, I first put webApplication.getCspSettings().blocking().disabled(); in WicketApplicationInitConfiguration#init(WebApplication). My App starts, but the generated Page doesn't contain a section, and so the app doesn't work because of missing resources.

To make the element appear in my page with all references, I commented out all code that refers to the rendering of JavaScript in . But my app doesn't work with this "workaround".

Am I doing something wrong?

...

ANSWER

Answered 2020-Jul-30 at 07:42

it looks like CSP mechanism is interfering with JavaScriptFilteredIntoFooterHeaderResponse. I will open an issue about this on JIRA. In the meantime as workaround you can use setHeaderResponseDecorator (which is deprecated) instead of getHeaderResponseDecorators:

Source https://stackoverflow.com/questions/63158243

QUESTION

React-Rails 6 - Unable to import node_modules package

Asked 2020-Jul-23 at 19:30

I'm trying to use an npm package in my react-rails project but can't seem to successfully import it. I first ran the following:

...

ANSWER

Answered 2020-Jul-23 at 19:30

The problem ended up being due to using containers and only running yarn install locally on one of my containers. I have the following docker-compose.yaml:

Source https://stackoverflow.com/questions/63057670

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install mapbox-gl-draw

You can install using 'npm i mapseed-mapbox-gl-draw' or download it from GitHub, npm.

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

Find more information at: