app/assets/javascripts/index/history-changesets-layer.js

   1 OSM.HistoryChangesetsLayer = L.FeatureGroup.extend({
   2   _changesets: [],
   3
   4   updateChangesets: function (map, changesets) {
   5     this._changesets = changesets;
   6     this.updateChangesetShapes(map);
   7   },
   8
   9   updateChangesetShapes: function (map) {
  10     this.clearLayers();
  11
  12     for (const changeset of this._changesets) {
  13       const bottomLeft = map.project(L.latLng(changeset.bbox.minlat, changeset.bbox.minlon)),
  14             topRight = map.project(L.latLng(changeset.bbox.maxlat, changeset.bbox.maxlon)),
  15             width = topRight.x - bottomLeft.x,
  16             height = bottomLeft.y - topRight.y,
  17             minSize = 20; // Min width/height of changeset in pixels
  18
  19       if (width < minSize) {
  20         bottomLeft.x -= ((minSize - width) / 2);
  21         topRight.x += ((minSize - width) / 2);
  22       }
  23
  24       if (height < minSize) {
  25         bottomLeft.y += ((minSize - height) / 2);
  26         topRight.y -= ((minSize - height) / 2);
  27       }
  28
  29       changeset.bounds = L.latLngBounds(map.unproject(bottomLeft),
  30                                         map.unproject(topRight));
  31     }
  32
  33     this._changesets.sort(function (a, b) {
  34       return b.bounds.getSize() - a.bounds.getSize();
  35     });
  36
  37     this.updateChangesetLocations(map);
  38
  39     for (const changeset of this._changesets) {
  40       const rect = L.rectangle(changeset.bounds,
  41                                { weight: 2, color: "#FF9500", opacity: 1, fillColor: "#FFFFAF", fillOpacity: 0 });
  42       rect.id = changeset.id;
  43       rect.addTo(this);
  44     }
  45   },
  46
  47   updateChangesetLocations: function (map) {
  48     const mapCenterLng = map.getCenter().lng;
  49
  50     for (const changeset of this._changesets) {
  51       const changesetSouthWest = changeset.bounds.getSouthWest();
  52       const changesetNorthEast = changeset.bounds.getNorthEast();
  53       const changesetCenterLng = (changesetSouthWest.lng + changesetNorthEast.lng) / 2;
  54       const shiftInWorldCircumferences = Math.round((changesetCenterLng - mapCenterLng) / 360);
  55
  56       if (shiftInWorldCircumferences) {
  57         changesetSouthWest.lng -= shiftInWorldCircumferences * 360;
  58         changesetNorthEast.lng -= shiftInWorldCircumferences * 360;
  59
  60         this.getLayer(changeset.id)?.setBounds(changeset.bounds);
  61       }
  62     }
  63   },
  64
  65   highlightChangeset: function (id) {
  66     this.getLayer(id)?.setStyle({ fillOpacity: 0.3, color: "#FF6600", weight: 3 });
  67   },
  68
  69   unHighlightChangeset: function (id) {
  70     this.getLayer(id)?.setStyle({ fillOpacity: 0, color: "#FF9500", weight: 2 });
  71   },
  72
  73   getLayerId: function (layer) {
  74     return layer.id;
  75   }
  76 });