Hi all,

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.

Thank you

Hey there,

first of all, thanks for working on covid relief efforts - that is so important. Are you aware that we have a special covid plan? More here:

secondly, we completed some migration work today that relates to how Netlify URLs work.
Specifically, your app now ends in an .app domain instead of .com

More on that here:

Given that you are loading a map with mapbox, I am wondering if you need to update the URL for your site with that service for this to work. Did you provide them with a URL to get an API key or something like that?

Hey Perry. Thanks for all the info. Didn’t know about COVID-19 Support. I’ll look into it.

Brilliant suggestion with Mapbox and authorized URLs. I updated it to include the .app sites. However, the similar somewhat persists. Now, it loads, but only when I zoom in or out. But at it’s normal state, I still get the lack of map background.

Anything you recommend I try?

hmm. I am still seeing this in the developer console:

And I am getting a partial map on first load, but it’s not complete.

I’m not entirely sure what is going on here, if i am quite honest.

Does mapbox have a support community where you might be able to ask?

Weird, it now seems to work fine and load, no problem. Apparently it takes a minute for the API to start working once you add a new site to its authorization. Thank you so much for the help!