Header Image
WebMap : Public Class
Created: 2023-01-20 1:07:51 PM
Modified: 2023-01-20 4:51:56 PM
The WebMap class is an ES 6 class that implements the customized built-in #lt;map#gt; element.  The WebMap implementation is similar to the implementation of MapViewer class, with differences arising for a couple of reasons.<br/><br/>First, the class implements a customized built-in element (#lt;map#gt;), which does not permit the creation of a shadow root in which to store DOM content. Consequently, the class creates a child #lt;div#gt; element in the #lt;map#gt;, to which it attaches a shadow root.  The map content is added as descendants of the shadow root.<br/>
  • Files
  • Advanced
  • Other Links
File Type
src/layer.js Local File
See description of src/map-area.js for information

File Size:
Time Stamp:
src/map-area.js Local File
The WebMap module defines the WebMap symbol as an ES 6 class, and imports the MapLayer and MapArea symbols.  It then registers the WebMap and MapArea  as custom built-in elements, and the MapLayer as an autonomous custom element, using the browser customElements.define interface method:

window.customElements.define('web-map', WebMap,  { extends: 'map' });
window.customElements.define('layer-', MapLayer);
window.customElements.define('map-area', MapArea, {extends: 'area'});

I believe that as a result of the registration of the <layer-> element by this module AND by the MapViewer module, it is not possible to use both the <map is="web-map"> and <mapml-viewer> elements on a single page.

It MIGHT be possible to de-duplicate, but it might not be worth the effort to do so.  It also might not be possible to de-duplicate, due to some reason I can't think of right here without trying it.  The different locations of the shadow root in <map> and <mapml-viewer> comes to mind as the central concern.

File Size:
Time Stamp:
src/web-map.js Local File
File locations are relative to the Web-Map-Custom-Element project directory

File Size:
Time Stamp:
Property Value
isFinalSpecialization: 0
Object Type Connection Direction Notes
Ā«RealizationĀ» Class Generalization From  
Map Viewer Component Generalization To