DEV Community

Cover image for Know your Lagos market. How to create a web map showing images with QGIS and host it for free.
Chinazo-Anebelundu
Chinazo-Anebelundu

Posted on • Edited on

Know your Lagos market. How to create a web map showing images with QGIS and host it for free.

Major Markets in Lagos

Note that I lay no claims to any of these images as they were all obtained from the internet.

In this article, you will learn how to create a map, similar to the one above, that displays locations of interests showing their images. You will also learn how to convert the map into a web map and host it, all on QGIS software.

Specifically, I will show you how I created a web map showing all the major markets in Lagos state, Nigeria. Once you learn the steps, you can replicate it with any project of your choice.

QGIS is a free and open-source cross-platform desktop geographic information system (GIS) application that supports viewing, editing, printing, and analysis of geospatial data. QGIS allows for analysis of different of geospatial file formats. Please read further on geospatial file formats here.

For this article we will learn how to:

1) Define your project goal.
2) Source images on the internet.
3) Geotag images.
4) Create a web map in QGIS
5) Host the web map for free.

Note that there are numerous ways to achieve the same result. This is just the way I did mine.

Major Markets in Lagos

  1. Define your project goal
    For me, I was casually strolling through the streets of social media when I stumbled upon a post that listed all the major markets in Lagos. Immediately, I thought of how I can improve on it and make it readily available to a wider audience. That was how I defined my goal to create a web map that will show all the major markets in Lagos while displaying images to depict the category of goods sold. I made a list of major markets in Lagos from that post, including the comment section.
    Action: Define a project goal and draw a list.

  2. Source images on the internet
    Armed with a list, I went to the internet to source images to represent each major market. For example, for baby wear market at Dosunmu - Lagos Island, I simply browsed for a picture of babywear market and saved. I also made sure the images represented the typical Nigerian market. Nothing foreign or artificial.
    Action: Source images that represent each category. Ensure they are in jpg or jpeg format.

  3. Geotag images.
    This means adding coordinates (longitude and latitude) to images. I geotagged the images with the coordinate of the market. To geotag the images, I used a software called Geosetter. Watch how on YouTube.
    Action: Geotag and save the images in a folder.

  4. Create a web map in QGIS.

I will break this down in steps.

Step 1: Install QGIS software on your computer and launch.
Step 2: Select a basemap.
Step 3: Click on plugins in the menu bar and search for ImportPhotos plugin. After installation, two icons will appear on your task bar

Image description

Step 4: Click on the first of the two icons and select the Input Folder Location (folder housing geotagged images) and Output File Location (where the output will be placed) and click ok. Once there are no issues plus a relatively small number of images, this runs under 5 seconds

Image description

Major Markets in Lagos

Step 5: Right-click on the image layer and select properties. Here, you can customize the picture markers to suit you. Click on the second of the two photo icons then click on each of the marker to view the images.
Step 6: Go to plugins and install qgis2web. After installation, click on Web - qgis2web - Create web map. In the interphase that shows, select leaflet below and preview the web map by the right.

Image description

Step 7: Click export. The web map will open on a browser. Note that the web map is not hosted at this stage and will not display beyond your personal browser.
Action: Follow this YouTube video for guidance.

  1. Host the web map for free. Sign up on infinityfree.net and create an account. You can create up to three accounts under your username Action: Follow this YouTube video for guidance.

Major Markets in Lagos

Tips to help you navigate the map.

  • Click on any of the orange dots/marker to view the image.
  • When the image opens, the name of the image describes the type of goods sold in the market.
  • When you close the image, note the location of the dot/marker on the map. This helps you find your way to the market physically.
  • To pan the map from a laptop, left-click and hold with your index finger then drag the map in different directions - Left, Right, Up, Down.
  • Use the + and - icon to zoom in and out of the map.
  • Use the search icon (below the - icon) to search for a keyword. For instance, while searching for Okirika, the images that have the name will pop up. You can click on the pop up to take you to the particular dot so that you can view the details.

This web map is not an exhaustive list of all the major markets in Lagos. If you need me to update the map with a market that is missing from it, kindly send me a mail on stillmem.kyrian@gmail.com.

Please note that you will have sourced the image. You may or may not geotag it. So your email should have samples of images representing the markets that you want me to update on the list.

Thank you for reading.

Top comments (0)