Difference between revisions of "A Web Mapping Tutorial for Beginners Using QGIS"
From CUOSGwiki
Jump to navigationJump to searchm (→Troubleshooting Image Code: minor corrections) |
(I updated the tutorial to make it clearer and up to date. I used QGIS 3.34, simplified long paragraphs into clear steps, added troubleshooting tips, and improved the intro and summary so beginners can follow and understand the purpose easily.) |
||
| Line 1: | Line 1: | ||
| − | ==Introduction== |
+ | == Introduction == |
| − | [[File: |
+ | [[File:Screenshot-1.png|thumb|frame|center|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'''. |
||
| − | A decade ago the practice of GIS was centred on the Desktop GIS Model, where GIS software was installed on a computer and a GIS analyst worked with the software and data to make maps, develop reports and answer spatial questions. This paradigm is no longer, or unlikely to remain, the dominant mode of working with GIS. GIS based technologies and applications have gone mainstream and have therefore become simplified and specialized to specific end-user applications (e.g. direction routing in Google Maps). As such, the role of classical GIS analysts who “do GIS” is receding, and taking their place are end-users, developers, and perhaps, data scientists (Roberts & Robertson, 2016). Beginners in GIS typically aren’t web programmers and it presents a challenge when one needs to create a web map that is of the same quality as a map creating in a GIS. Fortunately, there are tools available to easily translate your work in QGIS to web maps. The QSGIS2Web plugin provides an easy way to distribute and visualize your QGIS work as a web map using, without you having to know, OpenLayers or LeafLet. In this tutorial, you will learn how to create an interactive web map that displays your geo-tagged pictures. No server-side software required. |
||
| + | === Prerequisites === |
||
| − | ==Organize your data== |
||
| + | * '''Software:''' QGIS 3.34 (LTR) or later |
||
| − | First, we will see how to create a layer of points in Microsoft Excel containing geographic coordinates and links to "geotagged" photos. |
||
| + | * '''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., <code>images/photo01.jpg</code>) so your exported web map works on other computers.'' |
||
| − | =====Collect your images===== |
||
| − | Take 20-30 pictures using a digital camera, a tablet or a cellphone. Save them as .JPEG or .JPG. Copy your images into a directory. For example, with the Windows Photo Viewer, make sure the photos are oriented correctly and that they are size accordingly to your needs. |
||
| + | ---- |
||
| − | ===== Create the attribute table===== |
||
| + | == Organize your data == |
||
| − | To import this data to QGIS, you will have to save it as a text file or a CSV file. Then, you will need at least 2 columns which contain the X and Y coordinates and a third one that contains the location of your images. We will call this third column ''Photos''. |
||
| − | As you will link the images to the created layer, it is therefore essential that the images are stored in a directory that you have administrative rights to if you want that your images are viewed directly with QGIS. Get the location of a picture by firstly '''opening Windows Explorer''' and finding the photo in question. Then, hold down the '''Shift''' key, then right-click the photo. In the context menu that appears, find and click '''Copy as path'''. This copies the file location to the clipboard. '''Fill in''' the Photo attribute for each feature by pasting the file path in its respective cell. |
||
| + | You’ll first prepare a spreadsheet of photo locations and paths so QGIS knows where to plot each image. |
||
| − | We will use the HTML images syntax to link our pictures in the attribute table. |
||
| + | ===== Collect your images ===== |
||
| − | In HTML, images are defined with the <code><img></code> tag. |
||
| + | # Take 20–30 photos (JPG/JPEG). |
||
| − | The <code><img></code> tag is empty, it contains attributes only, and does not have a closing tag. |
||
| + | # Make sure photos are rotated correctly and sized reasonably (around 1200–2000 px wide). |
||
| + | # Place them all inside your QGIS project folder (e.g., <code>images/</code>). |
||
| + | # Rename files to avoid spaces or special characters (e.g., <code>photo01.jpg</code>). |
||
| + | ===== Create the attribute table ===== |
||
| − | The <code>src</code> attribute specifies the URL (web address) of the image: |
||
| + | # Create a CSV with at least these columns: |
||
| − | Example: |
||
| + | * '''Latitude (Y)''' |
||
| + | * '''Longitude (X)''' |
||
| + | * '''Photos''' (relative path or URL) |
||
| + | # Example row: |
||
| + | <code>45.4215,-75.6972,images/photo01.jpg</code> |
||
| + | If you need full paths: |
||
| − | <code><img src="url"></code> |
||
| + | * '''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.'' |
||
| − | ======The <code>alt</code> Attribute====== |
||
| − | The <code>alt</code> attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). |
||
| + | [[File:Image-2025-10-05 204333060.png|thumb|frame|center|Figure 2: CSV in QGIS with Photos column (relative paths)]] |
||
| − | The value of the <code>alt</code> attribute should describe the image: |
||
| + | ===== Troubleshooting image paths ===== |
||
| − | Example: |
||
| + | * Avoid spaces and unusual characters in file or folder names. |
||
| − | <code><img src="Your Image Path" alt="Image description"></code> |
||
| + | * Keep paths consistent and '''relative''' (e.g., <code>images/photo01.jpg</code>). |
||
| + | * Test by pasting the path in a web browser — if the image loads, your link works. |
||
| + | ===== Geo-tag your pictures ===== |
||
| − | If a browser cannot find an image, it will display the value of the alt attribute: |
||
| + | If your camera or phone stores GPS info, QGIS or other tools can read it. |
||
| − | ======Image Size - Width and Height====== |
||
| + | * Use QGIS '''Import Photos''' plugin or the command-line tool '''ExifTool''' to extract coordinates automatically. |
||
| − | You can use the style attribute to specify the width and height of an image. |
||
| + | * Otherwise, look up coordinates manually: |
||
| + | # Open Google Maps on a computer. |
||
| + | # Right-click your location → ''What’s here?'' |
||
| + | # Copy the '''Latitude,Longitude''' displayed. |
||
| + | [[File:Image-2025-10-05 204736608.png|thumb|frame|center|Figure 3: Getting XY coordinates from Google Maps]] |
||
| − | Example: |
||
| + | Save the completed file as '''CSV (UTF-8)'''. |
||
| − | <code><img src="Your Image Path" alt="Image Description" style="width:500px;height:600px;"></code> |
||
| + | ---- |
||
| − | Alternatively, you can use the width and height attributes: |
||
| + | == Plot your points in QGIS == |
||
| − | Example |
||
| + | ===== QGIS: Import Data ===== |
||
| − | <code><img src="Your Image Path" alt="Image Description" width="500" height="600"></code> |
||
| + | # In QGIS: '''Layer → Add Layer → Add Delimited Text Layer'''. |
||
| − | The width and height attributes always define the width and height of the image in pixels. |
||
| + | # Browse to your CSV. Set '''X field = Longitude''', '''Y field = Latitude'''. |
||
| + | # Set '''Geometry CRS = EPSG:4326 – WGS 84'''. |
||
| + | # Click '''Add'''. |
||
| + | [[File:Image 2025-10-05 205007301.png|thumb|frame|center|Figure 4: Add Delimited Text Layer – fields and CRS]] |
||
| − | '''Note: Always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.'''======Image |
||
| + | ''Note: Latitude is Y, Longitude is X. If points appear in the wrong place, swap them or check CRS.'' |
||
| − | ======Troubleshooting Image Code====== |
||
| − | In the case that your image does not show you may have to correct your code. It is very important to make sure all spaces are in the proper location and all proper quotations are used. You may also need to change your photo folders name or photo name to ones without any spaces as this may be the reason your image will not show in your final map. |
||
| + | (Optional) Save your layer as a permanent file — right-click it → '''Export → Save Features As…''' (GeoPackage recommended). |
||
| − | If this still does not correct your issue you can try pasting your image path into your browser without any double quotes ("). If the image shows you will know that the image path is not the issue but something elsewhere in your code has an incorrect format. If your photo does load you may also notice that the image path you pasted into your browser has been changed slightly. If it has, attempt using the changed path in place of the the image path you copied by holding shift and clicking on your photo. |
||
| − | ===== |
+ | ===== Edit widget (popups) ===== |
| + | Control what shows when someone clicks a point: |
||
| − | Geotagging consists of specifying the geographical coordinates of photographs by modifying their metadata. If you have a camera equiped with a GPS, geolocation data can be obtained automatically from the device. If you have an iPhone you can enable geolocation of photos (see how to activate it on this page[https://www.imore.com/how-to-set-flash-hdr-timer-grid-camera-iphone-and-ipad]) |
||
| + | # Right-click layer → '''Properties → Fields''' (or '''Attribute Form''' in new QGIS). |
||
| − | Or else, you can get GPS Coordinates from Google Maps. |
||
| + | # Change fields you don’t want to '''Hidden'''. |
||
| + | # Set your photo field to '''Text Edit''' (or '''Attachment''' if preferred). |
||
| + | [[File:Figure5Muhammad.png|thumb|frame|center|Figure 5: Attribute form widget setup]] |
||
| − | # Open the Google Maps website in a computer browser. |
||
| − | # Go to a location for which you want the GPS coordinates. |
||
| − | # Right-click (control-click on a Mac) the location. |
||
| − | # Click '''What's here? ...''' |
||
| − | # Look at the bottom of the screen where you'll see the GPS coordinates. |
||
| + | ===== Edit symbology ===== |
||
| − | [[File:Googlemaps.JPG |thumb|frame|center|Figure 2: Getting XY coordinates from Google Maps]] |
||
| + | Make your map visually clear: |
||
| + | # Right-click layer → '''Properties → Symbology'''. |
||
| − | '''Fill in''' the Latitude and Longitude columns for each feature. Once you have completed your spreadsheet, use '''Save As''' function in your program to save it as a '''Tab Delimited File''' or a '''Comma Separated Values (CSV)''' file. Once you have the data exported this way, you can open it in a text editor such as Notepad to view the contents. Examine your tabular data source. |
||
| + | # Try '''Single symbol''' for simple maps or '''Categorized/Graduated''' for grouped data. |
||
| + | # Turn on '''Labels''' if you want names shown. |
||
| − | [[File: |
+ | [[File:Image-2025-10-05-205645294.png|thumb|frame|center|Figure 6: Graduated or categorized styles for points]] |
| + | ===== Add a basemap (QuickMapServices) ===== |
||
| − | == Plot your points in your map == |
||
| − | =====QGIS: Import Data===== |
||
| − | # Open QGIS. '''Click on Layers''' ‣ '''Add Delimited Text Layer.''' |
||
| − | # In the Create a Layer from a Delimited Text File dialog, click on '''Browse''' and specify the path to the text file you downloaded. In the '''File format''' section, if saved as a '''Tab Delimited File''' file select '''Custom delimiters''' and check '''Tab''' but if saved as '''Comma Separated Values (CSV)''' select CSV. The Geometry definition section will be auto-populated if it finds a suitable X and Y coordinate fields. In our case they are '''LONGITUDE''' and '''LATITUDE'''. You may change it if the import selects the wrong fields. Click '''OK'''. |
||
| + | # '''Plugins → Manage and Install Plugins…''' → search '''QuickMapServices''' → Install. |
||
| − | '''Note: It is easy to confuse X and Y coordinates. Latitude specifies the north-south position of a point and hence it is a Y coordinate. Similarly Longitude specifies the east-west position of a point and it is a X coordinate.''' |
||
| + | # '''Web → QuickMapServices → Settings → More Services → Get contributed pack'''. |
||
| + | # '''Web → QuickMapServices →''' choose a basemap (e.g., Stamen Toner, OSM, ESRI World Imagery). |
||
| + | [[File:Image-2025-10-05-210250603.png|thumb|frame|center|Figure 7: Adding a basemap via QuickMapServices]] |
||
| − | # Next, a '''Coordinate Reference System Selector''' will ask you to select a coordinate reference system. Since the earthquake coordinates are in latitudes and longitudes, you should select '''WGS 84'''. Click '''OK'''. |
||
| − | '''OR''' If using QGIS 3.20 in the same window as previous step select '''WGS 84''' in geometry CRS section instead. |
||
| − | # You will now see that the data will be imported and displayed in the QGIS canvas. |
||
| − | # you will need to save the layer as an '''ESRI Shapefile''' in order to be able to Edit the layer. To do this right click on the layer you just made and select '''export''' ‣ '''save feature as'''. In the Save Vector Layer As dialog select '''ESRI Shapefile''' for the format and name the file. Then check add saved file to map and select ok. |
||
| + | ---- |
||
| − | [[File:SaveAsShapefilejp.JPG|thumb|frame|center|Figure 4: Saving layer as ESRI Shapefile]] |
||
| − | == |
+ | == Summary == |
| − | Creating new datasets can be a tedious task. To make things easier, QGIS enables users to customize the editing dialogue. Right click on the layer and select '''Properties''' -> '''Fields Tab''', for every attribute feature there is a '''Edit Widget''' shown. |
||
| − | Hide the columns you don't want to appear in your popups by changing their Edit widget to '''Hidden'''. We will keep the attribute Photos and hide the others. If any of your fields contain image filenames, change their Edit widget to '''Text Edit''' to have the images appear in popups. This widget is an edit box that allow multiple input lines. |
||
| − | <br> |
||
| − | '''OR''' If using QGIS 3.20 right click on the layer and select '''Properties''' -> '''Attribute Form'''. Then under available widgets select the Fields and select the attribute feature you wish to change. Under '''Widget Type''' you can change the the columns you don't wish to appear to '''Hidden''' and to '''Text edit''' if you do wish for them to be in your popup. |
||
| + | This tutorial walked you through making a simple but effective '''interactive photo map''' with QGIS. You learned how to: |
||
| − | [[File:Hidden.JPG|thumb|frame|center|Figure 5: Layer field properties]] |
||
| + | * Prepare a clean CSV with '''Latitude/Longitude''' and '''photo paths''', and troubleshoot file linking. |
||
| − | =====Edit symbology===== |
||
| + | * 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. |
||
| − | |||
| − | To change a layer’s symbology, open its '''Layer Properties'''. We will simply change the color of the Photos layer. |
||
| − | Right-click on the layer you wish to edit in the '''Layers''' list. |
||
| − | Select the menu item '''Properties''' in the menu that appears. |
||
| − | In the '''Properties''' window: |
||
| − | Select the '''Style''' '''OR''' in QGIS3.20 the '''Symbology''' tab at the extreme left. You can change the color, size and symbol as you wish. QGIS supports many types of symbology: Single symbol, Categorized, Graduated, 2.5D, More complex 2.5D styles are also possible, such as categorized. For instance, you could make a heatmap or add another dataset that would improve the map. |
||
| − | |||
| − | [[File:Symbologyjp.JPG |thumb|frame|center|Figure 6: Layer symbology editing]] |
||
| − | |||
| − | ===== Add base map ===== |
||
| − | |||
| − | Often, when you’re putting your own data onto a web map, you’ll want to put it on top of an existing basemap to provide context to the data. Making your own basemap is super interesting and fun, but is outside of the scope of this tutorial. To make this easy, we’ll use some pre-made tiles provided by Stamen Design. Stamen Design is a San Francisco-based research lab/development lab/design firm who have done some amazing things with web mapping (Stamen Design, 2018). |
||
| − | |||
| − | =====Download plugin===== |
||
| − | |||
| − | Core plugins are already part of the standard QGIS installation. To use these, you just need to enable them. |
||
| − | # Open QGIS. |
||
| − | # Click on '''Plugins ‣ Manage and Install Plugins....''' to open the Plugin Manager dialog. |
||
| − | # Even if this is your first time using QGIS, you will see a lot of plugins listed under the Installed tab. This is because they are Core Plugins and were installed during QGIS installation. |
||
| − | |||
| − | |||
| − | External plugins are available in the QGIS Plugins Repository and need to be installed by the users before using them. An easy way to browse and install these plugins is by using the Plugin Manager tool. |
||
| − | For this tutorial, you need to find and install a plugin called '''OpenLayers'''. As you start typing '''Open''' in the search box, you will see the search results below. |
||
| − | #Click on the OpenLayers and, click on '''Install plugin''' button to install it. |
||
| − | # Once the plugin is downloaded and installed, you will see a confirmation dialog. |
||
| − | # To add your basemap to the project '''Go to Web... OpenLayers plugin''' and select the basemap you wish to use for your map. |
||
| − | |||
| − | If this plugin is not available in the version of QGIS you are using find and install the plugin '''Quickmapservices''' |
||
| − | #Click on Quickmapservices and, click on '''install plugin''' to install it. |
||
| − | # Click on '''Web... Quickmapservices''' -> '''Settings'''. In settings select '''More Services''' and click get contributed pack. This will give you more basemap options. |
||
| − | # Still in the Settings menu under '''Visibility''' you will be able to select the groups you wish to see basemaps from. For this tutorial we are looking for stamen but feel free to explore the other options. Click save |
||
| − | # To add your basemap again go to '''Web... Quickmapservies''' -> '''Stamen''' and select the basemap you want to use. |
||
| − | |||
| − | [[File:Openlayersplug.JPG |thumb|frame|center|Figure 7: OpenLayers plugin]] |
||
| − | |||
| − | == Export map using QGIS2Web == |
||
| − | |||
| − | Prepare your map as far as possible in QGIS, as you want it to appear in your webmap. If the map is ready, then it's time to build a web mapping application using qgis2web plugin. |
||
| − | |||
| − | =====Download plugin===== |
||
| − | |||
| − | 1. In the toolbar menu. '''Open Plugin > Manage and Install Plugins'''. |
||
| − | 2. In the search toolbar, type QGIS2WEB. The plugin in will appear and then check it. Click '''Install Plugin''' at the right bottom of Plugins window. |
||
| − | [[File:Qgisplug.JPG |thumb|frame|center|Figure 8: QGIS2WEB plugin]] |
||
| − | |||
| − | =====How the plugin works===== |
||
| − | QGIS2WEB generates a web map from your current QGIS project, either as OpenLayers or Leaflet. It replicates as many aspects of the project as it can, including layers, styles (including categorized and graduated), and extent. The following section documents what can be done with each settings in the plugin window. You can play with them and don't forget to click '''Update Preview''' to see the result. |
||
| − | |||
| − | To use the plug in go to '''Web... qgis2web''' -> '''Create web map''' |
||
| − | |||
| − | =====Overview of the layer options ===== |
||
| − | |||
| − | It control how a layer will be displayed in the web map, including the pop up fields option. In this part we can also cluster a set points. |
||
| − | |||
| − | '''Popup fields ''' |
||
| − | Specify how each field will be labelled in popups |
||
| − | |||
| − | '''Visible''' |
||
| − | Select whether the layer will be visible on map load. This only determines visibility - the layer will be loaded regardless of this setting |
||
| − | <br> |
||
| − | '''Popups''' |
||
| − | This option may only be available on newer versions of this plug in. Make sure it is selected to make your popup photos visible once the map is complete. |
||
| − | <br> |
||
| − | '''Encode to JSON ''' |
||
| − | If unchecked, WFS layers will remain remote WFS layers in the webmap. If checked, the layer will be written to a local GeoJSON file |
||
| − | |||
| − | '''Cluster ''' |
||
| − | Cluster point features |
||
| − | |||
| − | |||
| − | [[File:EXPORTSCREEN.JPG |thumb|frame|center|Figure 9: Export to web map menu]] |
||
| − | |||
| − | =====Overview of the general options ===== |
||
| − | |||
| − | ====Data export==== |
||
| − | This part gives some options for exporting the map into a web map, such as: Location of exported web map files, mapping library location, minify GeoJSON file, etc. |
||
| − | '''Export folder ''' |
||
| − | The folder where the webmap will be saved |
||
| − | |||
| − | '''Mapping library location ''' |
||
| − | Select whether to use a local copy of OL3/Leaflet, or whether to call the library from its CDN |
||
| − | |||
| − | '''Minify GeoJSON files ''' |
||
| − | Remove unnecessary whitespace from exported GeoJSON to reduce file size |
||
| − | |||
| − | '''Precision ''' |
||
| − | Simplify geometry to reduce file size |
||
| − | |||
| − | [[File:EXPORT.JPG |thumb|frame|center|Figure 10: Data export parameters]] |
||
| − | |||
| − | ====Appearance==== |
||
| − | In this section we can add some tools to the web map such as: address searching, layer list, measure tool, pop up, user geolocation. Moreover we can set the extent of the web map in this part. |
||
| − | |||
| − | '''Add address search''' |
||
| − | Add field to allow searching for locations (geocode) |
||
| − | |||
| − | '''Add layers list ''' |
||
| − | Include list of layers (with legend icons, where possible) |
||
| − | |||
| − | '''Add measure tool ''' |
||
| − | Include interactive measuring widget |
||
| − | |||
| − | '''Geolocate user ''' |
||
| − | Show user's location on map |
||
| − | |||
| − | '''Highlight on hover''' |
||
| − | Highlight features on mouseover |
||
| − | |||
| − | '''Layer search ''' |
||
| − | Add option to search for values in layer field values |
||
| − | |||
| − | '''Match project CRS''' |
||
| − | Create webmap in same projection as QGIS project, otherwise the webmap is projected in EPSG:3857 |
||
| − | |||
| − | '''Show popups on hover''' |
||
| − | Show popups when mouse hovers over features |
||
| − | |||
| − | '''Template ''' |
||
| − | Select HTML template for webmap - add your own templates to the /qgis2web/templates directory in your .qgis2 folder |
||
| − | |||
| − | |||
| − | '''Scale/Zoom''' |
||
| − | This section control the map extent including zoom setting. |
||
| − | '''Extent''' |
||
| − | Either match the current QGIS view or show all contents of all layers (only local GeoJSON and rasters, not WFS/WMS) |
||
| − | |||
| − | '''Max zoom level''' |
||
| − | How far the webmap will zoom in |
||
| − | |||
| − | '''Min zoom level''' |
||
| − | How far the webmap will zoom out |
||
| − | |||
| − | '''Restrict to extent''' |
||
| − | Prevent panning or zooming beyond the selected extent |
||
| − | |||
| − | [[File:APPEARANCE.JPG |thumb|frame|center|Figure 10: Appearance parameters]] |
||
| − | =====Exporting ===== |
||
| − | |||
| − | When you have made a choice of layers and symbology, and configured the settings and appearance as to your preferences, click '''Update Preview''' button one last time to see the results. If you are satisfied of your map and you confirmed the output folder, click '''Export'''. Once the export is complete, your browser will open directly and display your web map. |
||
| − | |||
| − | [[File:Final.JPG |thumb|frame|center|Figure 11: QGIS2Web output ]] |
||
| − | |||
| − | To highlight the fact that the output created from this process can be readily changed to suit your requirement, we will make a simple change to the web map to add a title. On your computer, go to the folder where the web map was exported. |
||
| − | |||
| − | [[File:Folder.JPG |thumb|frame|center|Figure 12: Export folder]] |
||
| − | |||
| − | Open the index.html which contains the html code for your map. It would be preferable to open the file with an integrated development environment such as Spyder or Eclipse which have source code editing capabilities. However, if you do not have access to those softwares, '''Notepad''' will do the job for what want to do right now. |
||
| − | |||
| − | |||
| − | If you edit the index.html file that QGIS2WEB produces you'll see the title tags in the head section of the file. You will have to scroll down a little bit in order to find it. Read carefully. |
||
| − | |||
| − | [[File:Htmlfile.JPG |thumb|frame|center|Figure 13: HTML code]] |
||
| − | |||
| − | Once you find the tags, insert your title between the tags. It should look like this: <code><title>This is an web map</title></code> |
||
| − | |||
| − | [[File:title1.JPG |thumb|frame|center|Figure 14: The text between the tags is displayed on the tab on your browser.]] |
||
| − | |||
| − | If you want a title on the map itself then you need to add some text in the body section of index.html |
||
| − | |||
| − | [[File:code1.JPG |thumb|frame|center|Figure 15: Insert the following code in the file.]] |
||
| − | |||
| − | [[File:title2.JPG |thumb|frame|center|Figure 16: Now the title is on the map.]] |
||
| − | |||
| − | ==Summary== |
||
| − | |||
| − | |||
| − | In this tutorial, you have learned how to use the QGIS2Web plugin to create a web map using OpenLayers or Leaflet libraries from your QGIS project. QGIS2Web is a QGIS Desktop plugin. This plugin allows you to export your local QGIS project to a classic HTML server. No special software is needed on the server. The map element will be LeafLet or OpenLayers code, optionally, contained in an HTML page. Your data will be included in a GeoJson data file. Just copy on your server the html page and the Json file to publish your map online. The big advantage is having nothing to do on the server side. The second is that this solution is an easy first step into the web mapping world. Indeed, the generation of OpenLayers or LeafLet code can serve as a basis for developing pages with much richer features. This tutorial is also an introduction to the benefits of Web GIS which will hopefully raise the awareness of the free online mapping options available to the user community. |
||
Latest revision as of 20:16, 5 October 2025
Introduction
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
- Take 20–30 photos (JPG/JPEG).
- Make sure photos are rotated correctly and sized reasonably (around 1200–2000 px wide).
- Place them all inside your QGIS project folder (e.g.,
images/). - Rename files to avoid spaces or special characters (e.g.,
photo01.jpg).
Create the attribute table
- Create a CSV with at least these columns:
- Latitude (Y)
- Longitude (X)
- Photos (relative path or URL)
- 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.
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:
- Open Google Maps on a computer.
- Right-click your location → What’s here?
- Copy the Latitude,Longitude displayed.
Save the completed file as CSV (UTF-8).
Plot your points in QGIS
QGIS: Import Data
- In QGIS: Layer → Add Layer → Add Delimited Text Layer.
- Browse to your CSV. Set X field = Longitude, Y field = Latitude.
- Set Geometry CRS = EPSG:4326 – WGS 84.
- Click Add.
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:
- Right-click layer → Properties → Fields (or Attribute Form in new QGIS).
- Change fields you don’t want to Hidden.
- Set your photo field to Text Edit (or Attachment if preferred).
Edit symbology
Make your map visually clear:
- Right-click layer → Properties → Symbology.
- Try Single symbol for simple maps or Categorized/Graduated for grouped data.
- Turn on Labels if you want names shown.
Add a basemap (QuickMapServices)
- Plugins → Manage and Install Plugins… → search QuickMapServices → Install.
- Web → QuickMapServices → Settings → More Services → Get contributed pack.
- Web → QuickMapServices → choose a basemap (e.g., Stamen Toner, OSM, ESRI World Imagery).
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.
