Web-Based Mapping with QGIS

Web-Based Mapping with QGIS

Web-based mapping has never been easy as it is now. What would have taken several months of coding in languages such as C++, Python or Java can now be done within a few clicks lasting not more than 10 minutes.

Thanks to QGIS web mapping plugin such as: qgis2web, qgis2leaf, qgis2threejs, Lizmap and OpenLayers plugin. These plugins makes it incredibly easy to create a basic, fully-functional LeafletJS map using QGIS with no HTML, JavaScript, or CSS programming skills.

In this tutorial, am going to work you through basic process of creating your very first web-based map like this:-

So this tutorial is for all those who had always cared for the ambition of being able to create their very own web map and publish from their websites.

To archive this, follow this simple step-by-step tutorial.

Download dataset: am using the point shapefile containing states capital cities in Nigeria available at: https://www.dropbox.com/s/vmj276zrhaca2sv/WebMap_QGIS.zip?dl=0

Feel free to use whatever dataset you want to.

Step 1:
Download and install the latest version of QGIS. Mine is: QGIS 2.12.3-Lyon

Step 2:
Install any of the QGIS web map plugin. I will use the qgis2web plugin for this guide. QGIS2web is a plugin to export your project to an OpenLayers 3 or Leaflet web map. No server-side software is required.

Step 3:
From the menu bar, go to PLUGINS > MANAGE AND INSTALL PLUGINS…
Search for the “qgis2web” plugin, select it and click on “Install Plugin”.

Step 4: 

In QGIS, add your shapefiles layers of interest and style them just the way you want. Prepare your map as far as possible in QGIS, as you want it to appear in your web map.

In my case I added the cities point shapefile and the state polygon shapefile as seen below.

Step 5:

Now go to MENU > WEB and from the drop dropdown list, select "qgis2web" then select “Create Web Map”.

~ This should open a dialog displaying your map preview and settings to the left side panel.

~ For each of the layers in your project, you can show number of attributes field that will be displayed whenever mouse is clicked on a feature from the layer.

~ In the next section setup your data export location, zooming scale, and the appearance. As you make the settings, you can use the “update preview” button to see how your web map will appear.

Step 6:

If you are done, click on the “Export” button to your map into .html file with its accompanying files and folders.

Step 7:
Register a domain name and a hosting account to the contents of the folder above into your server. Your web map will then be accessible through the web address you registered.

That is it.
Post Comments if your have any.
Thanks for reading.