Open Source Interactive Mapping: A Rudimentary Introduction to the QGIS2WEB Plugin for Quantum GIS4/14/2017 Written by Eddie Curran QGIS2Web is a QGIS plugin which allows the user to export a map created in QGIS to an openlayer or leaflet format webmap. The following is a painfully simplistic tutorial in which the user creates a simple interactive map in QGIS, exports it to webmap format, and opens it in a web browser. First, (after opening the latest version of QGIS) install the QGIS2Web plugin from the "plugins" menu. An icon appears on the taskbar, one icon to the right of the "python" icon. Import layers to QGIS: Select the "add vector layer tab" in "layer" mode and browse for layers. In this case, a Portland neighborhoods layer and major river layer. The coordinate system for web mapping in QGIS is EPSG 4326, but this does not reliably work with QGIS2WEB. However, a default coordinate system, called the "User Defined Coordinate System" almost always works when exporting a map with the Q2W plugin. To make basic alterations to the imported layers, double click on their labels in the table of contents, or right click – properties. In this example, "style" is chosen and the neighborhoods are classified using a random color ramp. Right clicking on the layer in the table of contents and selecting "Set Layer CRS" will set the coordinate system: one can also click on the "General" tab in the Properties window or find the "Set CRS of Layers" menu item under the "Layers" menu in the main toolbar. Once the layers are ready, just click on the QGIS2Web plugin button and if all goes well a preview window appears with the layers displayed in it: Here you may choose from a variety of menu items to do some basic tweaking of the map. For example, how attribute values appear when counties are clicked on the map, the default scale, whether OpenLayers or Leaflet format, configuration of a search bar, etc. (the actual code is available for alteration once the map has been exported). If the layers do not appear at this point it is usually because there's a problem with the coordinate system/projection: if one layer is in the wrong CRS then none of the layers will appear. This problem can usually be solved by going back to QGIS and changing the CRS (Layer- Set CRS of Layer(s) or Ctrl-Shift-C) to the "User Defined Coordinate System": In the lower right corner of the preview window one may choose from a list of basemaps: Selected here is a basic OSM street map. This is a good place to troubleshoot the Coordinate Reference System (CRS) : if the basemap does not line up correctly the layer's CRS need to be changed. (Typically if there is a projection issue the layers won't open up in the preview window at all, but this is another opportunity to make sure they're lined up properly). In the preview window it is possible to see how the map will behave once it is opened up and manipulated in a browser: clicking on the map calls up attributes, zoom and search functions work just as they would when the map goes "live". At this step in the process one may go back to QGIS to add and alter layers, or change any of the settings in the preview window. Hitting the "update preview" tab refreshes the now interactive map prior to exporting. Before exporting to webmap, click on Data Export / Browse and decide where to save the map: this determines where the html, css, java, etc. files will be stored: To export, hit the Export button. Immediately after exporting the map, it appears in the default web browser, with all its functionality (hopefully) ready for testing. Subsequent exports will appear in adjoining browser tabs, which is useful when altering code and comparing version. To open up the new web map's files and tweak the code, navigate to the folder where the map is stored. Qgis2Map organizes the files into folders in a folder whose name reflects the time and date of its creation: this is useful as it's common to do multiple exports, which are by default stored in the chosen export folder. Open up .html .css, .js, etc. files in a text editor to work on the webmap's code, save your alterations then refresh the browser window to check on your changes. The map is ready to be published online. Advisory: It is important to update QGIS to the latest version (currently 18.6) and to update the GGIS2WEB plugin whenever neccesary, as both QGIS and its various plugins are in a constant state of development, updates are released periodically and by default not updated automatically. It is entirely possible that a "bug" which might hamper performance in one version has been exteminated in an updated version. QGIS update notifications appear upon opening the application, and plugin update notifications are available under the "plugin" dropdown menu. Support: The GIS Stack Exchange https://gis.stackexchange.com/ has active GGIS2WEB discussion threads, to which the developers contribute from time to time. Questions which are appropriately pithy and non redundant (meaning, don't be too wordy and make sure to search the website to see if your question has already been answered) are often answered with in a day or two.
4 Comments
Erin Miller
5/6/2017 07:55:28 pm
Great blog post. I really like the way you structured the tutorial in a straight forward, easy to follow manner. Adding the troubleshooting with the layer CRS and the advisory section is particularly helpful even for a basic tutorial. Overall the blog is a good starting point for exploring the QGIS2Web plugin. Thanks for sharing.
Reply
eddie
5/28/2017 02:30:01 pm
I have since then figured out how to get around the CRS issue, one can set the layers to EPSG 3857 by saving them as new shapefiles, and disabling "project on the fly". I do think OSM prefers this CRS-- through trial by error, and my present project which involves creating a Leaflet map with Q2W, I finally got the CRS issue sorted.
Reply
This is an excellent resources for creating the web map, but I've seen almost this exact tutorial in several places. My problem with them is they all stop where you have: "now the web map is ready to be published," but nobody talks about how to actually publish them. After hours of searching, I finally found a reference to the <iframe> function in an obscure comment on a forum. It would be very helpful if you could talk about putting the output of qgis2web on a website server and then actually calling it on a webpage.
Reply
Nielsen D Wagner
4/18/2018 09:48:41 am
Nice article. Straightforward and to the point. I had really struggled with this, to the extent of upgrading my QGIS version to 3.0.
Reply
Leave a Reply. |
AuthorBlog posts are written by students in the Interactive Map Design course at Portland Community College. Archives
June 2018
Categories |