Skip to content

keita-makino/qualtrics-map

Folders and files

NameName
Last commit message
Last commit date

Latest commit

388a167 · Mar 6, 2024
Mar 6, 2024
Nov 28, 2020
Mar 5, 2024
Mar 6, 2024
Oct 24, 2019
Oct 7, 2019
Oct 7, 2019
Oct 29, 2019
Mar 26, 2021
Oct 7, 2019
Oct 28, 2019
Mar 6, 2024
Oct 28, 2019
Mar 5, 2024
Mar 5, 2024
Feb 18, 2020
Mar 5, 2024
Feb 19, 2024
Jun 2, 2022

Repository files navigation

qualtrics-map

A react-based component that displays an embedded Mapbox interface on Qualtrics.

Breaking change on v3.0.0

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.

Features

  • Collection of multiple answers to one question.
    • e.g., "From:" and "To:"
  • Use either the address bar with autocomplete or a map marker.

Example

Example


Installation

Mapbox API

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.

CDN URL

Copy https://cdn.jsdelivr.net/gh/keita-makino/qualtrics-map/dist/bundle.js <- this address (not the contents of this address).

Qualtrics survey settings

Header settings

  1. In the survey edit screen, click "Look & Feel" on right-top.
  2. Select "General" tab and then edit the "Header".
  3. Click the "<>" icon to enter coding-view.
  4. Copy and paste the following code, replacing the [apiKey] and [fileUrl] with respectively the API key and the URL that you copied above.
<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.0.1/dist/bundle.js"></script>

JavaScript coding

  1. The question that you want add the map has to be set as "Text Entry" + "Form" question.
  2. Add / remove text fields and set the field tag as you need. (e.g., Two text fields named "From:" and "To:").
  3. In the question, click the gear icon and then "Add Javascript..."
  4. Use the following code.
  5. If you need to set a default center location or zoom level, use the latter one.
  6. All done!
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
Qualtrics.SurveyEngine.addOnReady(function () {
  mapRender('the access token you copied from the account page', document.getElementById(this.questionId), {
    location: {
      lat: 50,
      lng: -100,
    } // optional,
    zoom: 12, // Optional
  });
});