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

   1 OSM.HistoryChangesetsLayer = L.FeatureGroup.extend({
   2   _changesets: new Map,
   3
   4   updateChangesets: function (map, changesets) {
   5     this._changesets = new Map(changesets.map(changeset => [changeset.id, changeset]));
   6     this.updateChangesetShapes(map);
   7   },
   8
   9   updateChangesetShapes: function (map) {
  10     this.clearLayers();
  11
  12     for (const changeset of this._changesets.values()) {
  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     const changesetEntries = [...this._changesets];
  34     changesetEntries.sort(([, a], [, b]) => {
  35       return b.bounds.getSize() - a.bounds.getSize();
  36     });
  37     this._changesets = new Map(changesetEntries);
  38
  39     this.updateChangesetLocations(map);
  40
  41     for (const changeset of this._changesets.values()) {
  42       const rect = L.rectangle(changeset.bounds,
  43                                { weight: 2, color: "#FF9500", opacity: 1, fillColor: "#FFFFAF", fillOpacity: 0 });
  44       rect.id = changeset.id;
  45       rect.addTo(this);
  46     }
  47   },
  48
  49   updateChangesetLocations: function (map) {
  50     const mapCenterLng = map.getCenter().lng;
  51
  52     for (const changeset of this._changesets.values()) {
  53       const changesetSouthWest = changeset.bounds.getSouthWest();
  54       const changesetNorthEast = changeset.bounds.getNorthEast();
  55       const changesetCenterLng = (changesetSouthWest.lng + changesetNorthEast.lng) / 2;
  56       const shiftInWorldCircumferences = Math.round((changesetCenterLng - mapCenterLng) / 360);
  57
  58       if (shiftInWorldCircumferences) {
  59         changesetSouthWest.lng -= shiftInWorldCircumferences * 360;
  60         changesetNorthEast.lng -= shiftInWorldCircumferences * 360;
  61
  62         this.getLayer(changeset.id)?.setBounds(changeset.bounds);
  63       }
  64     }
  65   },
  66
  67   highlightChangeset: function (id) {
  68     this.getLayer(id)?.setStyle({ fillOpacity: 0.3, color: "#FF6600", weight: 3 });
  69   },
  70
  71   unHighlightChangeset: function (id) {
  72     this.getLayer(id)?.setStyle({ fillOpacity: 0, color: "#FF9500", weight: 2 });
  73   },
  74
  75   getLayerId: function (layer) {
  76     return layer.id;
  77   }
  78 });