CODEWITHSUNDEEP
javascriptleafletmapbox
Raj
Raj

Reputation: 335

Using Leaflet.Path.Transform to rotate polygons in Mapbox

I'm using Mapbox JS with Leaflet. I've been trying to find a way to rotate a polygon by dragging a corner or something similar, and I found Leaflet.Path.Transform that does exactly what I need, like this example (mainly the rotating and dragging part).

I looked at their example, and tried to use that for my particular situation. But I haven't been able to figure out how to access the script file required for that. Their GitHub page tells me to include the dist/L.Path.Transform.js file. So I went to this page and copied the code and pasted it in the script.js file in Plunker, and linked to it in the code. This is what I have so far in Plunker.

For now, I'm just trying to add a new polygon and try to rotate/drag that.

var polygon = new L.Polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
], {
    color: '#f00',
    transform: true
  }).addTo(map);
//polygon.transform.enable({rotation: true, scaling: false});

But it is giving me some JavaScript errors. What am I doing wrong here? Or if there is some other simple demo that I can refer to, that'll be great as well.

Upvotes: 2

Views: 4362

Answers (1)

Raj
Raj

Reputation: 335

Thanks to help from the person who developed Leaflet.Path.Transform (w8r), I was about to figure out what I needed. There is a sample demo in this link if anyone needs it. It is possible to rotate/drag the given polygon. In the original question, the issue was that I couldn't figure out how to link to the required script. But this is what I had missed first:

<script src='https://unpkg.com/[email protected]/dist/Leaflet.draw.drag.js'></script>
<script src="https://unpkg.com/[email protected]/dist/L.Path.Transform.js"></script>

Now it works as I intended.

Upvotes: 3

Related Questions