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:
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.
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.
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!