I’m deploying a map app using Gatby and Leafly. I used an environment variable to access my API key. Previously, it worked fine and my map app was able to load my custom map via the key I set as the environment variable. I had it set as:
Key Value GATSBY_MAPBOX_KEY pk.blahblahblah
And I have a file (International_Map/src/data/map-services.js) with the following line to fetch the key:
const accessToken = process.env.GATSBY_MAPBOX_KEY;
It worked this weekend:
However, today I pushed an update via git and now the map won’t load. The website loads, but not the map that is in the background.
I tried deleting cache and deploying. I tried deleting the whole site and making a new one connected to github. I tried putting quotes around the pk (“pk.blah”). I tried checking my local machine and the map works fine. Here is a link to the logs when I most recently deployed.
Sometimes when I refresh the page, the map will partially load or load if I zoom in/out. But this never happens if I view in a private window or on mobile.
Here is the netlify instance.
I did search the forum for related topics, but I don’t think what I’ve found really applies since what I had a few days ago did in fact work.
Any wisdom or guidance at all with this would be much appreciated.