Logo

dev-resources.site

for different kinds of informations.

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

Published at
5/3/2022
Categories
geospatial
qgis
coordinates
location
Author
chinazoanebelundu
Author
17 person written this
chinazoanebelundu
open
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 [email protected].

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.

location Article's
30 articles in total
Favicon
Handling Location Permissions in React Native
Favicon
Realtime Location Tracker & Communications
Favicon
Introducing GroupTrack: Simplified Location-Based Services for Flutter
Favicon
React Native Background Location Tracking
Favicon
Answer: Flutter geolocator package not retrieving location
Favicon
Adding location tracking to mobile apps (for Android)
Favicon
Flutter Backgroud Locator
Favicon
AR Game ~ Geospatial API ~
Favicon
AR Game ~ Location Information ~
Favicon
Unlocking the Power of Geolocation with IPStack's API
Favicon
How to implement UWB precise location system with TDOA technology(1)
Favicon
mylivelocation
Favicon
Expo GPS Location + Task Manager
Favicon
A Realtime location sharing App built with React
Favicon
Developing a Bluetooth Low energy-based application
Favicon
How to get address location from latitude and longitude in Angular15+
Favicon
Laravel 9 Get Current User Location Using IP Address
Favicon
Location without Google Services
Favicon
How to find the folder location of a command in linux?
Favicon
Search the hospitals using Huawei Map Kit, Site Kit and Location Kit in Patient Tracking Android app (Kotlin) – Part 5
Favicon
Add maps and location services to your apps
Favicon
Know your Lagos market. How to create a web map showing images with QGIS and host it for free.
Favicon
How to Automatically Fill Addresses in Lifestyle Apps
Favicon
How to fetch current location of user in Flutter?
Favicon
How To Get Current User Location In Laravel
Favicon
Create your own indoor maps using Azure Maps Creator
Favicon
Anyone Used Locator to find anyone true Location..?
Favicon
How to Get IP Address Information Using Python [2021]
Favicon
Find the Coordinates for a Location
Favicon
Geohash Open-Source library in TSQL for SQL Server

Featured ones: