This tutorial is extracted from the online video course “Get Started with GIS and Create Web Maps”. If you want to learn GIS from scratch, you can get the full course at a discount here.
We make maps because we want to send out a message. Putting your spatial data on a web map as opposed to an offline map has the great advantage of having your map be seen and your message sent to a much wider audience. You can just spread out the URL of your web map and have people explore your beautiful maps. Even though web mapping is tightly related to programming and it has a learning curve, there are tools out there which you can use to make interactive maps quite easy. In this tutorial we will use qgis2web.
Qgis2web is a tool that turns QGIS layers into HTML, Javascript, and CSS files. You are going to learn how to use qgis2web to create an interactive web map that pops up information for the user. The final web map will look like this:
Requirements:
Data: We will use this point shapefile to map out supermarket locations and this polygon shapefile which contains population data on a block group level.
Software: We will use qgis2web which is a plugin of the QGIS software. You should first install the latest version of QGIS. Once you do that go ahead and install the qgis2web plugin from inside QGIS. To do that, that, start QGIS and go to Plugins –> Manage and Install Plugins… Then search for qgis2web and click Install plugin.
You are now ready to start creating your web map
Qgis2web reads QGIS layers and their style and converts them into HTML, Javascript, and CSS files that can be viewed from the browser. That means you first need to add your shapefiles into QGIS and stylize them the way you want. To add a shapefile, just go to Layer à Add Layer à Add Vector Layer … and then select the .shp file.
The shapefiles have a default style for now and they don’t convey any information. So, let’s stylize them. First, make sure the point shapefile is above the polygon shapefile in the Layers Panel, otherwise the polygons will cover the points and you will not be able to see them.
Let’s stylize the point layers
We will change the dots to various sizes depending on the number of employees that each supermarket represented by thee dot has. To do that, right click over the point layer in the Layers Panel and go to Properties. Then, go to the Style tab and change the style parameters so that they look like in the following picture:
Note that once you have set all the parameters, you should press the Classify button and then the OK button to close the window. The dots should now have graduated sizes:
You should now change the style of the polygons so that they represent the population count for each block group.
Again, go to the Properties for the polygon layer and then to the Style tab and set the parameters to the values you see in the following screenshot:
With the styles defined, your QGIS map is now ready to be converted into a HTML map with qgis2web. To do that, go to Web –> qgis2web and set the parameters of the qgis2web window as you see in the following picture:
Make sure you have specified an output directory in the Export Folder option. Pressing the Export button will generate an index.html file and three folders with associated Javascript and CSS files.
If you want to publish this map online, you would need to get a web hosting account and simply upload the index.html file and the three associated folders to the main public html directory. Visiting the URL of your website would then show the map you see in the first image in this article.
About the Author
Ardit Sulce, GIS and Python Expert is the founder of PythonHow.com. Sulce offers a course on Udemy called “Get Started with GIS and Create Web Maps” which is available to readers of GIS Lounge for a discount.
