Draw rectangles with whole number bounds

[imakepics]

Hi,
I'm looking for a way to draw a rectangle so that the bounds are only whole numbers.
To do this I listen to map event 'drawstart' and on working layer - event 'snapdrag'.

map.on('pm:drawstart', ({ workingLayer }) => { console.log(workingLayer); workingLayer.on('pm:snapdrag', e => { console.log(e); }); });

1. I click on the rectangle in the toolbar to draw it. And drawstart event works.
   
2. The rectangle was drawn. Nothing happens in the browser console, so drawstart event don't occurs.
3. I choose the rectangle again and this time drawstart event occurs:
   

I have 2 questions:

1. Why does drawstart event only occurs the second time?
2. Is there any way to draw rectangles with whole number bounds?

Thanks for considering this issue.

[Falke-Design]

drawstart event works as expected, it is fired everytime you enable draw mode.

1. drawstart event is called - correct
2. drawstart event is not called, because draw mode is disabled, it calls the event drawend - correct
3. drawstart event is called because you enable again the draw mode - correct
   But I think on step 3 you meant the snapdrag event. And this is only called while draw mode is enabled a second time, because it needs a layer to fire snapdrag. If no layer on the map exists it can't be fired. Until the first rectangle existing it is fired.

What do you mean with whole number bounds? That the width and height are whole numbers?

[imakepics]

Hi @Falke-Design. Thank you for your reply. You are right, I was talking about snapdrag event.

I want to restrict areas, where the vertex should be placed. In my case it should be integer numbers.
For example, rectangle with bounds

var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];

should be rounded to integer

var bounds = [[55, -6], [56, -3]];

My idea was to listen to snapdrag event to implement kind of snap functionality for every vertex, so it sticks to its rounded integer positions, while cursor is moving. But I don't know, how to achieve it

[Falke-Design]

I think it will not work without changing the code deeper.

Add this code after adding the controsl to the map. But keep in mind, when you override the code like that, you will not get any updates on this code snipptes.

L.PM.Draw.Rectangle.include({

    _syncHintMarker(e) {
        // move the cursor marker
        this._hintMarker.setLatLng(e.latlng);

        // if snapping is enabled, do it
        if (this.options.snappable) {
            const fakeDragEvent = e;
            fakeDragEvent.target = this._hintMarker;
            this._handleSnapping(fakeDragEvent);
        }

        // NEW Block
        const latlng = this._hintMarker.getLatLng();
        const newLatLng = L.latLng([Math.round(latlng.lat), Math.round(latlng.lng)]);

        if (newLatLng.lat === this._startMarker.getLatLng().lat) {
            newLatLng.lat += 1;
        }
        if (newLatLng.lng === this._startMarker.getLatLng().lng) {
            newLatLng.lng += 1;
        }

        this._hintMarker.setLatLng(newLatLng)
       // END NEW BLOCK
    },
    _placeStartingMarkers(e) {
        // assign the coordinate of the click to the hintMarker, that's necessary for
        // mobile where the marker can't follow a cursor
        if (!this._hintMarker._snapped) {
            this._hintMarker.setLatLng(e.latlng);
        }
 // NEW Line
        this._hintMarker.setLatLng([Math.round(this._hintMarker.getLatLng().lat), Math.round(this._hintMarker.getLatLng().lng)]);

        // get coordinate for new vertex by hintMarker (cursor marker)
        const latlng = this._hintMarker.getLatLng();

        // show and place start marker
        L.DomUtil.addClass(this._startMarker._icon, 'visible');
        this._startMarker.setLatLng(latlng);

        // if we have the other two visibilty markers, show and place them now
        if (this.options.cursorMarker && this._styleMarkers) {
            this._styleMarkers.forEach(styleMarker => {
                L.DomUtil.addClass(styleMarker._icon, 'visible');
                styleMarker.setLatLng(latlng);
            });
        }

        this._map.off('click', this._placeStartingMarkers, this);
        this._map.on('click', this._finishShape, this);

        // change tooltip text
        this._hintMarker.setTooltipContent(L.PM.Utils.getTranslation('tooltips.finishRect'));

        this._setRectangleOrigin();
    },
    _finishShape(e) {
        // assign the coordinate of the click to the hintMarker, that's necessary for
        // mobile where the marker can't follow a cursor
        if (!this._hintMarker._snapped) {
            this._hintMarker.setLatLng(e.latlng);
        }
 // NEW Line
        this._hintMarker.setLatLng([Math.round(this._hintMarker.getLatLng().lat), Math.round(this._hintMarker.getLatLng().lng)]);
        // get coordinate for new vertex by hintMarker (cursor marker)
        const B = this._hintMarker.getLatLng();

        // get already placed corner from the startmarker
        const A = this._startMarker.getLatLng();

        // create the final rectangle layer, based on opposite corners A & B
        const rectangleLayer = L.rectangle([A, B], this.options.pathOptions);
        this._setPane(rectangleLayer, 'layerPane');
        this._finishLayer(rectangleLayer);
        rectangleLayer.addTo(this._map.pm._getContainingLayer());

        // fire the pm:create event and pass shape and layer
        L.PM.Utils._fireEvent(this._map, 'pm:create', {
            shape: this._shape,
            layer: rectangleLayer,
        });

        // disable drawing
        this.disable();
        if (this.options.continueDrawing) {
            this.enable();
        }
    },
})

map.pm.Draw.Rectangle = new L.PM.Draw.Rectangle(map)

[maryna-livakivska]

Hi @Falke-Design. Many thanks for provided code snippet. I'll try it and write you back with a result.

[Falke-Design]

@maryna-livakivska any success?

[maryna-livakivska]

@Falke-Design, this feature is put currently on hold in our project. I will try it as soon as it will be decided to proceed. Sorry for not writing back.