A react-based component that displays an embedded Mapbox interface on Qualtrics.
Qualtrics recently introduced a new "Simple" layout under the Look and feel settings but this component does not work with it so please use one of the other layouts.
The way to set the default center has been changed on v3.1.0. Please refer to the installation manual below if you have migrated from an earlier version.
Version 3.1.0 also introduces new features of form location and default pins. You can set the editable property for each of the pins.
The recent change (January 2024) disabled the use of removeChild
method on an HTMLElement that does not have a parent node, which made the previous Google Maps no longer work.
The early versions of v3 may have some bugs or unintended behaviors. Please report them via the issues if you find one.
This library uses Mapbox API. If you do not have an account, please create one via the link.
After creating the account, please obtain the access token for this map via the account page.
Copy https://cdn.jsdelivr.net/gh/keita-makino/qualtrics-map/dist/bundle.js <- this address (not the contents of this address).
<script>
jQuery.noConflict();
var countryCode = '${loc://CountryCode}';
var postalCode = '${loc://PostalCode}';
</script><br />
<link href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" rel="stylesheet" type="text/css" />
<link href="https://api.mapbox.com/mapbox-gl-js/v3.1.0/mapbox-gl.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/gh/keita-makino/qualtrics-map@3.1.0/dist/bundle.js"></script>
Qualtrics.SurveyEngine.addOnload(function () {
document
.getElementById(this.questionId)
.querySelectorAll('[role*=presentation]')[0].style.display = 'none';
});
Qualtrics.SurveyEngine.addOnReady(function () {
mapRender(
'the access token you copied from the account page',
document.getElementById(this.questionId),
);
});
// If you need to set a default center and zoom level
Qualtrics.SurveyEngine.addOnReady(function () {
mapRender(accessToken, document.getElementById('QID1'), {
defaultView: {
location: {
lat: 50,
lng: -100,
},
zoom: 13,
},
});
});
// If you need to have the map over the form
Qualtrics.SurveyEngine.addOnReady(function () {
mapRender(accessToken, document.getElementById('QID1'), {
formLocation: 'bottom',
});
});
// If you need to have default pins
Qualtrics.SurveyEngine.addOnReady(function () {
mapRender(accessToken, document.getElementById('QID1'), {
defaultPins: [
{
location: {
lat: 50,
lng: -100,
},
editable: false,
},
{
location: {
lat: 51,
lng: -100,
},
editable: true,
},
],
});
});
This package relies on the Mapbox Geocoding API for forward and reverse geocoding. The API is free until 100,000 calls per month but will charge after that, so please note that if you target a very large project.