Transforming layerGroup

[andrroy]

Hi! I have a project were I have several small polygons within a large one. I want to group all these polygons together, so that all the small polygons are rotated when you rotate the big polygon. I tried doing it like this:

var group = L.layerGroup([bigPolygon, smallPolygons], { transform: true });
group.addTo(map)
group.transform.enable({rotation: true, scaling: false});

But then I get:

Cannot read property 'enable' of undefined

For reference, here is an example of the polygons Im talking about:

Do you have any suggestions on how I might solve this?

[w8r]

Hi! Did you try using L.MultiPolygon for that?

Kind regards, Alexander Milevski

On 22 Oct 2017, at 21:23, Andreas Røyrvik notifications@github.com wrote:

Hi! I have a project were I have several small polygons within a large one. I want to group all these polygons together, so that all the small polygons are rotated when you rotate the big polygon. I tried doing it like this:

var group = L.layerGroup([bigPolygon, smallPolygons], { transform: true }); group.addTo(map) group.transform.enable({rotation: true, scaling: false}); But then I get:

Cannot read property 'enable' of undefined For reference, here is an example of the polygons Im talking about:

Do you have any suggestions on how I might solve this?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[andrroy]

Thanks for such a quick reply! Am I right to assume that L.MultiPolygon is L.Polygon in leaflet right now? L.MultiPolygon is not defined in the latest version of leaflet, but according to their documentation, L.Polygon accepts multiple polygons at once.

I dont think that will work for me, as a need the small polygons in my project to have click events, while the big one should not.

My starting point is geoJSON, and right now I have been able to implement dragging of all the polygons by doing the following:

map = new L.Map('map').setView(position, zoom);
L.tileLayer(myURL, {maxZoom: 21}).addTo(map);

var geojson = smallPolygons; // I'm getting theese from a server as GeoJSON
geojson.push(bigPolygon); // Also from the server

var geoJsonFeatureGroup = L.geoJSON(geojson, {
    onEachFeature: function (feature, layer) {
    __initDraggableLayer(layer);
    },
});

function __initDraggableLayer(layer) {
    layer.makeDraggable();
    layer.dragging.enable();

    layer.on('drag', function (dragEvent) {
        geoJsonFeatureGroup.getLayers().forEach(function (otherLayer) {
            if (otherLayer !== layer && otherLayer._transform) {
            otherLayer._transform(layer.dragging._matrix);
            }
        });
    });

    layer.on('dragend', function () {
        geoJsonFeatureGroup.getLayers().forEach(function (otherLayer) {
            if (otherLayer !== layer && otherLayer.dragging && otherLayer.dragging._transformPoints) {
          otherLayer.dragging._transformPoints(layer.dragging._matrix);
          otherLayer._updatePath();
          otherLayer._project();
          otherLayer._transform(null);
        }
        });
    });
}

geoJsonFeatureGroup.addTo(map);

This solution is based on responses in this issue. Maybe it would be possible to something similar for transform?

[w8r]

Can you give me your GeoJSON data, please?

[andrroy]

Sure!

var bigPolygon = {"type":"Polygon","coordinates":[[[10.2638259291397,59.6980549127538,110.43],[10.2640392016652,59.6980618406265,110.43],[10.264044385139,59.6980199323978,107.17],[10.2639670024244,59.6980174406526,107.17],[10.2639338985822,59.6980163248095,107.17],[10.263903477183,59.6980153689003,107.17],[10.2638312545262,59.6980130096579,107.17],[10.2638298991808,59.6980233406475,107.977],[10.2638285283805,59.6980350382869,108.89],[10.2638267461077,59.698048888795,109.948],[10.2638259291397,59.6980549127538,110.43]]]}

