export your qgis project to a webmap with qgis2leaf

Post author By Riccardo
Post categories In Data, QGIS

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 qgis2leaf plugin — GUI of the new qgis2leaf plugin

The rest will be done by the plugin:

screenshot from the output webmap — 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

0 0 votes

Article Rating

Post date 24. April 2014
Tags Export, geojson, js, JSON, leaflet, map, plugin, QGIS, qgis2leaf, share, webmap
60 Comments on export your qgis project to a webmap with qgis2leaf

This site uses Akismet to reduce spam. Learn how your comment data is processed.

60 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

Gideon

10 years ago

Great work! It seems to work quite smooth! Can’t wait for further updates!

Uttam Pudasaini

10 years ago

This seems to be an interesting project.It would have been much better if you have uploaded the data as well as steps involved in this task so that even a beginner interested in learning web mapping can use this .Thank you

Author

idea of qgis2leaf

qgis2leaf: what it does

how to use qgis2leaf

what next

Related Posts