MapViewer

./leaflet.js is a minified script file created by the Grunt build process; it is a composition of the node_modules dependencies leaflet/dist/leaflet-src.js, proj4leaflet/src/proj4leaflet.js and proj4/dist/proj4-src.js.  Each of these input files is modified by the build process to be importable and usable.

The MapViewer module imports all exposed symbols of the composed ./leaflet.js file, and the composed ./mapml.js file.

The MapViewer module depends on, but doesn't strictly "import" the CSS files from Leaflet and MapML.  See file mapml.css for details.

The ./mapml.css file contains the Leaflet CSS rules and the MapML rules combined into a single minified file.  The composition of these two files is not done at build time but is maintained on a permanent basis, a possibly bad choice, since we will have to reconcile upstream changes as they happen, if indeed possible.

While .js files are imported into the parent mapml-viewer.js module file, the CSS files must be loaded into the custom element shadow root.  This is accomplished by the actual constructor code of the module via the idiomatic [1] import.meta statement:

    let tmpl = document.createElement('template');
    tmpl.innerHTML = `<link rel="stylesheet" href="${new URL("mapml.css", import.meta.url).href}">`;
...
    shadowRoot.appendChild(tmpl.content.cloneNode(true));

[1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta

./mapml.js is a minified script file that is created by the Grunt "rollup" plugin during the build process.  The rollup plugin processes the src/mapml subdirectory and composes a temporary mapml.js file from the set of files identified by src/mapml/index.js.  This temporary mapml.js file is then minified by the "uglify" plugin.  The structure of the mapml.js file enables its import via the import "./mapml.js"; statement.

The <mapml-viewer>'s MapViewer module imports the MapLayer symbol from the src/layer.js ES module.  The MapViewer module, having defined the MapViewer symbol, and having imported the MapLayer symbol from src/layer.js, registers these classes as implementing custom elements with the browser, via the customElements.define interface method:

window.customElements.define('mapml-viewer', MapViewer);
window.customElements.define('layer-', MapLayer);