[wip] create LeafletMap using leaflet instead of google maps

source/UI/js/Map/LeafletMapRectangle.js

@@ -0,0 +1,133 @@
+'use strict';
+
+/*@
+Ox.MapRectangle <f> MapRectangle Object
+    (options) -> <o> MapRectangle Object
+    options <o> Options object
+        map <o|null> map
+        place <o|null> place
+@*/
+
+Ox.LeafletMapRectangle = function(options) {
+
+    options = Ox.extend({
+        map: null,
+        place: null
+    }, options);
+
+    var that = this,
+        themeData = Ox.Theme.getThemeData();
+
+    Ox.forEach(options, function(val, key) {
+        that[key] = val;
+    });
+
+    /*@
+    rectangle <f> google.maps.Rectangle
+    @*/
+    console.log('place bounds', that.place.bounds);
+    that.rectangle = new L.rectangle(that.place.bounds);
+
+    /*@
+    markers <a> array of markers
+    @*/
+    that.markers = Ox.map(that.place.points, function(point, position) {
+        return new Ox.LeafletMapRectangleMarker({
+            map: that.map,
+            place: that.place,
+            position: position
+        });
+    });
+
+    setOptions();
+
+    function click() {
+        if (
+            that.map.options('editable')
+            && that.place.editable
+            && !that.place.editing
+        ) {
+            that.place.edit();
+        } else if (that.map.getKey() == 'meta') {
+            that.place.submit();
+        } else if (that.map.getKey() == 'shift') {
+            that.map.zoomToPlace();
+        } else {
+            that.map.panToPlace();
+        }
+    }
+
+    function setOptions() {
+        var color = '#' + Ox.toHex(themeData[
+            that.place.editing
+            ? 'mapPlaceEditingBorder'
+            : 'mapPlaceSelectedBorder'
+        ]);
+        // that.rectangle.setOptions({
+        //     bounds: that.place.bounds,
+        //     fillColor: color,
+        //     fillOpacity: that.place.editing ? 0.1 : 0,
+        //     strokeColor: color,
+        //     strokeOpacity: that.place.id[0] == '_' ? 0.5 : 1,
+        //     strokeWeight: 2
+        // });
+    }
+
+    /*@
+    add <f> add
+    @*/
+    that.add = function() {
+        that.rectangle.addTo(that.map.map);
+        that.rectangle.on('click', click);
+        // google.maps.event.addListener(that.rectangle, 'click', click);
+        return that;
+    };
+
+    /*@
+    deselect <f> deselect
+    @*/
+    that.deselect = function() {
+        setOptions();
+        Ox.Log('Map', 'MARKERS', that.markers)
+        Ox.forEach(that.markers, function(marker) {
+            marker.remove();
+        });
+        return that;
+    };
+
+    /*@
+    remove <f> remove
+    @*/
+    that.remove = function() {
+        that.rectangle.remove();
+        // that.rectangle.setMap(null);
+        // google.maps.event.clearListeners(that.rectangle);
+        return that;
+    }
+
+    /*@
+    select <f> select
+    @*/
+    that.select = function() {
+        setOptions();
+        Ox.forEach(that.markers, function(marker) {
+            marker.add();
+        });
+        return that;
+    };
+
+    /*@
+    update <f> udpate
+    @*/
+    that.update = function() {
+        Ox.Log('Map', 'UPDATE...')
+        setOptions();
+        Ox.forEach(that.markers, function(marker) {
+            marker.update();
+        });
+        return that;
+    }
+
+    return that;
+
+};