Questions

[tommyc38]

Forgive me for asking here but I am new to working with maps. First, this draw tool is fantastic and just what I was looking for. However, I'm not sure how to run query's using it. For example, if I have an address or lat/long, how do I query which (if any) of the shapes I have build (using this tool) contain that point? Which shape is the closest to that point? etc. Any direction here or references to docs would be extremely helpful. Also, If I have a shape built using this tool and I have another boundary adjacent to it, how can I blend them to perfectly be adjacent to each other?

[Jeff-Numix]

I think you have to develop this features on your own because, to my knowledge, they are not part of mapbox or mapboxgl sdk.

how do I query which (if any) of the shapes I have build (using this tool) contain that point

You could modify the BezierGroup class and add a function that would take a point as parameter. Inside the function you should check if your point is inside the polygon formed by the vertices of the shape. This package could be a good start to test if a point is inside a polygon https://www.npmjs.com/package/point-in-polygon

Which shape is the closest to that point?

you could get each feature on the draw object and compare all of its vertices distances with your point, then return the closest feature.

Also, If I have a shape built using this tool and I have another boundary adjacent to it, how can I blend them to perfectly be adjacent to each other?

Sorry but i am not sure to understand your question, can you send me a drawing to explain what you want to achieve at support[a]numix[dot]fr

Good luck

[tommyc38]

@Jeff-Numix, thank you! By point, I meant an address or lat/long not a mathematical representation relative to the shape. Basically, I am wanting to draw a boundary using this tool on a map and then somehow translate that into a postgres gis database so I can run spatial queries. I will reach out to mapbox and see if they can help me bridge the gap between drawing with this tool and storing it in a GIS database. Moreover, by adjacent boundaries, I mean where you have two shapes that share the same 'side'. Take any state in the US as boundary, where one side of a state is potentially shared with another state. Hopefully that makes sense? This would actually be a helpful feature. For example, if I draw a shape that is completely enclosed (e.g. Idaho), I could then select two points on that shape that would be the basis for a new shape (e.g. Montana - which is adjacent to Idaho).

[Jeff-Numix]

@tommyc38 i don't know how you do posgres gis database querys, but i imagine you should have a reference lat/lon point and an array of points to form a polygon so your query can return true or false depending if your point is inside or not the polygon. You can easily get the array of points by looking at the feature vertices. its a collection of lat/lon coordinates.

For the adjacent boundaries, i understand now. this would require some programming. If you need help we can continue this discussion by email.

[Brunlo]

I think a tutorial should be made getting this to work. Like code it out and show people how its done.

[Brunlo]

So I had to add defaultMode: 'draw_bezier_curve', to get it to work with ionic/Angular so my code looks like this:

let draw = new MapboxDraw({ displayControlsDefault: false, defaultMode: 'draw_bezier_curve', userProperties: true, modes: { ...MapboxDraw.modes, simple_select: SimpleSelectModeBezierOverride, direct_select: DirectModeBezierOverride, draw_bezier_curve: DrawBezierCurve, }, styles: customStyles, }) this.mapClass.setDrawControl(draw, () => { this.AREA.allow_create = true; });

Also I did not have to use this block of code:

// mapboxgl.accessToken = 'getAccessToken()'; // let map = new mapboxgl.Map({ // container: 'map', // style: 'mapbox://styles/mapbox/streets-v8', // center: [2.45, 46.59], // zoom: 5.8 // }); // map.addControl(draw)

I did not have to use this code because I already have mapboxgl map on the app. Also map.addControl(Draw) should be map.addControl(draw) <---- Lower case d. Also DO NOT forget to add your mapboxgl.accessToken = 'place token here'; if you need it. In my case I did not need it because my map is already up. Anyway I hope this helps someone.

[Brunlo]

So if you want to customize the styles and you are working in Angular/ionic like me, follow this path within the project mapbox-gl-draw-bezier-curve-mode/src/lib/styles/customStyles.js. So he coded this up in javascript but you can of course take this and put it into a typescript file. So all you have to do is format it like this:

