Quantcast
Channel: QGIS – Digital Geography
Viewing all articles
Browse latest Browse all 87

QGis Tutorial: webmap creation with QGis, QGis2leaf and GoogleSpreadsheet

$
0
0

 

Introduction

This tutorial will explain you how to create your own, interactive webmap in a fast and easy way! Such webmaps are used zo visualize e.g. adresses on digital maps. I’m using QGis 2.4 + Qgis Plugin Qgis2Leaf, google spreadsheet and a macro, wich I’ll tell you later about.

1.Data Preparation

The first step contains the data preparation. The easiest way to do that ist creating a spreadsheet with the needed columns. To realize the transition between a spreadsheet and a webmap, we need geocoded adresses, wich we will create automatically by a google spreadsheet macro. To make this operation run we need the columns called “location”, “lat” and “lon”. Fill up the column “location” with your adresses, let the “lat” and “lon” columns empty. Of course you can already fill up your further columns with information (have a look at picture 1).

Picture 1

Picture 1

2.Geocoding by using macros

Let’s have a look at the mentioned “macro” tool. Follow this Link, Riccardo already summerized, how to add this cool geocoding tool to your google spreadsheet and how to use it. Important hint: don’t use the fullHD page width of your browserwindow by visiting Digital-Geography, otherwise it could happen, that you can’t copy the entire source code ( a tiny bug of the new Digital-Geography.com fullscreen-Design :p)

3.Import to QGis

To be able to import your google spreadsheet content to QGis, you need to export it as an csv data file. To do so click “file > download as” and select the csv shape. Now open QGis, at the left edge (when you’re using the standard array, it’s also highlighted in the picture) you see a big blue comma, click this symbol to open the next window (look at pic.2) here you can selcet your csv file.

Picture 2

Picture 2

Click “OK”, a second window should appear right now, click “OK” a second time (“lat” and “lon” are automatically recognised by QGis as coordinate columns).

Picture 3

Picture 3

When everything worked fine, you should see the markings of your geocoded adresses in the output window.

4.Label styling

Of course you can use the labels given from QGis, but if you want to use your own ones, you should know that QGis2leaf doesn’t support svg-files at the moment. An easy alternative to use individual labels is to add a “icon_exp” column, in wich you have to quote the file path of your picture, label or icon (highlighted in picture 4). Watch out Windows-user! You have to swap the slashes, use such “/” instead of “\” those.

Picture 4

Picture 4

5. Export via Qgis2Leaf

Due to the wonderful plugin QGis2leaf, it isn’t neccessary to have Javascript knowledge, to generate an initial webmap. As you see on the picture, you find the plugin by hitting the buttons “extensions> manage and install extensions”.

Picture 5

Picture 5

Now a window is opening. Search for “QGis2leaf”, install, and here you go. Your toolbar is extended by a very usefull function!

Picture 6

Picture 6

Here you can see a map with a standard label:

Bild_7

And here is one with an own label:

Bild_8

Something more about Qgis2leaf.

The post QGis Tutorial: webmap creation with QGis, QGis2leaf and GoogleSpreadsheet appeared first on Digital Geography.


Viewing all articles
Browse latest Browse all 87

Trending Articles