Limit bounds of Leaflet TileLayer

[banesullivan]

We should be able to limit the bounds of the Leaflet TileLayer used in

This should look something like the following but I cannot get it to work. Ideally we should implement this as a prop on the widget

diff --git a/vue-components/src/components/LargeImageLTileLayer/script.js b/vue-components/src/components/LargeImageLTileLayer/script.js
index 174894f..28151b2 100644
--- a/vue-components/src/components/LargeImageLTileLayer/script.js
+++ b/vue-components/src/components/LargeImageLTileLayer/script.js
@@ -1,7 +1,7 @@
 import TileLayerMixin from 'vue2-leaflet/src/mixins/TileLayer.js';
 import Options from 'vue2-leaflet/src/mixins/Options.js';
 import { optionsMerger, propsBinder, findRealParent } from 'vue2-leaflet/src/utils/utils.js';
-import { tileLayer, DomEvent } from 'leaflet';
+import { tileLayer, DomEvent, LatLng } from 'leaflet';
 
 import 'leaflet/dist/leaflet.css';
 import { defineComponent } from 'vue';
@@ -25,6 +25,11 @@ export default defineComponent({
 
       // TODO: limit request bounds of the tileLayer
       const options = optionsMerger(this.tileLayerOptions, this);
+      options.bounds = [
+        new LatLng(45.846075214858075, -70.40894637677248),
+        new LatLng(40.07105681242268, -80.03236067899462),
+      ]
+      console.log(options)
       this.mapObject = this.tileLayerClass(url, options);
       DomEvent.on(this.mapObject, this.$listeners);
       propsBinder(this, this.mapObject, this.$options.props);