Mapbox integration (to overcome the issue with Google Maps) | XM Community
Skip to main content

Hello everyone,

 

With the recent issue explained here, I updated the map component to use Mapbox API instead of Google Maps API.

https://github.com/keita-makino/qualtrics-map

Some instructions to install the component have been changed so please follow the readme to newly use it. Also, there might be some bugs or unintended behaviors with the new 3.0.0 version, so please report them here on GitHub when you find some :)

Your code exposes the accesstoken at the front-end. Which is super duper bad. 

The accesstoken is equivalent to a password. Someone could just take it, use it elsewhere and you’ll have to pay the charges. 

Strongly recommend updating your code.


Thank you so much for the suggestion, I updated the code (and replied to the issue on GitHub). Please let me know if it still does not work.


Could anyone help me to solve my issue? My code is below:

I want to set Seattle Downtown as a Default location with the following information. However, when I tried several times, it did not work. Could anyone give me any advice? Thanks.

 

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

Qualtrics.SurveyEngine.addOnReady(function () {
  var accessToken = 'MY TOKEN'; // 

  // Combine all map settings in a single mapRender call
  mapRender(accessToken, document.getElementById('QID116'), {
    defaultView: {
      location: {
        lat: 47.6062, // Seattle Downtown Latitude
        lng: -122.3321, // Seattle Downtown Longitude
      },
      zoom: 13, // Set zoom level
    },
    formLocation: 'bottom', // Place the map over the form
    defaultPins: r
      {
        location: {
          lat: 47.6062, // Pin for Seattle Downtown
          lng: -122.3321,
        },
        editable: true, // Allow pin to be editable
      },
    ],
  });
});


Leave a Reply