Make a webmap with QGIS - QGIS2Web 02 | burdGIS
Вставка
- Опубліковано 30 вер 2019
- The second video tutorial of three to walk you through creating a webmap with QGIS. In this video we look at making a localhost webmap with our QGIS project.
If you enjoyed this video you can support the channel and buy me a coffee using this link:
paypal.me/burdGIS
🌐 Visit our site 🌐
www.burdgis.com
🌐 Take an online GIS course 🌐
www.udemy.com/an-introduction...
🌐 Find us on facebook 🌐
/ burdgis
Use coinbase as the home for your crypto-currency:
www.coinbase.com/join/5c6d098...
You got me there in 4:29 when he said that's it. Thank you for this tutorial.
No problem Lalaine. Have you made a webmap?
Another nice video, definitely looking forward to the last part of the series!
There's only one left! I'm a bit torn on using AWS though
@@burdGIS in the past I only used Google maps for some kind of webmap on my website. I'm not an expert in website building, but always nice to look for new things.
@@Wildlifeimpulse Google maps is incredibly useful. Do look into leaflet though. It's very lightweight and a great library to explore what's possible with webmapping.
Hi man, great video and really well explained. Two questions: [1] is it possible to create tabs with different information within the popup and [2] is it possible to include a download button where the user can directly download the specific information (e.g. instead of viewing your image the user can directly download the image). Thx a lot!
Thank you so much. This exercise worked well!
Good stuff felca. Did you make a webmap?
thanks
Great tutorial!
Glad you liked it Victoria!
Thanks for the video.....Very useful. I dont know much about codes, but I will try!. Thanks
Good stuff! Trying things out is a great way to learn.
Great video & thank you for the walkthrough. Inspired me to start my own project. I'm wondering if you were able to get to the bottom of why the popup marker was displaying off to the right upon initial click? I am experiencing the same issue.
Thanks for your kind comments Ben. Post a link if you have one for your prroject. I'll happily mention it in a video.
As for the stray marker / pop up alignment I seem to recall this is a leaflet problem. It may also be browser related but I'll look into it.
Thanks for the video. For those who want to change the pictures size, it's possible to add the size instruction on the code line as following :
\
Thanks Antoine! 🙂
Its quantum, baby!
Hey Viktor. You win comment of the month! :) See the end of this video and claim your swag:
ua-cam.com/video/OsgZSlv4t-U/v-deo.html
Great tutorial - many thanks! What version of QGIS were you using at the time? Using QGIS v3.12.0 I can import the photos but the Click Photos toolbar tool no longer displays the image viewer. Looking at the path attribute, the last folder in the path has a \ instead of a / delimiter. I have corrected this and can view the image thumbnail from the attribute table but cannot get the "Click Photos" tool to work (takes no action on clicking the photo) or "Tool Tips" tools to display the photo, having set it to display the photo on mouse hover (displays an empty photo frame). Just wondering if this is an issue specific to v3.12.0 or if I am doing something wrong.
Thanks for the feedback Robin. I was using 3.4 (I like the LTR). I'll try this out with 3.12 and see what's what. I believe qgis2web was updated recently too.
Are you going to make a video showing hosting on Github and AWS? Please Please!
Could do! Which one would you like first?
Hi great video, possible to create a dashboard like add charts, filter widgets? How to host this online and not just local?
Yes it's possible to create charts etc. It would require more work on the front end with javascript etc. Check the other videos in the playlist to see how to host this online.
Great channel man. Im trying to make a webmap but my .svg images don't appear on the export map How can I fix this? Thank you, big fan of your videos
Thanks Eduardo. Svg images used as symbols for points etc? I'm not sure how map2web handles them but you might need to upload them to the server manually. Check the leaflet docs for handling Svg too. This could make a good bonus video 🤔
Hey! Great video! I have an issue where my basemap does not appear in the preview nor the map export. All that I can view are the points. Do you have a fix for this?
Hi Selena. I ran into this problem myself just the other day when using a Bing basemap. I tried switching to another basemap (xyz tiles google satellite) and it worked fine.
Great tutorial! I have a problem with the white box does not fit the picture. Do you know how to do it?
Thanks
Thanks Alessandro. Is the picture too big? You may need to resize pictures before uploading. If you can send a screenshot that be great at www.burdgis.com/contact
@@burdGIS Thank you so much for your answer! I've already resized the pic, but the white box does not adapt to the pic. Do I have to change any code in the HTML?
Thanks a lot
Hi Alessandro. Is the site live? It would be easier to trouble shoot if I could see what's happpening. You might also want tto cheeck using your browser web dev tools and inspect the element of the pop up box. Try and figure out what is determining its size and make sure your images are the expected px x px sizing looking at the file properties.
You should definitely checkout the latest filter export option for leaflet based webmaps!
Sounds exciting 😀 This video could do with an update to showcase the hard work of Tom C and co
burdGIS here is one as part of my QGIS training videos ua-cam.com/video/yYe-r8n-MR8/v-deo.html
Nice thanks for sharing :)
hi. are there a limit of mb in sending this information to the web? (google translate, sorry)
There shouldn't be. But the larger the files the longer the load time
If we wanted to have web map sourcing live data how would we do this?
Thanks for the question gerard. One way to do this would be to have the data in a database. You could also look at using something like geoserver. It usually depends on the use case.
Can we add more things after creating the website...plz make a vedio over it ...and tell how we add more features in created website
You could work more with your QGIS project, output again and reupload your files. It will overwrite anything you had there before
@@burdGIS any vedio u have made for it...if made then share link..if not then plz make
Thanks Rahul. Just go back to the first step. Use QGIS2Web to output your project and upload the new files to the server.
Can we create a dynamic website with the help qgis
You could add a map like the one produced by QGIS2Web to a dynamic website (see here www.burdgis.com/blog/map/let-wildlife-work-for-us/) but in terms of adding data etc through a website you'd likely need a framework to build a fully dynamic site along with a geoserver. Check out Flask. It's all the rage ;-)
Hi. Great video, thanks. When I click 'Create web map' I get a Python error relating to ' TypeError: cannot unpack non-iterable NoneType object'. I've limited the number of layers that are ticked to a single points layer and a Google Maps XYZ tiles layer. I have removed two attributes in the points layer that were set to 'null' by inserting some text. No luck. There is something wrong with my data, but I'm not sure what it is or how to find id. Are you able to suggest what the problem might be?
Hi guy, thanks for the detailed error report. It's tough to know what might be wrong here but if you'd like to send me a copy of the offending layer I could dig a little deeper.
@@burdGIS Sure. How should I send it to you? Thanks.
You could use the processing tool "package layers"
I followed your tutorial. All completely smooth. thanks. But on web map, my fotos are extremely big. how should i fix that?
Thanks Aung. It's probably easiest to resize the pictures themselves. I found a program (picture resizer for Windows) or something similar and you can right click the file and resize it.
@@burdGIS thanks for your kind reply. Some page don't reply, really appreciate! Actually, i don't know how to do that. As my photos are taken from drone, they are quite bit and pop-up with huge content. I tried to look for some solutions and google it. All doesn't fit.
This is the one I use www.bricelam.net/ImageResizer/
my pics are really zoomed in.... is there a solution for it?
Picture size! If you resize your pictures this will make them smaller. It has the added benefits of faster loading and taking up less space on the server. There's probably a way to do it with leaflet too (max-width property or similar)
I cannot find the _demo folder. Any tip?
Hi Simone, the _demo folder is unique to my computer. It's just where I chose to save the output files. You can choose to save yours anywhere on your computer.
@@burdGIS Thank you for your answer. I understood and solved it. It works expect the fact that Qgis2web uses different symbology than of used in qgis. I don't know why and how to fix this. Any idea, please?
Glad to hear you got it working Simone. Qgis2web has some limitations on what it can do. This will depend on the provider used. You'll be able to find out more on the Qgis2Web site here:
github.com/tomchadwin/qgis2web
How can I add my QGis project in my site?
Hi, you can create your project, run QGIS2web and then upload the files to your site! :-)
@@burdGIS thanks for your answer.
I run the HTML of my archive of qgis2web in my site but the result is only a white page. Why it happens this?
Does it work if you try and open the html file locally?
Also run your developer tools in the browser to find out more information about what might be going wrong.
@@burdGIS yes this works
it is a good video, but I simply don't like those "effects" of zooming in and out, it's rather distracting and definitely not necessary. Unfortunately so many thinks that adding all those fancy/flying/cut offs is needed to make their video attractive *____*
Thanks for watching and for the feedback! I tend to find static videos do less well. Many viewers find it helpful to get a better view of which options, buttons, filepaths etc I'm using; especially when watching videos on smartphones.
I could do a poll to see what other viewers think! 😀