Integrating cartographic mapping into surveys
Integrating a third-party mapping solution within a SurveyEngine survey.
A step-by-step interactive tutorial on integrating cartographic mapping into surveys in SurveyEngine. Preview the live tutorial, then download and upload it to your account to examine the construction.
Ben White, 08.07.2026
What this tutorial covers
Integrating a third-party mapping solution within a SurveyEngine survey.
Each page of the tutorial demonstrates a specific technique. Work through it as a respondent first, then open the editor to see how it was built.
What you will learn
After completing this tutorial you will be able to implement integrating cartographic mapping into surveys in your own SurveyEngine surveys.
Download the tutorial ZIP and upload it to your account to use it as a starting point or template for your own work.
TLDR Quick links
Step-by-step walkthrough
Step 1: Choose a mapping library. Leaflet.js and Google Maps are commonly used for survey map integration.
Step 2: Load the mapping library. Include the library JavaScript and CSS in a script block on the survey page.
Step 3: Create a map container. Add a div with a fixed height as the map display container.
Step 4: Capture respondent interactions. Use map click events to capture selected locations and store them as survey variables.
Step 5: Export spatial data. Map coordinates export as survey variables for GIS analysis.
Try the live tutorial
The live tutorial is a working SurveyEngine survey. Click through it as a respondent to see the finished result.
Then download the tutorial ZIP file and upload it to your SurveyEngine account to examine how it was built.
Preview the live tutorial or download the ZIP file to load it into your account.
References
Ready to try it? Open a free SurveyEngine account, download the tutorial ZIP and upload it to your account.
Or Contact us at support@surveyengine.com — we're glad to help.