diff --git a/src/map-a.js b/src/map-a.js
new file mode 100644
index 000000000..38a1260f8
--- /dev/null
+++ b/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);
+  
\ No newline at end of file
diff --git a/src/map-extent.js b/src/map-extent.js
new file mode 100644
index 000000000..7e1544e9d
--- /dev/null
+++ b/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);
diff --git a/src/map-feature.js b/src/map-feature.js
new file mode 100644
index 000000000..528f706a6
--- /dev/null
+++ b/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);
+  
\ No newline at end of file
diff --git a/src/map-geometry.js b/src/map-geometry.js
new file mode 100644
index 000000000..270e75d09
--- /dev/null
+++ b/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);
diff --git a/src/map-input.js b/src/map-input.js
new file mode 100644
index 000000000..11b3f136b
--- /dev/null
+++ b/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);
diff --git a/src/map-link.js b/src/map-link.js
new file mode 100644
index 000000000..d7883e85b
--- /dev/null
+++ b/src/map-link.js
@@ -0,0 +1,133 @@
+export class MapLink extends HTMLElement {
+  static get observedAttributes() {
+    return ['type','rel','title','href','hreflang','tref','tms','projection'];
+  }
+  get type() {
+    return this.getAttribute('type');
+  }
+  set type(val) {
+    // improve this
+    if (val === "text/mapml" || val.startsWith('image/')) {
+      this.setAttribute('type', val);
+    }
+  }
+  get rel() {
+    return this.getAttribute('rel');
+  }
+  set rel(val) {
+    // improve this
+    if (['license','alternate','self','style','tile','image','features','zoomin','zoomout','legend','query','stylesheet'].includes(val)) {
+      this.setAttribute('type', val);
+    }
+  }
+  get title() {
+    return this.getAttribute('title');
+  }
+  set title(val) {
+    if (val) {
+      this.setAttribute('title', val);
+    }
+  }
+  get href() {
+    return this.getAttribute('href');
+  }
+  set href(val) {
+    // improve this
+    if (val) {
+      this.setAttribute('href', val);
+    }
+  }
+  get hreflang() {
+    return this.getAttribute('hreflang');
+  }
+  set hreflang(val) {
+    // improve this
+    if (val) {
+      this.setAttribute('hreflang', val);
+    }
+  }
+  get tref() {
+    return this.getAttribute('tref');
+  }
+  set tref(val) {
+    // improve this
+    if (val) {
+      this.setAttribute('tref', val);
+    }
+  }
+  get tms() {
+    return this.hasAttribute('tms');
+  }
+  set tms(val) {
+    // improve this
+    if (val) {
+      this.setAttribute('tms', '');
+    }
+  }
+  get projection() {
+    return this.getAttribute('projection');
+  }
+  set projection(val) {
+    // improve this
+    if (['OSMTILE','CBMTILE','WGS84','APSTILE'].includes(val)) {
+      this.setAttribute('projection', val);
+    }
+  }
+  
+  attributeChangedCallback(name, oldValue, newValue) {
+    //['type','rel','title','href','hreflang','tref','tms','projection'];
+    switch (name) {
+      case 'type':
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+      case 'rel':
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+      case 'title':
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+      case 'href':
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+      case 'hreflang':
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+      case 'tref':
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+      case 'tms':
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+      case 'projection':
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+    }
+  }
+  constructor() {
+    // Always call super first in constructor
+    super();    
+  }
+  connectedCallback() {
+    
+  }
+  disconnectedCallback() {
+    
+  }
+}
+window.customElements.define('map-link', MapLink);
diff --git a/src/map-meta.js b/src/map-meta.js
new file mode 100644
index 000000000..108474c6b
--- /dev/null
+++ b/src/map-meta.js
@@ -0,0 +1,51 @@
+export class MapMeta extends HTMLElement {
+  static get observedAttributes() {
+    return ['name','content'];
+  }
+  get name() {
+    return this.getAttribute('name');
+  }
+  set name(val) {
+    if (['projection','extent','cs','zoom'].includes(val)) {
+      this.setAttribute('name', val);
+    }
+  }
+  get content() {
+    return this.getAttribute('content');
+  }
+  set content(val) {
+    // improve this
+    if (this.name === 'cs' && !['tcrs','tilematrix','pcrs','gcrs','map','tile'].includes(val)) {
+      return;
+    }
+    this.setAttribute('content', val);
+  }
+  
+  attributeChangedCallback(name, oldValue, newValue) {
+    switch (name) {
+      case 'name': {
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+      }
+      case 'content': {
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+      }
+    }
+  }
+  constructor() {
+    // Always call super first in constructor
+    super();    
+  }
+  connectedCallback() {
+    
+  }
+  disconnectedCallback() {
+    
+  }
+}
+window.customElements.define('map-meta', MapMeta);
diff --git a/src/map-properties.js b/src/map-properties.js
new file mode 100644
index 000000000..e39c32791
--- /dev/null
+++ b/src/map-properties.js
@@ -0,0 +1,20 @@
+export class MapProperties extends HTMLElement {
+    static get observedAttributes() {
+      return;
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+    }
+    constructor() {
+      // Always call super first in constructor
+      super();    
+    }
+    connectedCallback() {
+  
+    }
+    disconnectedCallback() {
+  
+    }
+  }
+  window.customElements.define('map-properties', MapProperties);
+  
\ No newline at end of file
diff --git a/src/map-select.js b/src/map-select.js
new file mode 100644
index 000000000..1e26e3d9c
--- /dev/null
+++ b/src/map-select.js
@@ -0,0 +1,43 @@
+export class MapSelect extends HTMLElement {
+  static get observedAttributes() {
+    return ['name','id'];
+  }
+  get name() {
+    return this.getAttribute('name');
+  }
+  set name(val) {
+    this.setAttribute('name', val);
+  }
+  get id() {
+    return this.getAttribute('id');
+  }
+  set id(val) {
+    this.setAttribute('id', val);
+  }
+  
+  attributeChangedCallback(name, oldValue, newValue) {
+    switch (name) {
+      case 'name':
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+      case 'id':
+        if (oldValue !== newValue) {
+          // handle side effects
+        }
+        break;
+    }
+  }
+  constructor() {
+    // Always call super first in constructor
+    super();    
+  }
+  connectedCallback() {
+    
+  }
+  disconnectedCallback() {
+    
+  }
+}
+window.customElements.define('map-select', MapSelect);
diff --git a/src/map-span.js b/src/map-span.js
new file mode 100644
index 000000000..73fc903bd
--- /dev/null
+++ b/src/map-span.js
@@ -0,0 +1,20 @@
+export class MapSpan extends HTMLElement {
+    static get observedAttributes() {
+      return;
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+    }
+    constructor() {
+      // Always call super first in constructor
+      super();    
+    }
+    connectedCallback() {
+  
+    }
+    disconnectedCallback() {
+  
+    }
+  }
+  window.customElements.define('map-span', MapSpan);
+  
\ No newline at end of file
diff --git a/src/map-style.js b/src/map-style.js
new file mode 100644
index 000000000..fc4b9680b
--- /dev/null
+++ b/src/map-style.js
@@ -0,0 +1,20 @@
+export class MapStyle extends HTMLElement {
+    static get observedAttributes() {
+      return;
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+    }
+    constructor() {
+      // Always call super first in constructor
+      super();    
+    }
+    connectedCallback() {
+  
+    }
+    disconnectedCallback() {
+  
+    }
+  }
+  window.customElements.define('map-style', MapStyle);
+  
\ No newline at end of file