vendor/assets/leaflet/leaflet.locationfilter.js

   1 /*
   2  * Leaflet.locationfilter - leaflet location filter plugin
   3  * Copyright (C) 2012, Tripbirds.com
   4  * http://tripbirds.com
   5  *
   6  * Licensed under the MIT License.
   7  *
   8  * Date: 2012-09-24
   9  * Version: 0.1
  10  */
  11 L.LatLngBounds.prototype.modify = function(map, amount) {
  12     var sw = this.getSouthWest(),
  13         ne = this.getNorthEast(),
  14         swPoint = map.latLngToLayerPoint(sw),
  15         nePoint = map.latLngToLayerPoint(ne);
  16
  17     sw = map.layerPointToLatLng(new L.Point(swPoint.x-amount, swPoint.y+amount));
  18     ne = map.layerPointToLatLng(new L.Point(nePoint.x+amount, nePoint.y-amount));
  19
  20     return new L.LatLngBounds(sw, ne);
  21 };
  22
  23 L.Control.Button = L.Class.extend({
  24     initialize: function(options) {
  25         L.Util.setOptions(this, options);
  26     },
  27
  28     addTo: function(container) {
  29         container.addButton(this);
  30         return this;
  31     },
  32
  33     onAdd: function (buttonContainer) {
  34         this._buttonContainer = buttonContainer;
  35         this._button = L.DomUtil.create('a', this.options.className, this._buttonContainer.getContainer());
  36         this._button.href = '#';
  37         this.setText(this.options.text);
  38
  39         var that = this;
  40         this._onClick = function(event) {
  41             that.options.onClick.call(that, event);
  42         };
  43
  44         L.DomEvent
  45             .on(this._button, 'click', L.DomEvent.stopPropagation)
  46             .on(this._button, 'mousedown', L.DomEvent.stopPropagation)
  47             .on(this._button, 'dblclick', L.DomEvent.stopPropagation)
  48             .on(this._button, 'click', L.DomEvent.preventDefault)
  49             .on(this._button, 'click', this._onClick, this);
  50     },
  51
  52     remove: function() {
  53         L.DomEvent.off(this._button, "click", this._onClick);
  54         this._buttonContainer.getContainer().removeChild(this._button);
  55     },
  56
  57     setText: function(text) {
  58         this._button.title = text;
  59         this._button.innerHTML = text;
  60     }
  61 });
  62
  63 L.Control.ButtonContainer = L.Control.extend({
  64     options: {
  65         position: 'topleft'
  66     },
  67
  68     getContainer: function() {
  69         if (!this._container) {
  70             this._container = L.DomUtil.create('div', this.options.className);
  71         }
  72         return this._container;
  73     },
  74
  75     onAdd: function (map) {
  76         this._map = map;
  77         return this.getContainer();
  78     },
  79
  80     addButton: function(button) {
  81         button.onAdd(this);
  82     },
  83
  84     addClass: function(className) {
  85         L.DomUtil.addClass(this.getContainer(), className);
  86     },
  87
  88     removeClass: function(className) {
  89         L.DomUtil.removeClass(this.getContainer(), className);
  90     }
  91 });
  92
  93 L.LocationFilter = L.Layer.extend({
  94     options: {
  95         enableButton: {
  96             enableText: "Select area",
  97             disableText: "Remove selection"
  98         },
  99         adjustButton: {
 100             text: "Select area within current zoom"
 101         },
 102         buttonPosition: 'topleft'
 103     },
 104
 105     initialize: function(options) {
 106         L.Util.setOptions(this, options);
 107     },
 108
 109     addTo: function(map) {
 110         map.addLayer(this);
 111         return this;
 112     },
 113
 114     onAdd: function(map) {
 115         this._map = map;
 116
 117         if (this.options.enableButton || this.options.adjustButton) {
 118             this._initializeButtonContainer();
 119         }
 120
 121         if (this.options.enable) {
 122             this.enable();
 123         }
 124     },
 125
 126     onRemove: function(map) {
 127         this.disable();
 128         if (this._buttonContainer) {
 129             this._buttonContainer.removeFrom(map);
 130         }
 131     },
 132
 133     /* Get the current filter bounds */
 134     getBounds: function() {
 135         return new L.LatLngBounds(this._sw, this._ne);
 136     },
 137
 138     setBounds: function(bounds) {
 139         this._nw = bounds.getNorthWest();
 140         this._ne = bounds.getNorthEast();
 141         this._sw = bounds.getSouthWest();
 142         this._se = bounds.getSouthEast();
 143         if (this.isEnabled()) {
 144             this._draw();
 145             this.fire("change", {bounds: bounds});
 146         }
 147     },
 148
 149     isEnabled: function() {
 150         return this._enabled;
 151     },
 152
 153     /* Draw a rectangle */
 154     _drawRectangle: function(bounds, options) {
 155         options = options || {};
 156         var defaultOptions = {
 157             stroke: false,
 158             fill: true,
 159             fillColor: "black",
 160             fillOpacity: 0.3,
 161             clickable: false
 162         };
 163         options = L.Util.extend(defaultOptions, options);
 164         var rect = new L.Rectangle(bounds, options);
 165         rect.addTo(this._layer);
 166         return rect;
 167     },
 168
 169     /* Draw a draggable marker */
 170     _drawImageMarker: function(point, options) {
 171         var marker = new L.Marker(point, {
 172             icon: new L.DivIcon({
 173                 iconAnchor: options.anchor,
 174                 iconSize: options.size,
 175                 className: options.className
 176             }),
 177             draggable: true
 178         });
 179         marker.addTo(this._layer);
 180         return marker;
 181     },
 182
 183     /* Draw a move marker. Sets up drag listener that updates the
 184        filter corners and redraws the filter when the move marker is
 185        moved */
 186     _drawMoveMarker: function(point) {
 187         var that = this;
 188         this._moveMarker = this._drawImageMarker(point, {
 189             "className": "location-filter move-marker",
 190             "anchor": [-10, -10],
 191             "size": [13,13]
 192         });
 193         this._moveMarker.on('drag', function(e) {
 194             var markerPos = that._moveMarker.getLatLng(),
 195                 latDelta = markerPos.lat-that._nw.lat,
 196                 lngDelta = markerPos.lng-that._nw.lng;
 197             that._nw = new L.LatLng(that._nw.lat+latDelta, that._nw.lng+lngDelta, true);
 198             that._ne = new L.LatLng(that._ne.lat+latDelta, that._ne.lng+lngDelta, true);
 199             that._sw = new L.LatLng(that._sw.lat+latDelta, that._sw.lng+lngDelta, true);
 200             that._se = new L.LatLng(that._se.lat+latDelta, that._se.lng+lngDelta, true);
 201             that._draw();
 202         });
 203         this._setupDragendListener(this._moveMarker);
 204         return this._moveMarker;
 205     },
 206
 207     /* Draw a resize marker */
 208     _drawResizeMarker: function(point, latFollower, lngFollower, otherPos) {
 209         return this._drawImageMarker(point, {
 210             "className": "location-filter resize-marker",
 211             "anchor": [7, 6],
 212             "size": [13, 12]
 213         });
 214     },
 215
 216     /* Track moving of the given resize marker and update the markers
 217        given in options.moveAlong to match the position of the moved
 218        marker. Update filter corners and redraw the filter */
 219     _setupResizeMarkerTracking: function(marker, options) {
 220         var that = this;
 221         marker.on('drag', function(e) {
 222             var curPosition = marker.getLatLng(),
 223                 latMarker = options.moveAlong.lat,
 224                 lngMarker = options.moveAlong.lng;
 225             // Move follower markers when this marker is moved
 226             latMarker.setLatLng(new L.LatLng(curPosition.lat, latMarker.getLatLng().lng, true));
 227             lngMarker.setLatLng(new L.LatLng(lngMarker.getLatLng().lat, curPosition.lng, true));
 228             // Sort marker positions in nw, ne, sw, se order
 229             var corners = [that._nwMarker.getLatLng(),
 230                            that._neMarker.getLatLng(),
 231                            that._swMarker.getLatLng(),
 232                            that._seMarker.getLatLng()];
 233             corners.sort(function(a, b) {
 234                 if (a.lat != b.lat)
 235                     return b.lat-a.lat;
 236                 else
 237                     return a.lng-b.lng;
 238             });
 239             // Update corner points and redraw everything except the resize markers
 240             that._nw = corners[0];
 241             that._ne = corners[1];
 242             that._sw = corners[2];
 243             that._se = corners[3];
 244             that._draw({repositionResizeMarkers: false});
 245         });
 246         this._setupDragendListener(marker);
 247     },
 248
 249     /* Emit a change event whenever dragend is triggered on the
 250        given marker */
 251     _setupDragendListener: function(marker) {
 252         var that = this;
 253         marker.on('dragend', function(e) {
 254             that.fire("change", {bounds: that.getBounds()});
 255         });
 256     },
 257
 258     /* Create bounds for the mask rectangles and the location
 259        filter rectangle */
 260     _calculateBounds: function() {
 261         var mapBounds = this._map.getBounds(),
 262             outerBounds = new L.LatLngBounds(
 263                 new L.LatLng(mapBounds.getSouthWest().lat-0.1,
 264                              mapBounds.getSouthWest().lng-0.1, true),
 265                 new L.LatLng(mapBounds.getNorthEast().lat+0.1,
 266                              mapBounds.getNorthEast().lng+0.1, true)
 267             );
 268
 269         // The south west and north east points of the mask */
 270         this._osw = outerBounds.getSouthWest();
 271         this._one = outerBounds.getNorthEast();
 272
 273         // Bounds for the mask rectangles
 274         this._northBounds = new L.LatLngBounds(new L.LatLng(this._ne.lat, this._osw.lng, true), this._one);
 275         this._westBounds = new L.LatLngBounds(new L.LatLng(this._sw.lat, this._osw.lng, true), this._nw);
 276         this._eastBounds = new L.LatLngBounds(this._se, new L.LatLng(this._ne.lat, this._one.lng, true));
 277         this._southBounds = new L.LatLngBounds(this._osw, new L.LatLng(this._sw.lat, this._one.lng, true));
 278     },
 279
 280     /* Initializes rectangles and markers */
 281     _initialDraw: function() {
 282         if (this._initialDrawCalled) {
 283             return;
 284         }
 285
 286         this._layer = new L.LayerGroup();
 287
 288         // Calculate filter bounds
 289         this._calculateBounds();
 290
 291         // Create rectangles
 292         this._northRect = this._drawRectangle(this._northBounds);
 293         this._westRect = this._drawRectangle(this._westBounds);
 294         this._eastRect = this._drawRectangle(this._eastBounds);
 295         this._southRect = this._drawRectangle(this._southBounds);
 296         this._innerRect = this._drawRectangle(this.getBounds(), {
 297             fillOpacity: 0,
 298             stroke: true,
 299             color: "white",
 300             weight: 1,
 301             opacity: 0.9
 302         });
 303
 304         // Create resize markers
 305         this._nwMarker = this._drawResizeMarker(this._nw);
 306         this._neMarker = this._drawResizeMarker(this._ne);
 307         this._swMarker = this._drawResizeMarker(this._sw);
 308         this._seMarker = this._drawResizeMarker(this._se);
 309
 310         // Setup tracking of resize markers. Each marker has pair of
 311         // follower markers that must be moved whenever the marker is
 312         // moved. For example, whenever the north west resize marker
 313         // moves, the south west marker must move along on the x-axis
 314         // and the north east marker must move on the y axis
 315         this._setupResizeMarkerTracking(this._nwMarker, {moveAlong: {lat: this._neMarker, lng: this._swMarker}});
 316         this._setupResizeMarkerTracking(this._neMarker, {moveAlong: {lat: this._nwMarker, lng: this._seMarker}});
 317         this._setupResizeMarkerTracking(this._swMarker, {moveAlong: {lat: this._seMarker, lng: this._nwMarker}});
 318         this._setupResizeMarkerTracking(this._seMarker, {moveAlong: {lat: this._swMarker, lng: this._neMarker}});
 319
 320         // Create move marker
 321         this._moveMarker = this._drawMoveMarker(this._nw);
 322
 323         this._initialDrawCalled = true;
 324     },
 325
 326     /* Reposition all rectangles and markers to the current filter bounds. */
 327     _draw: function(options) {
 328         options = L.Util.extend({repositionResizeMarkers: true}, options);
 329
 330         // Calculate filter bounds
 331         this._calculateBounds();
 332
 333         // Reposition rectangles
 334         this._northRect.setBounds(this._northBounds);
 335         this._westRect.setBounds(this._westBounds);
 336         this._eastRect.setBounds(this._eastBounds);
 337         this._southRect.setBounds(this._southBounds);
 338         this._innerRect.setBounds(this.getBounds());
 339
 340         // Reposition resize markers
 341         if (options.repositionResizeMarkers) {
 342             this._nwMarker.setLatLng(this._nw);
 343             this._neMarker.setLatLng(this._ne);
 344             this._swMarker.setLatLng(this._sw);
 345             this._seMarker.setLatLng(this._se);
 346         }
 347
 348         // Reposition the move marker
 349         this._moveMarker.setLatLng(this._nw);
 350     },
 351
 352     /* Adjust the location filter to the current map bounds */
 353     _adjustToMap: function() {
 354         this.setBounds(this._map.getBounds());
 355         this._map.zoomOut();
 356     },
 357
 358     /* Enable the location filter */
 359     enable: function() {
 360         if (this._enabled) {
 361             return;
 362         }
 363
 364         // Initialize corners
 365         var bounds;
 366         if (this._sw && this._ne) {
 367             bounds = new L.LatLngBounds(this._sw, this._ne);
 368         } else if (this.options.bounds) {
 369             bounds = this.options.bounds;
 370         } else {
 371             bounds = this._map.getBounds();
 372         }
 373         this._map.invalidateSize();
 374         this._nw = bounds.getNorthWest();
 375         this._ne = bounds.getNorthEast();
 376         this._sw = bounds.getSouthWest();
 377         this._se = bounds.getSouthEast();
 378
 379
 380         // Update buttons
 381         if (this._buttonContainer) {
 382             this._buttonContainer.addClass("enabled");
 383         }
 384
 385         if (this._enableButton) {
 386             this._enableButton.setText(this.options.enableButton.disableText);
 387         }
 388
 389         if (this.options.adjustButton) {
 390             this._createAdjustButton();
 391         }
 392
 393         // Draw filter
 394         this._initialDraw();
 395         this._draw();
 396
 397         // Set up map move event listener
 398         var that = this;
 399         this._moveHandler = function() {
 400             that._draw();
 401         };
 402         this._map.on("move", this._moveHandler);
 403
 404         // Add the filter layer to the map
 405         this._layer.addTo(this._map);
 406
 407         // Zoom out the map if necessary
 408         var mapBounds = this._map.getBounds();
 409         bounds = new L.LatLngBounds(this._sw, this._ne).modify(this._map, 10);
 410         if (!mapBounds.contains(bounds.getSouthWest()) || !mapBounds.contains(bounds.getNorthEast())) {
 411             this._map.fitBounds(bounds);
 412         }
 413
 414         this._enabled = true;
 415
 416         // Fire the enabled event
 417         this.fire("enabled");
 418     },
 419
 420     /* Disable the location filter */
 421     disable: function() {
 422         if (!this._enabled) {
 423             return;
 424         }
 425
 426         // Update buttons
 427         if (this._buttonContainer) {
 428             this._buttonContainer.removeClass("enabled");
 429         }
 430
 431         if (this._enableButton) {
 432             this._enableButton.setText(this.options.enableButton.enableText);
 433         }
 434
 435         if (this._adjustButton) {
 436             this._adjustButton.remove();
 437         }
 438
 439         // Remove event listener
 440         this._map.off("move", this._moveHandler);
 441
 442         // Remove rectangle layer from map
 443         this._map.removeLayer(this._layer);
 444
 445         this._enabled = false;
 446
 447         // Fire the disabled event
 448         this.fire("disabled");
 449     },
 450
 451     /* Create a button that allows the user to adjust the location
 452        filter to the current zoom */
 453     _createAdjustButton: function() {
 454         var that = this;
 455         this._adjustButton = new L.Control.Button({
 456             className: "adjust-button",
 457             text: this.options.adjustButton.text,
 458
 459             onClick: function(event) {
 460                 that._adjustToMap();
 461                 that.fire("adjustToZoomClick");
 462             }
 463         }).addTo(this._buttonContainer);
 464     },
 465
 466     /* Create the location filter button container and the button that
 467        toggles the location filter */
 468     _initializeButtonContainer: function() {
 469         var that = this;
 470         this._buttonContainer = new L.Control.ButtonContainer({
 471             className: "location-filter button-container",
 472             position: this.options.buttonPosition
 473         });
 474
 475         if (this.options.enableButton) {
 476             this._enableButton = new L.Control.Button({
 477                 className: "enable-button",
 478                 text: this.options.enableButton.enableText,
 479
 480                 onClick: function(event) {
 481                     if (!that._enabled) {
 482                         // Enable the location filter
 483                         that.enable();
 484                         that.fire("enableClick");
 485                     } else {
 486                         // Disable the location filter
 487                         that.disable();
 488                         that.fire("disableClick");
 489                     }
 490                 }
 491             }).addTo(this._buttonContainer);
 492         }
 493
 494         this._buttonContainer.addTo(this._map);
 495     }
 496 });