@prushforth/map 1.0.0-preview.1

package/dist/collection/components/utils/mapml/layers/ImageLayer.js

@@ -0,0 +1,136 @@
+import {
+  ImageOverlay,
+  DomUtil,
+  point,
+  setOptions,
+  Util,
+  Browser
+} from 'leaflet';
+
+export var ImageLayer = ImageOverlay.extend({
+  initialize: function (url, location, size, angle, container, options) {
+    // (String, Point, Point, Number, Element, Object)
+    this._container = container;
+    this._url = url;
+    // instead of calculating where the image goes, put it at 0,0
+    // this._location = point(location);
+    // the location for WMS requests will be the upper left-hand
+    // corner of the map.  When the map is initialized, that is 0,0,
+    // but as the user pans, of course the
+    this._location = location;
+    this._size = point(size);
+    this._angle = angle;
+
+    setOptions(this, options);
+  },
+  getEvents: function () {
+    var events = {
+      viewreset: this._reset
+    };
+
+    if (this._zoomAnimated && this._step <= 1) {
+      events.zoomanim = this._animateZoom;
+    }
+
+    return events;
+  },
+  onAdd: function (map) {
+    this.on({
+      load: this._onImageLoad
+    });
+
+    if (!this._image) {
+      this._initImage();
+    }
+
+    if (this.options.interactive) {
+      DomUtil.addClass(this._image, 'leaflet-interactive');
+      this.addInteractiveTarget(this._image);
+    }
+
+    this._container.appendChild(this._image);
+    this._reset();
+  },
+  onRemove: function () {
+    DomUtil.remove(this._image);
+    if (this.options.interactive) {
+      this.removeInteractiveTarget(this._image);
+    }
+  },
+  _onImageLoad: function () {
+    if (!this._image) {
+      return;
+    }
+    this._image.loaded = +new Date();
+    this._updateOpacity();
+  },
+  _animateZoom: function (e) {
+    var scale = this._map.getZoomScale(e.zoom),
+      translate = this._map
+        .getPixelOrigin()
+        .add(this._location)
+        .multiplyBy(scale)
+        .subtract(this._map._getNewPixelOrigin(e.center, e.zoom))
+        .round();
+
+    if (Browser.any3d) {
+      DomUtil.setTransform(this._image, translate, scale);
+    } else {
+      DomUtil.setPosition(this._image, translate);
+    }
+  },
+  _reset: function (e) {
+    var image = this._image,
+      location = this._location,
+      size = this._size,
+      angle = 0.0;
+    // TBD use the angle to establish the image rotation in CSS
+
+    if (
+      e &&
+      this._step > 1 &&
+      (this._overlayToRemove === undefined ||
+        this._url === this._overlayToRemove)
+    ) {
+      return;
+    }
+    DomUtil.setPosition(image, location);
+
+    image.style.width = size.x + 'px';
+    image.style.height = size.y + 'px';
+  },
+  _updateOpacity: function () {
+    if (!this._map) {
+      return;
+    }
+
+    //L.DomUtil.setOpacity(this._image, this.options.opacity);
+
+    var now = +new Date(),
+      nextFrame = false;
+
+    var image = this._image;
+
+    var fade = Math.min(1, (now - image.loaded) / 200);
+
+    DomUtil.setOpacity(image, fade);
+    if (fade < 1) {
+      nextFrame = true;
+    }
+    if (nextFrame) {
+      Util.cancelAnimFrame(this._fadeFrame);
+      this._fadeFrame = Util.requestAnimFrame(this._updateOpacity, this);
+    }
+    DomUtil.addClass(image, 'leaflet-image-loaded');
+  }
+});
+export var imageLayer = function (
+  url,
+  location,
+  size,
+  angle,
+  container,
+  options
+) {
+  return new ImageLayer(url, location, size, angle, container, options);
+};

package/dist/collection/components/utils/mapml/layers/MapExtentLayer.js

