Make Raster layer work

Author: soal

src/components/UI/Marker.vue

@@ -56,7 +56,7 @@ export default {
       if (this.initial) return;
       this.marker.setLngLat(lngLat);
     },
-    draggable(next, prev) {
+    draggable(next) {
       if (this.initial) return;
       this.marker.setDraggable(next);
     }

src/components/layer/RasterLayer.js

@@ -23,7 +23,7 @@ export default {
     },
     tileSize: {
       type: Number,
-      defaul: 512
+      default: 512
     },
     bounds: {
       type: Array,
@@ -45,12 +45,15 @@ export default {
       let source = {
         type: "raster",
         url: this.url,
-        minzoom: this.tilesMinZoom,
-        maxzoom: this.tilesMaxZoom,
-        tileSize: this.tileSize,
-        bounds: this.bounds
+        tileSize: this.tileSize
       };
 
+      if (!this.url) {
+        source.minzoom = this.tilesMinZoom;
+        source.maxzoom = this.tilesMaxZoom;
+        source.bounds = this.bounds;
+      }
+
       if (this.tiles) source.tiles = this.tiles;
       if (this.scheme) source.scheme = this.scheme;
       if (this.attribution) source.attribution = this.attribution;
@@ -88,19 +91,12 @@ export default {
       }
       let layer = {
         id: this.layerId,
+        type: "raster",
         source: this.sourceId
       };
-      if (this.refLayer) {
-        layer.ref = this.refLayer;
-      } else {
-        layer.type = "raster";
-        layer.source = this.sourceId;
-        layer["source-layer"] = this["source-layer"];
-        if (this.minzoom) layer.minzoom = this.minzoom;
-        if (this.maxzoom) layer.maxzoom = this.maxzoom;
-        if (this.layout) {
-          layer.layout = this.layout;
-        }
+      layer.source = this.sourceId;
+      if (this.layout) {
+        layer.layout = this.layout;
       }
       layer.paint = this.paint ? this.paint : { "raster-opacity": 1 };
       layer.metadata = this.metadata;

src/components/map/mixins/withPrivateMethods.js

@@ -1,7 +1,7 @@
 export default {
   methods: {
     $_updateSyncedPropsFabric(prop, data) {
-      return event => {
+      return () => {
         this.propsIsUpdating[prop] = true;
         let info = typeof data === "function" ? data() : data;
         return this.$emit(`update:${prop}`, info);

src/main.js

@@ -13,6 +13,7 @@ import ImageLayer from "./components/layer/ImageLayer";
 import CanvasLayer from "./components/layer/CanvasLayer";
 import VideoLayer from "./components/layer/VideoLayer";
 import VectorLayer from "./components/layer/VectorLayer";
+import RasterLayer from "./components/layer/RasterLayer";
 
 import controlMixin from "./components/UI/controls/controlMixin";
 import withRegistration from "./lib/withRegistration";
@@ -33,6 +34,7 @@ export const MglImageLayer = ImageLayer;
 export const MglCanvasLayer = CanvasLayer;
 export const MglVideoLayer = VideoLayer;
 export const MglVectorLayer = VectorLayer;
+export const MglRasterLayer = RasterLayer;
 
 export const MglMarker = Marker;
 export const MglPopup = Popup;