oxjs/source/UI/js/Map/MapRectangleMarker.js

'use strict';

/*@
Ox.MapRectangleMarker <f> MapRectangleMarker Object
    (options) -> <o> MapRectangleMarker Object
    options <o> Options object
        map <o|null> map
        place <o|null> place
        position <s|''>
@*/

Ox.MapRectangleMarker = function(options) {

    options = Ox.extend({
        map: null,
        place: null,
        position: ''
    }, options);

    var that = this;

    Ox.forEach(options, function(val, key) {
        that[key] = val;
    });

    /*
    that.markerImage = new google.maps.MarkerImage
    that.marker = new google.maps.Marker({
        cursor: that.position + '-resize',
        draggable: true,
        icon: Ox.MapMarkerImage({
            mode: 'editing',
            rectangle: true,
            type: that.place.id[0] == '_' ? 'result' : 'place'
        }),
        position: that.place.points[that.position],
        raiseOnDrag: false
    });
    */
    // Create a simple DOM element for the corner handle
    var element = document.createElement('div');
    element.style.width = '8px';
    element.style.height = '8px';
    element.style.backgroundColor = 'white';
    element.style.border = '2px solid black';
    element.style.borderRadius = '2px';
    element.style.cursor = that.position + '-resize';
    element.style.boxSizing = 'border-box';
    
    that.marker = new maplibregl.Marker({
        draggable: true,
        element: element,
    });
    that.marker.setLngLat(that.place.points[that.position])

    function dragstart(e) {
        Ox.$body.addClass('OxDragging');
        // In MapLibre GL, get position from marker directly
        var lngLat = that.marker.getLngLat();
        that.drag = {
            lat: lngLat.lat,
            lng: lngLat.lng
        };
    }

    function drag(e) {
        // fixme: implement shift+drag (center stays the same)
        // In MapLibre GL, get current position from marker directly
        var lngLat = that.marker.getLngLat();
        var lat = Ox.limit(lngLat.lat, Ox.MIN_LATITUDE, Ox.MAX_LATITUDE),
            lng = lngLat.lng;
        that.drag = {
            lat: lat,
            lng: lng
        };
        if (that.position.indexOf('s') > -1) {
            that.place.south = lat;
        }
        if (that.position.indexOf('n') > -1) {
            that.place.north = lat;
        }
        if (that.position.indexOf('w') > -1) {
            that.place.west = lng;
        }
        if (that.position.indexOf('e') > -1) {
            that.place.east = lng;
        }
        //Ox.Log('Map', 'west', that.place.west, 'east', that.place.east);
        //Ox.Log('Map', 'south', that.place.south, 'north', that.place.north);
        that.place.update();
        that.place.marker.update();
        that.place.rectangle.update();
    }

    function dragend(e) {
        var south;
        Ox.$body.removeClass('OxDragging');
        if (that.place.south > that.place.north) {
            south = that.place.south;
            that.place.south = that.place.north;
            that.place.north = south;
            that.place.update();
            that.place.marker.update();
            that.place.rectangle.update();
        }
        that.map.triggerEvent('changeplaceend', that.place);
    }

    /*@
    add <f> add
    @*/
    that.add = function() {
        that.marker.addTo(that.map.map);
        that.marker.on('dragstart', dragstart);
        that.marker.on('drag', drag);
        that.marker.on('dragend', dragend);
        return that;
    };

    /*@
    remove <f> remove
    @*/
    that.remove = function() {
        // Clean up MapLibre events
        that.marker.off('dragstart');
        that.marker.off('drag');
        that.marker.off('dragend');
        // Remove marker from map
        that.marker.remove();
        return that;
    };

    /*@
    update <f> update
    @*/
    that.update = function() {
        // Just update position - visual stays the same during editing
        that.marker.setLngLat(that.place.points[that.position]);
        return that;
    };

    return that;

};