How to save the coordinates of the rotated rectangle #16

zstarpak · 2022-12-19T10:25:07Z

zstarpak
Dec 19, 2022

Hi, I am trying to allow user create a rectangle on map then rotate it, but how can i access the rotated rectangle's coordinates and rotation angle so it can be saved and then to draw again? Can you please share it?

danwild · 2022-12-20T03:51:07Z

danwild
Dec 20, 2022

Hi @zstarpak,

Leaflet.draw.rotate is an extension for the leaflet.draw plugin - see their docs for how to get the created objects.

e.g. https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html#l-draw-event

Cheers,
Dan

5 replies

zstarpak Dec 21, 2022
Author

Hey @danwild I checked it out, but i wasn't able to get how can i catch the transformed event to get the values. I tried the following but it seemed to return noting:

map.on('draw:transformed', function (e){
 console.log(e);
});
map.on('transformed', function (e){
 console.log(e);
});
// And also following
         map.on(L.Draw.Event.EDITED, function (event) {
                let layers = event.layers;
                 layers.eachLayer(function (layer) {
                       layer.on('draw:transformed', function (e){
                              console.log(e);
                       });
                       layer.on('transformed', function (e){
                              console.log(e);
                        });
                 });
        });

There was nothing logged on the console.

danwild Dec 21, 2022

The transform events were inherited from Leaflet.Path.Transform, and as noted in the README - the scale/rotate/transform:

events are fired on the transformed layer

In your first 2 x examples, you are binding to the map, not the layer.

And in your final example, you are only binding the layer to transformed event on EDIT, when I suspect you would want CREATE.

e.g.

map.on(L.Draw.Event.CREATED, function (e) {
  
  // do stuff with created layer
  const { layer } = e;
  console.log('L.Draw.Event.CREATED', layer);
 
  layer.on('transformed', function (e) {

      // do stuff with transformed layer
      console.log('transformed', e);
  });
});

zstarpak Dec 22, 2022
Author

Yes, the flow is like this, once we create a rectangle and it is added on the map, then we go and click on the edit button to rotate/scale the rectangle and save it.

Once saved we get the coordinates, the lat lng and then save them in dB, so when user opens the public map, we fetch those coordinates and show it to the user, the new rotated rectangle (edited) instead of the original (created, which will be my next step after I test this in morning 😊).

Btw huge thanks for replying to my questions 🙏, I wasn't sure I would get a reply. It's really appreciated. Once I get it working I'll make a PR for the documentation to add in my example code so others can directly have one right in the docs

zstarpak Dec 23, 2022
Author

@danwild following is my complete code, can you please check it and suggest some corrections?

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- Leaflet Library -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.min.css"
          integrity="sha512-KJRB1wUfcipHY35z9dEE+Jqd+pGCuQ2JMZmQPAjwPjXuzz9oL1pZm2cd79vyUgHQxvb9sFQ6f05DIz0IqcG1Jw=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"
          integrity="sha512-gc3xjCmIy673V6MyOAZhIW93xhM9ei1I+gLbmFjUHIjocENRsLX/QUE1htk5q1XV2D/iie/VQ8DXI6Vu8bexvQ=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.min.js"
            integrity="sha512-Io0KK/1GsMMQ8Vpa7kIJjgvOcDSwIqYuigJEYxrrObhsV4j+VTOQvxImACNJT5r9O4n+u9/58h7WjSnT5eC4hA=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"
            integrity="sha512-ozq8xQKq6urvuU6jNgkfqAmT7jKN2XumbrX1JiB3TnF7tI48DPI4Gy1GXKD/V3EExgAs1V+pRO7vwtS1LHg0Gw=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!--    <script src="https://unpkg.com/[email protected]/dist/L.Path.Transform.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
            integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="public/js/Edit.Rectangle.Rotate.js"></script>
    <script src="public/js/leaflet-draw-rotate.js"></script>
