I am wondering how to host the results of the plugin qgis2leaf on google drive to create a free hosted webmap?

Here is an example: https://39b425ec138a1e68ecbac84487470661e6b8b943-www.googledrive.com/host/0B5ETLwh9h00iX1YyU01tNk1wU0U/

They said they created that map with qgis2leaf and it is hosted on google drive. I can get my data on google drive and the box for the map shows up but the contents of the map are not there.

  • 1
    Can you post a link to a sample/subset of your data plus the HTML file?
    – R.K.
    Dec 6, 2014 at 17:58
  • here is the link to the html: c675325a257124ffdc93bc28deede494a365202f.googledrive.com/host/…
    – jtgis
    Dec 7, 2014 at 3:37
  • 1
    Can you put more details on how you uploaded your data to the Google Drive? The details count. That way we can give more meaningful answers. It would also help if you could post your data or the subset of your data so we can try to do experiments on your data.
    – R.K.
    Dec 7, 2014 at 6:00

2 Answers 2


Checking out if you get some error using some web development tool (like firebug). If you are getting a blocked mixed content error (usually I got this) then it is very simple to solve. Have a look at this link. Basically you should remove the protocol (http) from the source link for jquery and leaflet by editing your index.html file:


<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.js"></script>


<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.js"></script>


I would clarify my answer here as I just re-tried it and I can give you one more hint in order to get it working. In general you will have to replace relative path to source file with the links that you generate by google drive. Qgis2leaf plugin puts in *.css or *.js folders some file for stylesheet and javascript source and you will have to reference them in the same way how you do for the index.html file by sharing and associating them the own ID in the URL. Here is a small sample of my code:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.css" />
<!-- was href="css/MarkerCluster.css" -->
<link rel="stylesheet" href="https://dce1fbfb4e8600676b0f63db33401bd643722ba2-www.googledrive.com/host/0B7r_uOlr1SKVcUlfYnl1OEpKNUU" />
<!-- was href="css/MarkerCluster.Default.css" -->
<link rel="stylesheet" href="https://b833ff9da91a00091c3e7dd4510603f6bf3dc568-www.googledrive.com/host/0B7r_uOlr1SKVS3N1dXl5dDdSbkE" />
<!-- was href="css/own_style.css" -->
<link rel="stylesheet" type="text/css" href="https://b82437748148c39cf3e4fc58dbdaba49aa9581e7-www.googledrive.com/host/0B7r_uOlr1SKVSk5hcVdLUFJUNTQ">

You can take a look at the source in my example to see how I did it. It is not straightforward but it works.

  • good guess, no dice. Have you accomplished this yourself? (hosting through google drive that is?)
    – jtgis
    Dec 7, 2014 at 3:35
  • @J-roc, I done an edit to my original answer which should help.
    – lrssvt
    Dec 7, 2014 at 10:12
  • yay! it worked! only one funny thing that i am going to have to play around with a bit more. the map i made has a raster overlay and the opacity slider does not show up...but anyway thanks for your help.
    – jtgis
    Dec 7, 2014 at 18:33

addition : in googledrive, you can also use "relative" path, so it become easier to control.

<link rel="stylesheet" type="text/css" href="https://d1e6603bea57264759d40e1d7abae67881971e90.googledrive.com/host/0B7WgyvVpIg_GfnRLenpyMTluY085anpBM2FsaDBxSTVXd05OTmRwNnFRWGlFRWRVSm9BakU/own_style.css">
<link rel="stylesheet" type="text/css" href="https://d1e6603bea57264759d40e1d7abae67881971e90.googledrive.com/host/0B7WgyvVpIg_GfnRLenpyMTluY085anpBM2FsaDBxSTVXd05OTmRwNnFRWGlFRWRVSm9BakU/label.css" />

so,here just the shared folder link/"filename" is needed :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.