Issue with multiple maps on a page?

beyonk-group / svelte-mapbox

MapBox Map and Autocomplete components for Svelte (or Vanilla JS)

MIT License

346 stars 61 forks source link

Issue with multiple maps on a page? #64

Open cchance27 opened 2 years ago

cchance27 commented 2 years ago

When i have 2 components that are Map's on a page I get the following error not sure how to fix this.

map-action.js:31 Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'accessToken') at init (map-action.js:31:31) at map-action.js:19:14 at load (asset-loader.js:7:9) at action (map-action.js:18:3) at mount (Map.svelte? [sm]:15:6) at Object.targetCmp.$$.fragment.m (svelte-hooks.js:216:24) at mount_component (index.mjs:1798:26) at mount (MapBox.svelte:36:12) at Object.targetCmp.$$.fragment.m (svelte-hooks.js:216:24) at mount_component (index.mjs:1798:26)

raphet commented 2 years ago

I have the same issue. Since there is neither a voting nor particularly fitting reaction emoticon, I'll just leave this comment.

aubergene commented 2 years ago

I think the problem is the asset loader callback is being called before the asset has loaded. A quick work around is to statically load the assets before initialising the map by putting these in the <head>

<script src="//api.mapbox.com/mapbox-gl-js/v2.7.1/mapbox-gl.js" id="byk-gl-js"></script>
<link rel="stylesheet" type="text/css" href="//api.mapbox.com/mapbox-gl-js/v2.7.1/mapbox-gl.css" id="byk-gl-css" />