Add ce boilerplate

src/map-a.js

@@ -0,0 +1,75 @@
+export class MapA extends HTMLElement {
+    static get observedAttributes() {
+      return ['href','target','type','inplace'];
+    }
+    get href() {
+      return this.hasAttribute('href') ?  this.getAttribute('href') : "";
+    }
+    set href(url) {
+      this.href = url;
+    }
+    get target() {
+      return this.hasAttribute('target') ?  this.getAttribute('target') : "";
+    }
+    set target(val) {
+      this.setAttribute('target', val);
+    }
+    get type() {
+      return this.hasAttribute('type') ?  this.getAttribute('type') : "";
+    }
+    set type(val) {
+      this.setAttribute('type', val);
+    }
+    get inplace() {
+      return this.hasAttribute('inplace') ?  this.getAttribute('inplace') : "";
+    }
+    set inplace(val) {
+      const hasInplace = Boolean(val);
+      if (hasInplace) {
+        this.setAttribute('inpalce', '');
+      } else {
+        this.removeAttribute('inplace');
+      }
+    }
+
+
+    attributeChangedCallback(name, oldValue, newValue) {
+      switch (name) {
+        case 'href': {
+          if (oldValue !== newValue) {
+            // handle side effects
+          }
+          break;        }
+        case 'target': {
+          if (oldValue !== newValue) {
+            // handle side effects
+          }
+          break;
+        }
+        case 'type': {
+          if (oldValue !== newValue) {
+            // handle side effects
+          }
+          break;
+        }
+        case 'inplace': {
+          if (oldValue !== newValue) {
+            // handle side effects
+          }
+          break;
+        }
+      }
+    }
+    constructor() {
+      // Always call super first in constructor
+      super();    
+    }
+    connectedCallback() {
+
+    }
+    disconnectedCallback() {
+
+    }
+  }
+  window.customElements.define('map-a', MapA);
+

src/map-extent.js

@@ -0,0 +1,80 @@
+import { MapInput } from './map-input.js';
+import { MapLink } from './map-link.js';
+
+export class MapExtent extends HTMLElement {
+  static get observedAttributes() {
+    return ['units','checked','label','opacity'];
+  }
+  get units() {
+   return this.getAttribute('units');
+  }
+  set units(val) {
+    // built in support for OSMTILE, CBMTILE, WGS84 and APSTILE
+    if (['OSMTILE','CBMTILE','WGS84','APSTILE'].includes(val)) {
+      this.setAttribute('units',val);
+    }
+    // else need to check with the mapml-viewer element if the custom projection is defined
+  }
+  get checked() {
+    return this.hasAttribute('checked');
+  }
+
+  set checked(val) {
+    if (val) {
+      this.setAttribute('checked', '');
+    } else {
+      this.removeAttribute('checked');
+    }
+  }
+  get label() {
+    return this.hasAttribute('label')?this.getAttribute('label'):'';
+  }
+  set label(val) {
+    if (val) {
+      this.setAttribute('label',val);
+    }
+  }
+  get opacity(){
+    return this._opacity;
+  }
+
+  set opacity(val) {
+    if(+val > 1 || +val < 0) return;
+    this.setAttribute('opacity', val);
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    switch(name) {
+      case 'units':
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+      case 'label': 
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+      case 'checked': 
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+      case 'opacity':
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+    }
+  }
+  constructor() {
+    // Always call super first in constructor
+    super();    
+  }
+  connectedCallback() {
+
+  }
+  disconnectedCallback() {
+
+  }
+}
+window.customElements.define('map-extent', MapExtent);

src/map-feature.js

@@ -0,0 +1,37 @@
+export class MapFeature extends HTMLElement {
+    static get observedAttributes() {
+      return ['zoom'];
+    }
+    get zoom() {
+        return this.hasAttribute("zoom") ? this.getAttribute("zoom") : 0;
+    }
+    set zoom(val) {
+        var parsedVal = parseInt(val,10);
+        if (!isNaN(parsedVal) && (parsedVal >= 0 && parsedVal <= 25)) {
+        this.setAttribute('zoom', parsedVal);
+        }
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+      switch (name) {
+        case 'zoom': {
+          if (oldValue !== newValue) {
+            // handle side effects
+          }
+          break;
+        }
+      }
+    }
+    constructor() {
+      // Always call super first in constructor
+      super();    
+    }
+    connectedCallback() {
+
+    }
+    disconnectedCallback() {
+
+    }
+  }
+  window.customElements.define('map-feature', MapFeature);
+

src/map-geometry.js

@@ -0,0 +1,35 @@
+export class MapGeometry extends HTMLElement {
+  static get observedAttributes() {
+    return ['cs'];
+  }
+  get cs() {
+    return this.getAttribute('cs');
+  }
+  set cs(val) {
+    if (['tcrs','tilematrix','pcrs','gcrs','map','tile'].includes(val)) {
+      this.setAttribute('cs', val);
+    }
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    switch (name) {
+      case 'cs': {
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+      }
+    }
+  }
+  constructor() {
+    // Always call super first in constructor
+    super();    
+  }
+  connectedCallback() {
+
+  }
+  disconnectedCallback() {
+
+  }
+}
+window.customElements.define('map-geometry', MapGeometry);

src/map-input.js

@@ -0,0 +1,153 @@
+import { MapLink } from './map-link.js';
+
+export class MapInput extends HTMLElement {
+  static get observedAttributes() {
+    return ['name','type','value','axis','units','position','rel','min','max','step'];
+  }
+
+  get name() {
+    return this.getAttribute('name');
+  }
+  set name(val) {
+    if (val) {
+      this.setAttribute('name', val);
+    }
+  }
+  get type() {
+    return this.getAttribute('type');
+  }
+  set type(val) {
+    if (['location'].includes(val)) {
+      this.setAttribute('type', val);
+    }
+  }
+  get value() {
+    return this.getAttribute('value');
+  }
+  set value(val) {
+    if (val) {
+      this.setAttribute('value', val);
+    }
+  }
+  get axis() {
+    return this.getAttribute('axis');
+  }
+  set axis(val) {
+    if (val) {
+      this.setAttribute('axis', val);
+    }
+  }
+  get units() {
+    return this.getAttribute('units');
+  }
+  set units(val) {
+    if (val) {
+      this.setAttribute('units', val);
+    }
+  }
+  get position() {
+    return this.getAttribute('position');
+  }
+  set position(val) {
+    if (val) {
+      this.setAttribute('position', val);
+    }
+  }
+  get rel() {
+    return this.getAttribute('rel');
+  }
+  set rel(val) {
+    if (val) {
+      this.setAttribute('rel', val);
+    }
+  }
+  get min() {
+    return this.getAttribute('min');
+  }
+  set min(val) {
+    if (val) {
+      this.setAttribute('min', val);
+    }
+  }
+  get max() {
+    return this.getAttribute('max');
+  }
+  set max(val) {
+    if (val) {
+      this.setAttribute('max', val);
+    }
+  }
+  get step() {
+    return this.getAttribute('step');
+  }
+  set step(val) {
+    if (val) {
+      this.setAttribute('step', val);
+    }
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    switch (name) {
+      case 'name':
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+      case 'type':
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+      case 'value':
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+      case 'axis':
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+      case 'units':
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+      case 'position':
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+      case 'rel':
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+      case 'min':
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+      case 'max':
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+      case 'step':
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+    }
+  }
+  constructor() {
+    // Always call super first in constructor
+    super();    
+  }
+  connectedCallback() {
+
+  }
+  disconnectedCallback() {
+
+  }
+}
+window.customElements.define('map-input', MapInput);