Updated

Author: djthorpe

example/index.html

@@ -29,11 +29,13 @@
         <div style="height: 500px;">
             <js-map id="map"
                 accessToken="pk.eyJ1IjoiZGp0aG9ycGUiLCJhIjoiY2x5ZnJhZjAzMDJsYTJqcjd6eWQ3cjRvcSJ9.LvoT_wihG5VQtv008P-MPw">
-                <js-mapsource type="geojson" data="{}"></js-mapsource>
+                <js-mapsource id="area" type="geojson"
+                    data='{ "type": "Feature", "geometry": { "type": "Point", "coordinates": [0,0] } }'></js-mapsource>
+                <js-maplayer id="points" source="#area" type="circle" paint='{ "circle-color" : "red" , "circle-radius"
+                    : 4, "circle-stroke-width" : 2, "circle-stroke-color" : "red" }'></js-maplayer>
             </js-map>
         </div>
     </js-container>
-
     <js-container>
         TAG COLOR
         <js-tag color="primary" texttransform="uppercase">Primary</js-tag>

src/element/TableBodyElement.js

@@ -94,7 +94,7 @@ export class TableBodyElement extends LitElement {
   render() {
     const rows = this.#renderRows();
     const head = this.#head ? this.#head.render() : html``;
-    return [html`<table>${head}<tbody>${rows}</tbody></table>`];
+    return html`<table>${head}<tbody>${rows}</tbody></table>`;
   }
 
   #renderRows() {

src/mapbox/MapElement.js

@@ -1,6 +1,8 @@
 import { LitElement, html, css, nothing, unsafeCSS } from 'lit';
 import { Map } from 'mapbox-gl';
 import styles from './mapbox.css.txt';
+import { MapSourceElement } from './MapSourceElement';
+import { MapLayerElement } from './MapLayerElement';
 
 /**
  * @class MapElement
@@ -20,6 +22,8 @@ import styles from './mapbox.css.txt';
  */
 export class MapElement extends LitElement {
   #map;
+  #sources;
+  #layers;
 
   static get localName() {
     return 'js-map';
@@ -88,7 +92,30 @@ export class MapElement extends LitElement {
     });
     this.#map.on('load', () => {
       // Add map sources
-      console.log('Map loaded');
+      const sources = this.querySelectorAll(MapSourceElement.localName);
+      for (const source of sources) {
+        this.#map.addSource(source.id, {
+          type: source.type,
+          data: source.data,
+        });
+      }
+
+      // Add map layers
+      const layers = this.querySelectorAll(MapLayerElement.localName);
+      for (const layer of layers) {
+        const source = this.querySelector(`${layer.source}`);
+        if (!source) {
+          console.error(`Source ${layer.source} not found for layer ${layer.id}`);
+        } else {
+          console.log(`Adding layer ${layer.id} with source ${source.data}`);
+          this.#map.addLayer({
+            id: layer.id,
+            source: source.id,
+            type: layer.type,
+            paint: layer.paint,
+          });  
+        }
+      }
     });
   }
 

src/mapbox/MapLayerElement.js

@@ -9,11 +9,19 @@ import styles from 'mapbox-gl/dist/mapbox-gl.css';
  *
  * @example
  * <js-map>
- *   <js-maplayer></js-maplayer>
+ *   <js-maplayer type="circle" source="#source"></js-maplayer>
  * </js-map>
  */
 export class MapLayerElement extends LitElement {
   static get localName() {
     return 'js-maplayer';
   }
+
+  static get properties() {
+    return {
+      source: { type: String, reflect: true },
+      type: { type: String, reflect: true },
+      paint: { type: Object, reflect: true },
+    };
+  }
 }

src/mapbox/MapSourceElement.js

@@ -11,16 +11,14 @@ import { LitElement, html, css, nothing } from 'lit';
  * </js-map>
  */
 export class MapSourceElement extends LitElement {
-  #source;
-
   static get localName() {
     return 'js-mapsource';
   }
 
   static get properties() {
     return {
       type: { type: String, reflect: true },
-      data: { type: Object, reflect: true }
+      data: { type: Object, reflect: true },
     };
   }
 }