Table Of Contents

Previous topic

5. Converting Text Files to Shapefile Layer

Next topic

7. Basic Map Design with Print Composer

This Page

6. Creating webmap using QGIS and Openlayers

This exercise will demonstrate how to create a simple webmap using QGIS and Openlayers. Openlayers is an free and open source javascript library that makes it “easy” to put a dynamic map in any web page. It can display map tiles and markers loaded from any source. We will compose the style of our map layers within QGIS and create an Openlayers webpage using the OGR2Layers plugin.

6.1. Compose your map in QGIS

  1. Compose the style of your map using Layer Properties for each vector layer. The example image below shows the Locations point layer as small green circles, while the Province layer shows a graduated color (yellow to red) for the number of sites for each province polygon.


  1. Disable all other layers except the Locations and Province. These are the only layers we need for our webmap.

6.2. Create a webmap using OGR2Layers plugin

  1. Open the OGR2Layers plugin window by clicking Plugins > OGR2Layers Plugin > OGR2Layers.
  2. In the OGR2Layers QGIS tab, click Browse and create a new directory for the Output directory. Use eagle_webmap as your Output directory


  1. Click the Openlayers tab. In the Map Title, type PH Eagle Sites. Select 800 x 600 as your Map Size.


  1. Click the Options tab. Select QGIS render as a Render option. Select query one feature as a Query option. Leave all other options unmarked.


  1. Click OK and then Close when the operation is complete.

6.3. View your webmap

  1. In your file manager, open the eagle_webmap directory. The directory should contain three files:
  • index.html - the webmap html
  • Locations.GeoJSON - Locations vector layer in GeoJSON format
  • Province.GeoJSON - Province vector layer in GeoJSON format
  1. Open the index.html in your web browser.