Source: map/utils/LayerLegend.js

  1. import { Window } from "../../ui/Window.js";
  2. import { WMSLayer } from "../layer/WMSLayer/WMSLayer.js";
  4. export { LayerLegend }
  6. /**
  7.  * @memberof vef.map.layer.utils
  8.  */
  9. class LayerLegend extends Window {
  11.     constructor(target, layerManager) {
  12.         super(target, {
  13.             height: "unset",
  14.             width: "250px",
  15.             open: false,
  16.             draggable: true,
  17.             title: "LEGEND",
  18.             responsive: true
  19.         })
  21.         this.activeLayer_ = null;
  22.         this.activeLegend_ = null;
  23.         this.layerManager_ = layerManager;
  24.     }
  26.     setOptions_() {
  27.         // content height
  28.         this.content_.style.maxHeight = "500px";
  29.         this.content_.style.overflowY = "auto";
  31.         this.setOptions({
  32.             top: (window.innerHeight - this.getElement().clientHeight - 10) + "px",
  33.             left: "480px",
  34.             width: "280px"
  35.         });
  36.         this.getElement().style.visibility = "visible";
  37.     }
  39.     setLayer_(layer, hide) {
  40.         if (this.activeLegend_) this.activeLegend_.remove();
  42.         this.activeLayer_ = layer;
  43.         this.setTitle(layer.title);
  45.         const img = layer.getLegendGraphic();
  46.         img.style = "max-width: 100%;";
  48.         // set image but hide window until the image is loaded
  49.         this.setContent(img);
  50.         if (hide) this.getElement().style.visibility = "hidden";
  51.         super.open();
  53.         // update position on image loading
  54.         if (!img.complete) {
  55.             img.onload = () => this.setOptions_()
  56.         } else {
  57.             this.setOptions_();
  58.         }
  60.         this.activeLegend_ = img;
  61.     }
  63.     open(layer) {
  64.         if (layer instanceof WMSLayer) {
  66.             this.setLayer_(layer, true);
  68.             if (this.layerManager_) {
  70.                 const dragover = (e) => {
  71.                     e.dataTransfer.dropEffect = "move";
  72.                     e.preventDefault();
  73.                 };
  75.                 const drop = (e) => {
  76.                     const id = e.dataTransfer.getData("layer_id");
  77.                     if (id) {
  78.                         const l = this.layerManager_.getLayerById(id);
  79.                         if (l && (l instanceof WMSLayer)) {
  80.                             this.setLayer_(l, false);
  81.                         }
  82.                     }
  83.                 };
  85.                 this.content_.addEventListener('dragover', dragover);
  86.                 this.content_.addEventListener('drop', drop);
  87.             }
  88.         } else {
  89.             this.activeLayer_ = null;
  90.             this.activeLegend_ = null;
  91.             this.close();
  92.         }
  93.     }
  95.     getActiveLayer() {
  96.         return this.activeLayer_;
  97.     }
  99. }