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 = {