styles: [ // Bezier Handles Lines { 'id': 'gl-draw-bezier-handle-line-active', 'type': 'line', 'filter': ['all', ['==', '$type', 'LineString'], ['==', 'meta2', 'handle-line'], ], 'layout': { 'line-cap': 'round', 'line-join': 'round' }, 'paint': { 'line-color': '#D8DB2A', 'line-width': 1 } }, { 'id': 'gl-draw-polygon-fill-inactive', // Made the first layer change here 'type': 'fill', 'layout': {}, 'paint': { 'fill-color': '#D8DB2A', 'fill-opacity': 0.2 } },.....

and so on. Anyway if you do not want to put this directly into your code you can set it to a value somewhere else in your code and call it where you want it. This at least can help you get it up and running. Notice I changed the colors and even added a layer within the code (/ /Made the first layer change here). Anyway I hope this helps.

[Jeff-Numix]

Thanks @Brunlo for your contribution :) I will try to add a tutorial when i have some time (currently its a pretty dense period for me) and if there are more users interested in the bezier curve mode ;)

[Brunlo]

Awesome!

[PixelLifetime]

Does this project have a license? I didn't find one unfortunately.

Also, 2 quick questions.

1. Can I get points on the bezier curve? Like a middle point that is on the curve itself.
2. Can it draw curves without editing part, just drawing curves with parameters?

[Jeff-Numix]

Hi @PixelLifetime, Licence is MIT. so it is free to use in your project. Sorry i am not at home now and i have very limited time to devote to this project.

1. I have to check if there is a public function for that. In direct mode, there is a midpoint so you can add new points on the curve. So i imagine this is doable :)
2. Yes i think you can create curves by code. i have to look how to do and i will tell you as soon as i can.

[Jeff-Numix]

Hi @PixelLifetime

1. To get points on the bezier curve, like the middle point, look into the createSupplementaryPointsForBezier.js script. There you will find line 88 the following code : midPointCoords = getMidPointVertex(bezierCurve.verts, vertIndex, nextNodeVerticeIndex); this getMidPointVertex function finds the closest vertex to the middle point. You can start from there.

2. Yes you can draw curves by code. its what i do in the demo code. Look into demo/src/App.js script. There i use some demoData to draw curves on start. Line 130 you will find the following code that creates the bezier lines : const bezierGroups = rawDataToBezierGroup(demoData); This rawDataToBezierGroup function (located in src/lib/utils/rawDataToBezierGroup.js) will create curves programmatically based on the data located in demo/src/demoData.js

If you need more in depth help & advice, you can contact me by mail by filling the form on our website (see Readme.MD in the Credits section) Good luck

[Brunlo]

Awesome!

On Wed, Jun 15, 2022 at 10:10 AM Jeff Sebrechts @.***> wrote:

Hi @PixelLifetime https://github.com/PixelLifetime

To get points on the bezier curve, like the middle point, look into the createSupplementaryPointsForBezier.js script. There you will find line 88 the following code : midPointCoords = getMidPointVertex(bezierCurve.verts, vertIndex, nextNodeVerticeIndex); this getMidPointVertex function finds the closest vertex to the middle point. You can start from there. 2.

Yes you can draw curves by code. its what i do in the demo code. Look into demo/src/App.js script. There i use some demoData to draw curves on start. Line 130 you will find the following code that creates the bezier lines : const bezierGroups = rawDataToBezierGroup(demoData); This rawDataToBezierGroup function (located in src/lib/utils/rawDataToBezierGroup.js) will create curves programmatically based on the data located in demo/src/demoData.js

If you need more in depth help & advice, you can contact me by mail by filling the form on our website (see Readme.MD in the Credits section) Good luck

— Reply to this email directly, view it on GitHub https://github.com/Jeff-Numix/mapbox-gl-draw-bezier-curve-mode/issues/1#issuecomment-1156665391, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALDFI5YKP67S7OGFMHS52K3VPH6ABANCNFSM5ENLUBFQ . You are receiving this because you were mentioned.Message ID: @.*** com>