A Web Mapping Tutorial for Beginners Using QGIS

Introduction

Figure 1: QGIS About window showing version 3.34

A decade ago, GIS was mostly done with desktop software. Today, web mapping is common, and tools exist to publish QGIS projects directly online without any coding. The qgis2web plugin can export your QGIS project as an interactive map using Leaflet (recommended) or OpenLayers.

In this tutorial, you will build a simple interactive web map that displays geo-tagged photos from a spreadsheet, style it in QGIS, and export it with qgis2web — no server or programming required.

Prerequisites

• Software: QGIS 3.34 (LTR) or later
• Plugins: QuickMapServices, qgis2web
• Data: CSV with columns for Latitude, Longitude, and Photos (path or URL to an image)
• OS file-path tips:
  • Windows: Shift + Right-click → Copy as path
  • macOS: Option + Right-click → Copy “… as Pathname”
  • Linux: Usually Ctrl + Shift + C in your file manager

Tip: Prefer relative paths (e.g., images/photo01.jpg) so your exported web map works on other computers.

---

Organize your data

You’ll first prepare a spreadsheet of photo locations and paths so QGIS knows where to plot each image.

Collect your images

1. Take 20–30 photos (JPG/JPEG).
2. Make sure photos are rotated correctly and sized reasonably (around 1200–2000 px wide).
3. Place them all inside your QGIS project folder (e.g., images/).
4. Rename files to avoid spaces or special characters (e.g., photo01.jpg).

Create the attribute table

1. Create a CSV with at least these columns:

• Latitude (Y)
• Longitude (X)
• Photos (relative path or URL)

1. Example row:

45.4215,-75.6972,images/photo01.jpg

If you need full paths:

• Windows: Shift + Right-click → Copy as path
• macOS: Option + Right-click → Copy “… as Pathname”
• Linux: Copy path (varies by file manager)

Tip: It’s usually better to store just the image path or URL — qgis2web will handle how it appears in the popup.

Figure 2: CSV in QGIS with Photos column (relative paths)

Troubleshooting image paths

• Avoid spaces and unusual characters in file or folder names.
• Keep paths consistent and relative (e.g., images/photo01.jpg).
• Test by pasting the path in a web browser — if the image loads, your link works.

Geo-tag your pictures

If your camera or phone stores GPS info, QGIS or other tools can read it.

• Use QGIS Import Photos plugin or the command-line tool ExifTool to extract coordinates automatically.
• Otherwise, look up coordinates manually:

1. Open Google Maps on a computer.
2. Right-click your location → What’s here?
3. Copy the Latitude,Longitude displayed.

Figure 3: Getting XY coordinates from Google Maps

Save the completed file as CSV (UTF-8).

---

Plot your points in QGIS

QGIS: Import Data

1. In QGIS: Layer → Add Layer → Add Delimited Text Layer.
2. Browse to your CSV. Set X field = Longitude, Y field = Latitude.
3. Set Geometry CRS = EPSG:4326 – WGS 84.
4. Click Add.

Figure 4: Add Delimited Text Layer – fields and CRS

Note: Latitude is Y, Longitude is X. If points appear in the wrong place, swap them or check CRS.

(Optional) Save your layer as a permanent file — right-click it → Export → Save Features As… (GeoPackage recommended).

Edit widget (popups)

Control what shows when someone clicks a point:

1. Right-click layer → Properties → Fields (or Attribute Form in new QGIS).
2. Change fields you don’t want to Hidden.
3. Set your photo field to Text Edit (or Attachment if preferred).

Figure 5: Attribute form widget setup

Edit symbology

Make your map visually clear:

1. Right-click layer → Properties → Symbology.
2. Try Single symbol for simple maps or Categorized/Graduated for grouped data.
3. Turn on Labels if you want names shown.

Figure 6: Graduated or categorized styles for points

Add a basemap (QuickMapServices)

1. Plugins → Manage and Install Plugins… → search QuickMapServices → Install.
2. Web → QuickMapServices → Settings → More Services → Get contributed pack.
3. Web → QuickMapServices → choose a basemap (e.g., Stamen Toner, OSM, ESRI World Imagery).

Figure 7: Adding a basemap via QuickMapServices

---

Summary

This tutorial walked you through making a simple but effective interactive photo map with QGIS. You learned how to:

• Prepare a clean CSV with Latitude/Longitude and photo paths, and troubleshoot file linking.
• Bring that CSV into QGIS as a point layer, control popups, and style data using clear colors, sizes, and labels.
• Add an attractive basemap for spatial context.

With just these steps, you now have a map that can be viewed interactively inside QGIS or exported for the web using plugins like qgis2web whenever you’re ready to share it online. This process is ideal for field surveys, travel documentation, or any project where images tied to locations help tell the story.