For a satellite basemap, you should try the following instead:
style: 'mapbox://styles/mapbox/satellite-v9'

This is the official Mapbox satellite style (with roads and labels removed for clarity, which may be beneficial for farm identification). Here’s the refind JS codE:

Qualtrics.SurveyEngine.addOnload(function () {
  document.getElementById(this.questionId)
    .querySelectorAll('(role*=presentation]')'0].style.display = 'none';
});

Qualtrics.SurveyEngine.addOnReady(function () {
  mapRender('YOUR_MAPBOX_API_KEY', document.getElementById(this.questionId), {
    defaultView: {
      location: { lat: 39, lng: 98 },
      editable: true,
      zoom: 13,
      style: 'mapbox://styles/mapbox/satellite-v9'  // <- Corrected style
    }
  });
});

Do let me know if it works.
-- Rochak

Thanks Rochak!

I just made that edit, and did a preview of the block with the question. After saving, I am still not seeing the change to the map style. It is still appearing like the first image instead of the second image I would like to render. 

I have been playing around with the mapbox options using their documentation: https://docs.mapbox.com/mapbox-gl-js/guides/styles/set-a-style/ 

I see that there is a setStyle option that I unsuccessfully have tried to implement as well:  map.setStyle('mapbox://styles/mapbox/satellite-v9');

Here is the current version of the code I have tried to render: 

Qualtrics.SurveyEngine.addOnload(function () {
  document
	.getElementById(this.questionId)
    .querySelectorAll('orole*=presentation]')t0].style.display = 'none';
});

// Default center and zoom level
Qualtrics.SurveyEngine.addOnReady(function () {
  mapRender('API-KEY', document.getElementById(this.questionId), {
    defaultView: {
      location: { lat: 39, lng: 98 },
      editable: true,
      zoom: 13,
      style: 'mapbox://styles/mapbox/satellite-v9'  // <- Corrected style
    }
  });
  map.setStyle('mapbox://styles/mapbox/satellite-v9');
});

--- Ryan

Hi Ryan!

It looks like you’re trying to use map.setStyle() after the mapRender() function. The issue might be because mapRender() is likely abstracting the Mapbox instance and not exposing it directly for further manipulation. To change the basemap style properly, ensure the style parameter is set correctly within your defaultView object, as you’ve initially attempted. Here’s how your final implementation should look:

 

Qualtrics.SurveyEngine.addOnReady(function () {
    mapRender('API-KEY', document.getElementById(this.questionId), {
        defaultView: {
            location: { lat: 39, lng: 98 },
            editable: true,
            zoom: 13,
            style: 'mapbox://styles/mapbox/satellite-v9'
        }
    });
});

Make sure your API key is valid and correctly configured to access this specific style. Also, confirm no other conflicting styles or cache issues by clearing your browser cache or testing it in an incognito/private browsing window.

Hope this resolves your issue!

– Rochak

Thanks, 

I have removed the map.setStyle() from the code chunk. My defaultView looks like the example you provide now. I attempted this in incognito mode, with no success. The API key is valid. But I believe the issue is in the permissions for the API to change the scopes. So I created a new API key from Mapbox with the following parameters selected: 

I thought this would resolve the issue, but instead when I render the map in Qualtrics there is no map. It does not seem to be correctly calling the API. If I switch back to the old API then the map will render. I poked around on Mapbox and tried making a ‘style’ but it is unclear to me how I can call that specific style through the API token given the options on Mapbox. 

-- Ryan