@@ -0,0 +1,114 @@
+import { LayerGroup, DomUtil } from 'leaflet';
+import { renderStyles } from '../elementSupport/layers/renderStyles.js';
+/**
+ * Leaflet layer implementing map-extent elements
+ * Extends LayerGroup to create a single layer containing "templated" layers
+ * from child map-link[@tref] elements
+ *
+ * Similar in intent to MapFeatureLayer and MapTileLayer, which are LayerGroup or
+ * GridLayer for map-feature and map-tile elements' leaflet layer object, respectively.
+ *
+ * This layer will be inserted into the LayerGroup hosted by the <map-layer>
+ * immediately after creation, so that its index within the _layers array of
+ * that LayerGroup will be equal to its z-index within the LayerGroup's container
+ *
+ * <map-tile row="10" col="12" src="url1"></map-tile>  LayerGroup._layers[0] <- each *set* of adjacent tiles
+ * <map-tile row="11" col="12" src="url2"></map-tile>  LayerGroup._layers[0] <- is a *single* MapTileLayer
+ * <map-extent units="OSMTILE" checked hidden> LayerGroup._layers[1] *each* <map-extent> is a LayerGroup of Templated*Layer.js
+ * <map-feature id="a"> LayerGroup._layers[2] <- each *set* of adjacent features
+ * <map-feature id="b"> LayerGroup._layers[2] <- is a single MapFeatureLayer FeatureGroup
+ * <map-tile row="10" col="12" src="url3"></map-tile>  LayerGroup._layers[3]
+ * <map-tile row="11" col="12" src="url4"></map-tile>  LayerGroup._layers[3]
+ * <map-feature id="c"> LayerGroup._layers[4]
+ * <map-feature id="d"> LayerGroup._layers[4]
+ * and so on
+ *
+ * A constraint of <map-extent> is that it cannot be nested inside a templated
+ * layer i.e. if a <map-link> retrieves a text/mapml document that contains a
+ * <map-extent>, it will be ignored, otherwise there could be infinite nested
+ * fetches triggered. That is why the "TemplatedFeaturesOrTilesLayer" exists - it
+ * excludes <map-extent> elements.
+ */
+export var MapExtentLayer = LayerGroup.extend({
+  initialize: function (options) {
+    // Call LayerGroup's initialize to trigger Leaflet's setup
+    LayerGroup.prototype.initialize.call(this, null, options);
+    this._container = DomUtil.create('div', 'leaflet-layer');
+    this._extentEl = this.options.extentEl;
+    this.changeOpacity(this.options.opacity);
+    this.setZIndex(options.zIndex);
+    // Add class to the container
+    DomUtil.addClass(this._container, 'mapml-extentlayer-container');
+  },
+  getEvents: function () {
+    return {
+      zoomstart: this._onZoomStart
+    };
+  },
+  _onZoomStart: function () {
+    this.closePopup();
+  },
+  getContainer: function () {
+    return this._container;
+  },
+  onAdd: function (map) {
+    LayerGroup.prototype.onAdd.call(this, map);
+    let pane = this.options.extentEl.parentLayer._layer._container;
+    pane.appendChild(this._container);
+  },
+  redraw: function () {
+    this.eachLayer(function (layer) {
+      layer.redraw();
+    });
+  },
+  setZIndex: function (zIndex) {
+    this.options.zIndex = zIndex;
+    this._updateZIndex();
+
+    return this;
+  },
+  _updateZIndex: function () {
+    if (
+      this._container &&
+      this.options.zIndex !== undefined &&
+      this.options.zIndex !== null
+    ) {
+      this._container.style.zIndex = this.options.zIndex;
+    }
+  },
+  onRemove: function () {
+    LayerGroup.prototype.onRemove.call(this, this._map);
+    DomUtil.remove(this._container);
+  },
+
+  _previousFeature: function (e) {
+    if (this._count + -1 >= 0) {
+      this._count--;
+      this._map.fire('featurepagination', {
+        i: this._count,
+        popup: this
+      });
+    }
+  },
+
+  _nextFeature: function (e) {
+    if (this._count + 1 < this._source._totalFeatureCount) {
+      this._count++;
+      this._map.fire('featurepagination', {
+        i: this._count,
+        popup: this
+      });
+    }
+  },
+
+  changeOpacity: function (opacity) {
+    this._container.style.opacity = opacity;
+    this._extentEl._opacity = opacity;
+    if (this._extentEl._opacitySlider)
+      this._extentEl._opacitySlider.value = opacity;
+  },
+  renderStyles
+});
+export var mapExtentLayer = function (options) {
+  return new MapExtentLayer(options);
+};