Fix for base map/providers #895 (#897)

resources/js/maps/base_map.js

@@ -3,6 +3,7 @@
  * https://docs.phpvms.net/developers/building-assets
  *
  * Edits here don't take place until you compile these assets and then upload them.
+ * Available providers: https://leaflet-extras.github.io/leaflet-providers/preview/
  */
 
 const leaflet = require('leaflet');
@@ -16,25 +17,31 @@ export default (_opts) => {
     maxZoom: 10,
     layers: [],
     set_marker: false,
-    providers: [
+    leafletOptions: {},
-      'Esri.WorldStreetMap',
-    ],
-    tile_layers: [],
-    leafletOptions: {
-      scrollWheelZoom: false,
-    },
   }, _opts);
 
-  const map = leaflet.map('map', Object.assign({
+  const leafletOptions = Object.assign({
     center: opts.center,
     zoom: opts.zoom,
     scrollWheelZoom: false,
-  }, opts.leafletOptions));
+    providers: {},
+  }, opts.leafletOptions);
 
-  // eslint-disable-next-line no-unused-vars
+  // Check if any providers are listed; if not, set the default
-  opts.providers.forEach((p, idx) => {
+  if (Object.entries(leafletOptions.providers).length === 0) {
-    leaflet.tileLayer.provider(p).addTo(map);
+    leafletOptions.providers = {
-  });
+      'Esri.WorldStreetMap': {},
+    };
+  }
+
+  const map = leaflet.map('map', leafletOptions);
+
+  // eslint-disable-next-line guard-for-in,no-restricted-syntax
+  for (const key in leafletOptions.providers) {
+    leaflet.tileLayer
+      .provider(key, leafletOptions.providers[key])
+      .addTo(map);
+  }
 
   return map;
 };