fdds/js/components/timeSeriesMarker.js

   1 import { rgbToHex } from '../util.js';
   2 import { map } from '../map.js';
   3 import { controllers } from './Controller.js';
   4
   5 export class TimeSeriesMarker extends HTMLElement {
   6     constructor(latLon) {
   7         super();
   8         const roundLatLon = (num) => Math.round(num*100)/100;
   9         this.innerHTML = `
  10             <div id='timeSeriesMarker'>
  11                 <span id='hideMenu' class='interactive-button'>hide</span>
  12                 <div>
  13                     <label style='display: inline-block; width: 100px' for='timeseries-custom-name'>Add name: </label>
  14                     <input id='timeseries-custom-name'></input>
  15                 </div>
  16
  17                 <div>
  18                     <span style='margin: 1px; margin-right: 10px'>lat: ${roundLatLon(latLon.lat)} lon: ${roundLatLon(latLon.lng)}</span>
  19                     <span id='rgb-value' style='margin:0'>No layer with colorbar to show values</span>
  20                 </div>
  21                 <p id='colorbar-location' style='margin: 0'></p>
  22             </div>
  23         `;
  24         this.chartColor = null;
  25         this.colorInputted = false;
  26         this.clrbarLocation = null;
  27         this.hideOnChart = false;
  28         this.infoOpen = false;
  29     }
  30
  31     getChartColor() {
  32         return this.chartColor;
  33     }
  34
  35     setChartColor(chartColor) {
  36         this.chartColor = chartColor;
  37         this.colorInputted = true;
  38     }
  39
  40     setName(name) {
  41         this.querySelector('#timeseries-custom-name').value = name;
  42     }
  43
  44     getName() {
  45         return this.querySelector('#timeseries-custom-name').value;
  46     }
  47
  48     bindHide(fun) {
  49         const hideButton = this.querySelector('#hideMenu');
  50         hideButton.onclick = fun;
  51     }
  52
  53     setRGBValues(rgb, clrbarLocation) {
  54         let [r, g, b] = rgb;
  55         if ((r + g + b) > 745) {
  56             [r, g, b] = [0, 0, 0];
  57         }
  58         if (!this.colorInputted) {
  59             let hexValue = rgbToHex(r, g, b);
  60             this.chartColor = hexValue;
  61         }
  62         this.clrbarLocation = clrbarLocation;
  63         const clrbarP = this.querySelector('#colorbar-location');
  64         const rgbP = this.querySelector('#rgb-value');
  65         clrbarP.style.display = 'none';
  66         rgbP.innerHTML = 'No layer with colorbar to show values of';
  67         rgbP.style.color = 'black';
  68         if (clrbarLocation != null) {
  69             clrbarP.style.display = 'block';
  70             clrbarP.innerHTML = 'colorbar location: ' + clrbarLocation;
  71             rgbP.style.color = `rgb(${r},${g},${b})`;
  72             rgbP.innerHTML = `pixel value: R${r} G${g} B${b}`;
  73         }
  74     }
  75 }
  76
  77 export class Marker {
  78     constructor(latLon, coords) {
  79         this._latlng = latLon;
  80         this.imageCoords = coords;
  81
  82         this.popup = L.popup({closeOnClick: false, autoClose: false, autoPan: false}).setLatLng(latLon).addTo(map);
  83         this.timeSeriesMarker = new TimeSeriesMarker(latLon, coords);
  84         this.timeSeriesMarker.bindHide(() => this.hideMarkerInfo());
  85         this.popup.setContent(this.timeSeriesMarker);
  86         this.popup.getElement().style.display = 'none';
  87
  88         let svgString = `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'>
  89                                 <path d="M0 0h24v24H0V0z" fill="none"></path>
  90                                 <path d="M7 10l5 5 5-5H7z"></path>
  91                               </svg>`;
  92         let myIconUrl = encodeURI("data:image/svg+xml," + svgString).replace('#','%23');
  93         let markerIcon = L.icon({iconUrl: myIconUrl, iconAnchor: [13, 16]});
  94
  95         this.marker = L.marker(latLon, {icon: markerIcon, autoPan: false}).addTo(map);
  96         this.popup.on('remove', () => {
  97             controllers.timeSeriesMarkers.remove(this);
  98             this.marker.removeFrom(map);
  99         });
 100         this.marker.on('mousedown', () => {
 101             if (this.timeSeriesMarker.infoOpen) {
 102                 this.hideMarkerInfo();
 103             } else {
 104                 this.showMarkerInfo();
 105             }
 106         });
 107     }
 108
 109     hideMarkerInfo() {
 110         let popupElem = this.popup.getElement();
 111         popupElem.style.display = 'none';
 112         this.timeSeriesMarker.infoOpen = false;
 113     }
 114
 115     showMarkerInfo() {
 116         let popupElem = this.popup.getElement();
 117         popupElem.style.display = 'block';
 118         this.timeSeriesMarker.infoOpen = true;
 119     }
 120
 121     getContent() {
 122         return this.timeSeriesMarker;
 123     }
 124 }
 125
 126 window.customElements.define('time-series-marker', TimeSeriesMarker);