Added fill type

Author: djthorpe

example/index.html

@@ -29,10 +29,11 @@
         <div style="height: 500px;">
             <js-map id="map"
                 accessToken="pk.eyJ1IjoiZGp0aG9ycGUiLCJhIjoiY2x5ZnJhZjAzMDJsYTJqcjd6eWQ3cjRvcSJ9.LvoT_wihG5VQtv008P-MPw">
-                <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>
+                <!-- add a source from the array (must currently be an array of GeoJSON features) -->
+                <js-mapsource id="area" type="geojson" data="#array"></js-mapsource>
+
+                <!-- display the source on the map as polygons -->
+                <js-maplayer id="points" source="#area" type="fill" paint='{ "fill-opacity": 0.2, "fill-color": "#aa0000" }'></js-maplayer>
             </js-map>
         </div>
     </js-container>

example/load.js

@@ -2,4 +2,5 @@ import { FeatureModel } from '../src/geojson/FeatureModel';
 
 window.addEventListener('load', () => {
   const provider = document.querySelector('#provider');
+  provider.interval = 5;
 });

src/core/ArrayElement.js

@@ -13,7 +13,7 @@ import { EventType } from './EventType';
  */
 export class ArrayElement extends LitElement {
     #data = new Array();
-    #newdata = null;
+    #newdata = new Array();
     #provider = null;
 
     static get localName() {
@@ -54,24 +54,24 @@ export class ArrayElement extends LitElement {
 
     #providerChanged(newVal, oldVal) {
         if (oldVal != null && this.#provider && newVal !== oldVal) {
-            this.#provider.removeEventListener(EventType.OBJECT, this.#providerFetch.bind(this));
+            this.#provider.removeEventListener(EventType.FETCH, this.#providerFetch.bind(this));
             this.#provider.removeEventListener(EventType.OBJECT, this.#providerObject.bind(this));
-            this.#provider.removeEventListener(EventType.OBJECT, this.#providerDone.bind(this));
+            this.#provider.removeEventListener(EventType.DONE, this.#providerDone.bind(this));
             this.#provider = null;
         }
         if (newVal != null && newVal !== oldVal) {
             this.#provider = document.querySelector(newVal);
             if (this.#provider) {
-                this.#provider.addEventListener(EventType.OBJECT, this.#providerFetch.bind(this));
+                this.#provider.addEventListener(EventType.FETCH, this.#providerFetch.bind(this));
                 this.#provider.addEventListener(EventType.OBJECT, this.#providerObject.bind(this));
-                this.#provider.addEventListener(EventType.OBJECT, this.#providerDone.bind(this));
+                this.#provider.addEventListener(EventType.DONE, this.#providerDone.bind(this));
             } else {
                 throw new Error(`Provider "${newVal}" not found`);
             }
         }
     }
 
-    #providerFetch(event) {
+    #providerFetch() {
         // Reset the data container
         this.#newdata = new Array();
     }
@@ -81,7 +81,7 @@ export class ArrayElement extends LitElement {
         this.#newdata.push(event.detail);
     }
 
-    #providerDone(event) {
+    #providerDone() {
         let modified = false;
         if (this.#newdata.length !== this.#data.length) {
             modified = true;

src/core/EventType.js

@@ -1,5 +1,5 @@
 /**
- * Define event tyoes used by web components
+ * Define event types used by web components
  * @readonly
  * @enum {String}
  */

src/core/ProviderElement.js

@@ -48,6 +48,9 @@ export class ProviderElement extends LitElement {
     if (name === 'path') {
       this.#pathChanged(newVal, oldVal);
     }
+    if (name === 'interval') {
+      this.#intervalChanged(newVal, oldVal);
+    }
   }
 
   render() {
@@ -118,8 +121,17 @@ export class ProviderElement extends LitElement {
   #pathChanged(newVal, oldVal) {
     if (newVal) {
       if(newVal !== oldVal) {
-        console.log(`path changed: ${oldVal} => ${newVal}`);
-        this.fetch(newVal);
+        this.fetch();
+      }
+    } else {
+      this.cancel();
+    }
+  }
+
+  #intervalChanged(newVal, oldVal) {
+    if (newVal) {
+      if(newVal !== oldVal) {
+        this.fetch();
       }
     } else {
       this.cancel();

src/mapbox/MapElement.js

@@ -3,6 +3,7 @@ import { Map } from 'mapbox-gl';
 import styles from './mapbox.css.txt';
 import { MapSourceElement } from './MapSourceElement';
 import { MapLayerElement } from './MapLayerElement';
+import { EventType } from '../core/EventType';
 
 /**
  * @class MapElement
@@ -96,7 +97,16 @@ export class MapElement extends LitElement {
       for (const source of sources) {
         this.#map.addSource(source.id, {
           type: source.type,
-          data: source.data,
+          data: source.geojson
+        });
+
+        // Watch source data changes
+        source.addEventListener(EventType.CHANGE, (evt) => {
+          // Source data has changed, update the source
+          const mapSource = this.#map.getSource(evt.detail.id);
+          if (mapSource && evt.detail.geojson) {
+            mapSource.setData(evt.detail.geojson);
+          }
         });
       }
 
@@ -105,16 +115,14 @@ export class MapElement extends LitElement {
       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,
-          });  
+          throw new Error(`Source ${layer.source} not found for layer ${layer.id}`);
         }
+        this.#map.addLayer({
+          id: layer.id,
+          source: source.id,
+          type: layer.type,
+          paint: layer.paint || {},
+        });
       }
     });
   }

src/mapbox/MapSourceElement.js

@@ -1,4 +1,6 @@
 import { LitElement, html, css, nothing } from 'lit';
+import { EventType } from '../core/EventType';
+import { ArrayElement } from '../core/ArrayElement';
 
 /**
  * @class MapSourceElement
@@ -11,14 +13,60 @@ import { LitElement, html, css, nothing } from 'lit';
  * </js-map>
  */
 export class MapSourceElement extends LitElement {
+  #data;
+
   static get localName() {
     return 'js-mapsource';
   }
 
   static get properties() {
     return {
       type: { type: String, reflect: true },
-      data: { type: Object, reflect: true },
+      data: { type: String, reflect: true },
     };
   }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    super.attributeChangedCallback(name, oldVal, newVal);
+    if (name === 'data') {
+      this.#dataChanged(newVal, oldVal);
+    }
+  }
+
+  get geojson() {
+    if (this.type !== 'geojson') {
+      return null;
+    }
+    const featurecollection = new Object();
+    featurecollection.type = 'FeatureCollection';
+    featurecollection.features = new Array();
+    if (this.#data instanceof ArrayElement) {
+      for(let i = 0; i < this.#data.length; i++) {
+        featurecollection.features.push(this.#data.at(i));
+      }
+    }
+    return featurecollection;
+  }
+
+  #dataChanged(newVal, oldVal) {
+    if (oldVal != null && this.#data && newVal !== oldVal) {
+      this.#data.removeEventListener(EventType.CHANGE, this.#dataFetch.bind(this));
+      this.#data = null;
+    }
+    if (newVal != null && newVal !== oldVal) {
+      this.#data = document.querySelector(newVal);
+      if (this.#data) {
+        this.#data.addEventListener(EventType.CHANGE, this.#dataFetch.bind(this));
+      } else {
+        throw new Error(`Data "${newVal}" not found`);
+      }
+    }
+  }
+
+  #dataFetch(event) {
+    // Change event
+    this.dispatchEvent(new CustomEvent(EventType.CHANGE, {
+      detail: this 
+    }));
+  }
 }