Adds a custom element for mapbox integration

1 files changed, 92 insertions, 0 deletions

diff --git a/src/js/main.js b/src/js/main.js
new file mode 100644
index 0000000..c2b3120
--- /dev/null
+++ b/src/js/main.js
@@ -0,0 +1,92 @@
+import mapboxgl from "mapbox-gl";
+
+function wrapElmApplication(elmApp) {
+  window.customElements.define(
+    "elm-mapbox-map",
+    class MapboxMap extends window.HTMLElement {
+      constructor() {
+        super();
+        this._refreshExpiredTiles = true;
+        this._renderWorldCopies = true;
+        this.interactive = true;
+      }
+
+      get mapboxStyle() {
+        return this._style;
+      }
+      set mapboxStyle(value) {
+        if (this._map) this._map.setStyle(value);
+        this._style = value;
+      }
+
+      get minZoom() {
+        return this._minZoom;
+      }
+      set minZoom(value) {
+        if (this._map) this._map.setMinZoom(value);
+        this._minZoom = value;
+      }
+
+      get maxZoom() {
+        return this._maxZoom;
+      }
+      set maxZoom(value) {
+        if (this._map) this._map.setMaxZoom(value);
+        this._maxZoom = value;
+      }
+
+      get map() {
+        return this._map;
+      }
+
+      get maxBounds() {
+        return this._maxBounds;
+      }
+      set maxBounds(value) {
+        if (this._map) this._map.setBounds(value);
+        this._maxBounds = value;
+      }
+
+      get renderWorldCopies() {
+        return this._renderWorldCopies;
+      }
+      set renderWorldCopies(value) {
+        if (this._map) this._map.setRenderWorldCopies(value);
+        this._renderWorldCopies = value;
+      }
+
+      connectedCallback() {
+        mapboxgl.accessToken = this.token;
+        this.style.display = "block";
+        this.style.width = "100%";
+        this.style.height = "100%";
+        this._map = new mapboxgl.Map({
+          container: this,
+          style: this._style,
+          minZoom: this._minZoom || 0,
+          maxZoom: this._maxZoom || 22,
+          interactive: this.interactive,
+          attributionControl: false,
+          logoPosition: this.logoPosition || "bottom-left",
+          refreshExpiredTiles: this._refreshExpiredTiles,
+          maxBounds: this._maxBounds,
+          center: this.center,
+          // zoom: this.zoom,
+          // bearing: this.bearing,
+          // pitch: this.pitch,
+          renderWorldCopies: this._renderWorldCopies
+          // maxTileCacheSize: this._maxTileCacheSize,
+          // localIdeographFamily: this._localIdeographFamily
+        });
+      }
+
+      disconnectedCallback() {
+        this._map.remove();
+        delete this._map;
+      }
+    }
+  );
+  return elmApp;
+}
+
+export default wrapElmApplication;