</head>
<body>
<div style="width: 100%;height: 450px;">
    <input type="hidden" name="coordinates" id="coordinates">
    <div id="berthMap" style="width: 100%;height: 450px;"></div>
    <script>
        let lat = 42.00228;
        let lng = 15.00124;
        // enable map with draw controls and draw mode
        let map = L.map('berthMap').setView([lat, lng], 18);
        // add the OpenStreetMap tiles
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
            maxZoom: 18,
            minZoom: 16,
        }).addTo(map);

        // Stop the drag and zoom handlers.
        map.dragging.disable();

        // Now we allow the user to draw a rectangle on map to define the berth
        let drawnItems = new L.FeatureGroup();
        L.Edit.Rectangle.prototype.setOptions({uniformScaling: false, scaleRounding: 4});
        map.addLayer(drawnItems);
        let drawControl = new L.Control.Draw({
            draw: {
                polyline: false,
                polygon: false,
                circle: false,
                marker: false,
                circlemarker: false,
                rectangle: true
            },
            edit: {
                featureGroup: drawnItems,
                remove: true
            }
        });
        map.addControl(drawControl);

        // When the user draw a rectangle, we save the coordinates in an object
        map.on(L.Draw.Event.CREATED, function (event) {
            let layer = event.layer;
            let bounds = layer.getBounds();
            let coordinates = {
                "lat": bounds.getCenter().lat,
                "lng": bounds.getCenter().lng,
                "width": bounds.getEast() - bounds.getWest(),
                "height": bounds.getNorth() - bounds.getSouth()
            };
            console.log(coordinates);

            // We save the coordinates in a hidden input
            $('#coordinates').val(JSON.stringify(coordinates));
            // temp store the coordinates in the local storage
            localStorage.setItem('coordinates', JSON.stringify(coordinates));
            drawnItems.addLayer(layer);
        });

        // Enable Rotation and Transforming of Layers
        L.Edit.Rectangle.prototype.setOptions({uniformScaling: false, scaleRounding: 4});

        // When the user edit the rectangle, we update the coordinates in the hidden input
        map.on(L.Draw.Event.EDITED, function (event) {
            let layers = event.layers;
            // we get the old coordinates and put a marker in the center of the rectangle
            layers.eachLayer(function (layer) {
                let transformation = {};

                // How I'm able to get values from the transformation object?
                for (let key in layer.transform) {
                    console.log(key + " : " + layer.transform[key]);
                }
                if (layer.transform) {
                    transformation = {
                        angle: layer.transform._angle,
                        scale: layer.transform._scale,
                        scaleOrigin: layer.transform._scaleOrigin,
                        rotationOrigin: layer.transform._rotationOrigin
                    };
                } else {
                    transformation = null;
                }
                let bounds = layer.getBounds();
                let coordinates = {
                    "lat": bounds.getCenter().lat,
                    "lng": bounds.getCenter().lng,
                    "width": bounds.getEast() - bounds.getWest(),
                    "height": bounds.getNorth() - bounds.getSouth(),
                    "transformation": transformation
                };
                console.log(coordinates);
                // temp store the coordinates in the local storage
                localStorage.setItem('coordinates', JSON.stringify(coordinates));
                $('#coordinates').val(JSON.stringify(coordinates));
            });
        });

        // When the user delete the rectangle, we delete the coordinates in the hidden input
        map.on(L.Draw.Event.DELETED, function (event) {
            $('#coordinates').val('');
        });

        // enable draw control
        map.on('draw:created', function (e) {
            var type = e.layerType,
                layer = e.layer;
            if (type === 'marker') {
                layer.bindPopup('A popup!');
            }
            drawnItems.addLayer(layer);
        });

        // remove the rectangle if the user click on it
        map.on('click', function (e) {
            drawnItems.eachLayer(function (layer) {
                if (layer instanceof L.Rectangle) {
                    if (layer.getBounds().contains(e.latlng)) {
                        drawnItems.removeLayer(layer);
                        $('#coordinates').val('');
                    }
                }
            });
        });

        // remove all rectangles data when user click on delete control
        map.on('draw:deleted', function (e) {
            $('#coordinates').val('');
        });

        // delete all rectangles when user starts to draw a new one
        map.on('draw:drawstart', function (e) {
            drawnItems.eachLayer(function (layer) {
                if (layer instanceof L.Rectangle) {
                    drawnItems.removeLayer(layer);
                }
            });
        });

        // If the user has already defined a berth, we draw it on the map

        if (localStorage.getItem('coordinates') !== null) {
            let coordinates = JSON.parse(localStorage.getItem('coordinates'));
            L.Edit.Rectangle.prototype.setOptions({uniformScaling: false, scaleRounding: 4});
            let rectangle = L.rectangle([
                [coordinates.lat - coordinates.height / 2, coordinates.lng - coordinates.width / 2],
                [coordinates.lat + coordinates.height / 2, coordinates.lng + coordinates.width / 2]
            ], {transform: true}).addTo(map);
            console.log(coordinates.transformation);
            drawnItems.addLayer(rectangle);

            // This does not work
            if (coordinates.transformation) {
                rectangle.transform.transform(coordinates.transformation.angle, coordinates.transformation.scale, coordinates.transformation.rotationOrigin, coordinates.transformation.rotationOrigin);
            }
        }

    </script>
</div>
</body>
</html>

zstarpak Dec 23, 2022
Author

This is the error i get when using reactangle.transform.transform() on line 181:

leaflet-draw-rotate.js:1219 Uncaught TypeError: Cannot read properties of null (reading '_map')
    at e._transformPoints (leaflet-draw-rotate.js:1219:22)
    at e.transform (leaflet-draw-rotate.js:1021:12)
    at note.html?_ijt=5iq3n38splik7f70nrjpp60pi2&_ij_reload=RELOAD_ON_SAVE:181:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to save the coordinates of the rotated rectangle #16

{{title}}

Replies: 1 comment 5 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

How to save the coordinates of the rotated rectangle #16

zstarpak Dec 19, 2022

Replies: 1 comment · 5 replies

danwild Dec 20, 2022

zstarpak Dec 21, 2022 Author

danwild Dec 21, 2022

zstarpak Dec 22, 2022 Author

zstarpak Dec 23, 2022 Author

zstarpak Dec 23, 2022 Author

zstarpak
Dec 19, 2022

Replies: 1 comment 5 replies

danwild
Dec 20, 2022

zstarpak Dec 21, 2022
Author

zstarpak Dec 22, 2022
Author

zstarpak Dec 23, 2022
Author

zstarpak Dec 23, 2022
Author