From ac6ea8cf9e29ad98651f70bd7fef5cd314980f7a Mon Sep 17 00:00:00 2001
From: Simon Green Kristensen <skr@ocean.io>
Date: Wed, 30 Apr 2025 15:49:31 +0200
Subject: [PATCH] feat: provide your own mapbox library/geocoder

In scenarios where you deploy your own web app, with sveltekit or not,
using the window object is fine, since you control everything about the page.
However, in browser extensions, we can't expect to populate the window object,
since we might collide with the underlying page or other extensions.

This PR allows you to Bring Your Own Mapbox, by providing the library directly
to the component.
---
 src/lib/geocoder/Geocoder.svelte    |  8 +++++++-
 src/lib/geocoder/geocoder-action.js | 11 +++++++----
 src/lib/map/Map.svelte              |  8 +++++++-
 src/lib/map/map-action.js           | 12 ++++++++----
 4 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/lib/geocoder/Geocoder.svelte b/src/lib/geocoder/Geocoder.svelte
index c3243e3..63726cf 100644
--- a/src/lib/geocoder/Geocoder.svelte
+++ b/src/lib/geocoder/Geocoder.svelte
@@ -23,6 +23,11 @@
   export let customStylesheetUrl = false
   export let geocoder
 
+  /**
+   * Allows you to provide the mapbox geocoder, in case it isn't possible to access it globally
+   */
+  export let MapboxGeocoder = undefined
+
   const dispatch = createEventDispatcher()
   const fieldId = 'bsm-' + Math.random().toString(36).substring(6)
 
@@ -32,7 +37,8 @@
     types: types.join(','),
     placeholder,
     customStylesheetUrl,
-    value
+    value,
+    MapboxGeocoder
   }, options)
 
   function init ({ detail }) {
diff --git a/src/lib/geocoder/geocoder-action.js b/src/lib/geocoder/geocoder-action.js
index c48c188..ecdeb69 100644
--- a/src/lib/geocoder/geocoder-action.js
+++ b/src/lib/geocoder/geocoder-action.js
@@ -4,9 +4,11 @@ import { bindEvents } from '../event-bindings.js'
 export default function action (node, options = {}) {
   let map
 
-  const resources = [
-    { type: 'script', value: `//api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/${options.version}/mapbox-gl-geocoder.min.js`, id: 'byk-gc-js' }
-  ]
+  const resources = [];
+
+  if (!options.MapboxGeocoder) {
+    resources.push({ type: 'script', value: `//api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/${options.version}/mapbox-gl-geocoder.min.js`, id: 'byk-gc-js' })
+  }
 
   const customStylesheetUrl = options.customStylesheetUrl
   if (customStylesheetUrl) {
@@ -29,7 +31,8 @@ export default function action (node, options = {}) {
 }
 
 function init (options, node) {
-  const geocoder = new window.MapboxGeocoder(options)
+  const MapboxGeocoder = options.MapboxGeocoder || window.MapboxGeocoder
+  const geocoder = new MapboxGeocoder(options)
   geocoder.addTo(`#${node.id}`)
   if (options.value) {
     geocoder.setInput(options.value)
diff --git a/src/lib/map/Map.svelte b/src/lib/map/Map.svelte
index 9e0f999..2433dd3 100644
--- a/src/lib/map/Map.svelte
+++ b/src/lib/map/Map.svelte
@@ -42,6 +42,11 @@
   export let customStylesheetUrl = false
   export let style = 'mapbox://styles/mapbox/streets-v11'
 
+  /**
+   * Allows you to provide the mapbox library, in case it isn't possible to retrieve/access it globally
+   */
+  export let mapboxLib = undefined;
+
   const dispatch = createEventDispatcher()
 
   setContext(contextKey, {
@@ -62,7 +67,8 @@
     wheelZoomRate,
     version,
     customStylesheetUrl,
-    map
+    map,
+    mapboxLib,
   }, options)
 
   const queue = new EventQueue()
diff --git a/src/lib/map/map-action.js b/src/lib/map/map-action.js
index 991712b..757ddd2 100644
--- a/src/lib/map/map-action.js
+++ b/src/lib/map/map-action.js
@@ -5,10 +5,13 @@ export default function action (node, options = {}) {
   let map
 
   const resources = [
-    { type: 'script', attr: 'src', value: `//api.mapbox.com/mapbox-gl-js/${options.version}/mapbox-gl.js`, id: 'byk-gl-js' },
     { type: 'link', attr: 'href', value: `//api.mapbox.com/mapbox-gl-js/${options.version}/mapbox-gl.css`, id: 'byk-gl-css' }
   ]
 
+  if (!options.mapboxLib) {
+    resources.push({ type: 'script', attr: 'src', value: `//api.mapbox.com/mapbox-gl-js/${options.version}/mapbox-gl.js`, id: 'byk-gl-js' })
+  }
+
   const customStylesheetUrl = options.customStylesheetUrl
   if (customStylesheetUrl) {
     resources.push({ type: 'link', attr: 'href', value: customStylesheetUrl, id: 'byk-mcsu-css' })
@@ -28,10 +31,11 @@ export default function action (node, options = {}) {
 }
 
 function init (options, node) {
-  window.mapboxgl.accessToken = options.accessToken
-  const el = new window.mapboxgl.Map(options)
+  const mapbox = options.mapboxLib || window.mapboxgl
+  mapbox.accessToken = options.accessToken
+  const el = new mapbox.Map(options)
 
-  return bindEvents(el, handlers, window.mapboxgl, node)
+  return bindEvents(el, handlers, mapbox, node)
 }
 
 const handlers = {