var smallPolygons = [{"type":"Polygon","coordinates":[[[10.264041657862583,59.698021582296356,107.31016932177882],[10.264040710099136,59.69802910119364,107.89888047356278],[10.264011154839631,59.698028149510854,107.89888047356278],[10.264012102609684,59.698020630613755,107.31016932177882],[10.264041657862583,59.698021582296356,107.31016932177882]]]},{"type":"Polygon","coordinates":[[[10.264040710099136,59.69802910119364,107.89888047356278],[10.264039762335287,59.698036620090924,108.48759162534675],[10.264010207069177,59.69803566840795,108.48759162534675],[10.264011154839631,59.698028149510854,107.89888047356278],[10.264040710099136,59.69802910119364,107.89888047356278]]]},{"type":"Polygon","coordinates":[[[10.264039762335287,59.698036620090924,108.48759162534675],[10.264038814571032,59.69804413898821,109.07630277713072],[10.264009259298318,59.69804318730501,109.07630277713072],[10.264010207069177,59.69803566840795,108.48759162534675],[10.264039762335287,59.698036620090924,108.48759162534675]]]},{"type":"Polygon","coordinates":[[[10.264038814571032,59.69804413898821,109.07630277713072],[10.264037866806374,59.698051657885436,109.66501392891469],[10.264008311527055,59.698050706202054,109.66501392891469],[10.264009259298318,59.69804318730501,109.07630277713072],[10.264038814571032,59.69804413898821,109.07630277713072]]]},{"type":"Polygon","coordinates":[[[10.264037866806374,59.698051657885436,109.66501392891469],[10.264036919041315,59.69805917678267,110.25372508069866],[10.264007363755391,59.69805822509912,110.25372508069866],[10.264008311527055,59.698050706202054,109.66501392891469],[10.264037866806374,59.698051657885436,109.66501392891469]]]},{"type":"Polygon","coordinates":[[[10.264012102609684,59.698020630613755,107.31016932177882],[10.264011154839631,59.698028149510854,107.89888047356278],[10.263981599581717,59.69802719782139,107.89888047356278],[10.263982547358374,59.698019678924474,107.31016932177882],[10.264012102609684,59.698020630613755,107.31016932177882]]]},{"type":"Polygon","coordinates":[[[10.264011154839631,59.698028149510854,107.89888047356278],[10.264010207069177,59.69803566840795,108.48759162534675],[10.263980651804657,59.698034716718304,108.48759162534675],[10.263981599581717,59.69802719782139,107.89888047356278],[10.264011154839631,59.698028149510854,107.89888047356278]]]},{"type":"Polygon","coordinates":[[[10.264010207069177,59.69803566840795,108.48759162534675],[10.264009259298318,59.69804318730501,109.07630277713072],[10.263979704027195,59.69804223561518,109.07630277713072],[10.263980651804657,59.698034716718304,108.48759162534675],[10.264010207069177,59.69803566840795,108.48759162534675]]]},{"type":"Polygon","coordinates":[[[10.264009259298318,59.69804318730501,109.07630277713072],[10.264008311527055,59.698050706202054,109.66501392891469],[10.263978756249328,59.69804975451204,109.66501392891469],[10.263979704027195,59.69804223561518,109.07630277713072],[10.264009259298318,59.69804318730501,109.07630277713072]]]},{"type":"Polygon","coordinates":[[[10.264008311527055,59.698050706202054,109.66501392891469],[10.264007363755391,59.69805822509912,110.25372508069866],[10.263977808471058,59.69805727340891,110.25372508069866],[10.263978756249328,59.69804975451204,109.66501392891469],[10.264008311527055,59.698050706202054,109.66501392891469]]]},{"type":"Polygon","coordinates":[[[10.263982547358374,59.698019678924474,107.31016932177882],[10.263981599581717,59.69802719782139,107.89888047356278],[10.263952044325396,59.698026246125295,107.89888047356278],[10.263952992108658,59.698018727228586,107.31016932177882],[10.263982547358374,59.698019678924474,107.31016932177882]]]},{"type":"Polygon","coordinates":[[[10.263981599581717,59.69802719782139,107.89888047356278],[10.263980651804657,59.698034716718304,108.48759162534675],[10.263951096541732,59.698033765022,108.48759162534675],[10.263952044325396,59.698026246125295,107.89888047356278],[10.263981599581717,59.69802719782139,107.89888047356278]]]},{"type":"Polygon","coordinates":[[[10.263980651804657,59.698034716718304,108.48759162534675],[10.263979704027195,59.69804223561518,109.07630277713072],[10.263950148757662,59.69804128391867,109.07630277713072],[10.263951096541732,59.698033765022,108.48759162534675],[10.263980651804657,59.698034716718304,108.48759162534675]]]},{"type":"Polygon","coordinates":[[[10.263979704027195,59.69804223561518,109.07630277713072],[10.263978756249328,59.69804975451204,109.66501392891469],[10.263949200973192,59.698048802815364,109.66501392891469],[10.263950148757662,59.69804128391867,109.07630277713072],[10.263979704027195,59.69804223561518,109.07630277713072]]]},{"type":"Polygon","coordinates":[[[10.263978756249328,59.69804975451204,109.66501392891469],[10.263977808471058,59.69805727340891,110.25372508069866],[10.263948253188317,59.69805632171204,110.25372508069866],[10.263949200973192,59.698048802815364,109.66501392891469],[10.263978756249328,59.69804975451204,109.66501392891469]]]},{"type":"Polygon","coordinates":[[[10.263952992108658,59.698018727228586,107.31016932177882],[10.263952044325396,59.698026246125295,107.89888047356278],[10.263922489070666,59.69802529442253,107.89888047356278],[10.263923436860532,59.69801777552599,107.31016932177882],[10.263952992108658,59.698018727228586,107.31016932177882]]]},{"type":"Polygon","coordinates":[[[10.263952044325396,59.698026246125295,107.89888047356278],[10.263951096541732,59.698033765022,108.48759162534675],[10.263921541280395,59.69803281331903,108.48759162534675],[10.263922489070666,59.69802529442253,107.89888047356278],[10.263952044325396,59.698026246125295,107.89888047356278]]]},{"type":"Polygon","coordinates":[[[10.263951096541732,59.698033765022,108.48759162534675],[10.263950148757662,59.69804128391867,109.07630277713072],[10.263920593489722,59.69804033221555,109.07630277713072],[10.263921541280395,59.69803281331903,108.48759162534675],[10.263951096541732,59.698033765022,108.48759162534675]]]},{"type":"Polygon","coordinates":[[[10.263950148757662,59.69804128391867,109.07630277713072],[10.263949200973192,59.698048802815364,109.66501392891469],[10.263919645698646,59.69804785111202,109.66501392891469],[10.263920593489722,59.69804033221555,109.07630277713072],[10.263950148757662,59.69804128391867,109.07630277713072]]]},{"type":"Polygon","coordinates":[[[10.263949200973192,59.698048802815364,109.66501392891469],[10.263948253188317,59.69805632171204,110.25372508069866],[10.263918697907165,59.69805537000849,110.25372508069866],[10.263919645698646,59.69804785111202,109.66501392891469],[10.263949200973192,59.698048802815364,109.66501392891469]]]},{"type":"Polygon","coordinates":[[[10.263923436860532,59.69801777552599,107.31016932177882],[10.263922489070666,59.69802529442253,107.89888047356278],[10.263892933817528,59.69802434271309,107.89888047356278],[10.263893881613999,59.69801682381676,107.31016932177882],[10.263923436860532,59.69801777552599,107.31016932177882]]]},{"type":"Polygon","coordinates":[[[10.263922489070666,59.69802529442253,107.89888047356278],[10.263921541280395,59.69803281331903,108.48759162534675],[10.263891986020655,59.698031861609415,108.48759162534675],[10.263892933817528,59.69802434271309,107.89888047356278],[10.263922489070666,59.69802529442253,107.89888047356278]]]},{"type":"Polygon","coordinates":[[[10.263921541280395,59.69803281331903,108.48759162534675],[10.263920593489722,59.69804033221555,109.07630277713072],[10.263891038223376,59.69803938050573,109.07630277713072],[10.263891986020655,59.698031861609415,108.48759162534675],[10.263921541280395,59.69803281331903,108.48759162534675]]]},{"type":"Polygon","coordinates":[[[10.263920593489722,59.69804033221555,109.07630277713072],[10.263919645698646,59.69804785111202,109.66501392891469],[10.263890090425694,59.69804689940202,109.66501392891469],[10.263891038223376,59.69803938050573,109.07630277713072],[10.263920593489722,59.69804033221555,109.07630277713072]]]},{"type":"Polygon","coordinates":[[[10.263919645698646,59.69804785111202,109.66501392891469],[10.263918697907165,59.69805537000849,110.25372508069866],[10.26388914262761,59.698054418298284,110.25372508069866],[10.263890090425694,59.69804689940202,109.66501392891469],[10.263919645698646,59.69804785111202,109.66501392891469]]]},{"type":"Polygon","coordinates":[[[10.263893881613999,59.69801682381676,107.31016932177882],[10.263892933817528,59.69802434271309,107.89888047356278],[10.263863378565983,59.69802339099701,107.89888047356278],[10.26386432636906,59.698015872100854,107.31016932177882],[10.263893881613999,59.69801682381676,107.31016932177882]]]},{"type":"Polygon","coordinates":[[[10.263892933817528,59.69802434271309,107.89888047356278],[10.263891986020655,59.698031861609415,108.48759162534675],[10.263862430762504,59.69803090989314,108.48759162534675],[10.263863378565983,59.69802339099701,107.89888047356278],[10.263892933817528,59.69802434271309,107.89888047356278]]]},{"type":"Polygon","coordinates":[[[10.263891986020655,59.698031861609415,108.48759162534675],[10.263891038223376,59.69803938050573,109.07630277713072],[10.263861482958621,59.698038428789246,109.07630277713072],[10.263862430762504,59.69803090989314,108.48759162534675],[10.263891986020655,59.698031861609415,108.48759162534675]]]},{"type":"Polygon","coordinates":[[[10.263891038223376,59.69803938050573,109.07630277713072],[10.263890090425694,59.69804689940202,109.66501392891469],[10.263860535154334,59.698045947685344,109.66501392891469],[10.263861482958621,59.698038428789246,109.07630277713072],[10.263891038223376,59.69803938050573,109.07630277713072]]]},{"type":"Polygon","coordinates":[[[10.263890090425694,59.69804689940202,109.66501392891469],[10.26388914262761,59.698054418298284,110.25372508069866],[10.263859587349646,59.69805346658147,110.25372508069866],[10.263860535154334,59.698045947685344,109.66501392891469],[10.263890090425694,59.69804689940202,109.66501392891469]]]},{"type":"Polygon","coordinates":[[[10.26386432636906,59.698015872100854,107.31016932177882],[10.263863378565983,59.69802339099701,107.89888047356278],[10.263833823316029,59.69802243927426,107.89888047356278],[10.26383477112571,59.69801492037831,107.31016932177882],[10.26386432636906,59.698015872100854,107.31016932177882]]]},{"type":"Polygon","coordinates":[[[10.263863378565983,59.69802339099701,107.89888047356278],[10.263862430762504,59.69803090989314,108.48759162534675],[10.263832875505946,59.69802995817021,108.48759162534675],[10.263833823316029,59.69802243927426,107.89888047356278],[10.263863378565983,59.69802339099701,107.89888047356278]]]},{"type":"Polygon","coordinates":[[[10.263862430762504,59.69803090989314,108.48759162534675],[10.263861482958621,59.698038428789246,109.07630277713072],[10.263831927695458,59.69803747706613,109.07630277713072],[10.263832875505946,59.69802995817021,108.48759162534675],[10.263862430762504,59.69803090989314,108.48759162534675]]]},{"type":"Polygon","coordinates":[[[10.263861482958621,59.698038428789246,109.07630277713072],[10.263860535154334,59.698045947685344,109.66501392891469],[10.263830979884567,59.69804499596205,109.66501392891469],[10.263831927695458,59.69803747706613,109.07630277713072],[10.263861482958621,59.698038428789246,109.07630277713072]]]},{"type":"Polygon","coordinates":[[[10.263860535154334,59.698045947685344,109.66501392891469],[10.263859587349646,59.69805346658147,110.25372508069866],[10.263830032073274,59.698052514857935,110.25372508069866],[10.263830979884567,59.69804499596205,109.66501392891469],[10.263860535154334,59.698045947685344,109.66501392891469]]]}]

[SabineAuer]

Hey guys, are there any updates on this? I am having the same issue

[MagnusPladsen]

Someone have a update on this? i have the same issue + i want to not only drag but also rotate them together.

[thucvu97]

Hi . I am having the same issue

[w8r]

It's not really an issue, it just never worked, because I rather had geometries in mind. What do you want to achieve, to rotate several markers?

[MagnusPladsen]

@thucvu97 If its about selecting and rotating several markers, i found an alternative way. This is in react and im using the box zoom to select the polygons and using the bounds of the box zoom and the rotation angle from the event on a wrapping polygon to calculate and create new bounds for the polygons. Let me know if that can be any help and i can post some code.

[thucvu97]

@MagnusPladsen Can you share the code for me, I think it can help me