Digital Geography

24. April 2014

export your qgis project to a webmap with qgis2leaf

It was just a small idea but I haven’t slept much since it came to my mind to build a plugin fo QGIS. It should create a basic webmap from your current layers without coding and with popup functionality and changeable basemaps using leaflet. Meet my new daughter: qgis2leaf!

idea of qgis2leaf

When building a webmap with leaflet you probably start with a GIS to customize and change your geodata. We do this all the way: remove NaN points, change the projection and change position of features and much more. In the end we export the vector features to a geojson and after that we need to enhance the produced file a bit to give it a variable name. Then we write the leaflet webmap which more or less follows the same patterns:

<script src='data/places_few_1.js' ></script>
<script>
var map = L.map('map', { zoomControl:true }).setView([0,0], 2);
L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
function pop_line_feature(feature, layer) {
var popupContent = 'some text with relation maybe to the json data';
layer.bindPopup(popupContent);
}
var line_featureJSON = new L.geoJson(line_feature,{
onEachFeature: pop_line_feature,
pointToLayer: function (feature, latlng) {
return L.marker(latlng);
}
}).addTo(map);

As we are all human and we are doing failures and it consume pretty much time. And sometimes the only thing you would like to do is to share your qgis data with another one without sending/compressing dozens of shapefiles (remember the *.prj, *.dbf and all the other things). So here comes qgis2leaf.

qgis2leaf: what it does

qgis2leaf builds a webmap from all of your vector data in your current qgis project. It converts and saves them automatically in a folder structure as JSONs (reprojecting them to EPSG:4326 as well and to be exact: geoJSON), enhances them with a var XXX = and change file type to js. Then it creates the basic frame like basemap, popup content from the geoJSONs and the presentation of the layers in the map itself. The whole result is a folder structure with an index.html site which holds the webmap.

how to use qgis2leaf

First you need to install it. You might download it from github as it is still in review by the qgis team ATM (2014/04/24). You must unzip it to the plugin directory of QGIS which is “/home/yourusername/.qgis2/python/plugin/” on Linux and “C:\Users\{username}\.qgis2” on Windows machines. Enable the plugin using the dialog of QGIS (explanation on qgis.org). When you’re using the plugin you just need to define the dimension of the webmap html frame (1280×1024 is default), the basemap and the output folder name:

GUI of the new qgis2leaf plugin


The rest will be done by the plugin:

screenshot form the output webmap

what next

The next goals will be to enhance the initial view in leaflet regarding the input vector data, add a check box for the layer control and some more. If you find some feature useful: create an issue on github and let’s talk about. The big goal is to translate the style of the qgis canvas to a leaflet style… stay tuned and get involved: qgis2leaf on github