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 '14 at 17:58
  • here is the link to the html: c675325a257124ffdc93bc28deede494a365202f.googledrive.com/host/… – gomapping Dec 7 '14 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 '14 at 6:00

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.

|improve this answer|||||
  • good guess, no dice. Have you accomplished this yourself? (hosting through google drive that is?) – gomapping Dec 7 '14 at 3:35
  • @J-roc, I done an edit to my original answer which should help. – lrssvt Dec 7 '14 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. – gomapping Dec 7 '14 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 :)

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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