GeoServer with leaflet | Application of GeoServer on web-GIS
Вставка
- Опубліковано 2 сер 2024
- This video is about the GeoServer and leaflet connection. The code used in this tutorial can be found here: github.com/iamtekson/Leaflet-...
Timestamp,
00:00 Introduction and leaflet basic setup
01:29 leaflet-geoserver-request package introduction and installation
05:39 WMS request on the leaflet
18:00 WFS request on the leaflet
27:27 WMSImage request on the leaflet
28:00 Legend request on the leaflet
1. Geoserver installation instruction: • Geoserver installation...
2. Why GeoServer (Important of geoserver): • Why geoserver ? | WMS,...
3. GeoServer crash course (All you need to know about geoserver): • GeoServer crash course...
Web-GIS courses,
1. "Web mapping and Web-GIS from Dev to Deploy 2021: GeoDjango" Get the 78% discount through this link: www.udemy.com/course/web-mapp...
2. "Introduction to Web Mapping and Web GIS 2020: GeoDjango" Get the 78% discount through this link: www.udemy.com/course/introduc...
Follow me on GitHub: github.com/iamtekson
Follow me on Twitter: / iamtekson
"Let's get shtart" I love it.
Thank you for your tutorials, it helped me a lot. Keep up the good work.
Happy to hear that! I never miss that part!
Thanks for your video! 😀
My pleasure!
great tutorial Tek. Now, you should also start teaching us how to make such node package :)
Will do soon. Thank you for the suggestion Deepu.
Thanks for the video.. great work
My pleasure
Great tutorial, thanks. When using WFS how can you query, search for features then zoom to them? I is complicated to do?
Hello,
I am using your leaflet-geoserver-request code (thank you for providing it !!!!) on a huge bunch of layers that are controled/displayed via a Layer Control.
I would like to open the according Legend each time a Layer is Added to the map.
I tried to use a layerGroup to associate both the WMS layer and it's Legend in a single Layer triggered by the Control Layer, but unfortunately I have a message that states that the "The provided object is not a Layer".
Do you see a work-around to achieve what I tent to do ???
Thank you for your help.
Regards
Raphael
I am glad to hear that this package helps you a lot. I think you have a issue on your code somewhere.
Can you reproduce your issue on the stackoverflow and share me the link?, so that I might help you.
Can you pls do a video like edit the attribute in front end of the leaflet application. Also change in attribute should reflect in the database...can you please..
Actually I already did it. You can follow this tutorial series to achieve that: ua-cam.com/play/PLyWyQBSWLw1OUfqcPzO6AceuGpC5gr-_n.html
Pardon sir, I want to ask, I'm a newbie, I want to ask. Are we actually possible to have a webmapping to collectively map something, what api or application should we use?
I recommend you to use geoserver. I have created the geoserver with leaflet basic to advance playlist in my channel, you can learn from here: ua-cam.com/play/PLyWyQBSWLw1OS7HojnpX6aogfm7LtF39S.html
can you please to develope a typescript declaration for angular? thanks
Hi, thanks for sharing this amazing tutorial. I am getting wfs data from GeoServer and the dataset is massive. My web application slows down and lags when I zoom in or zoom out. How can I increase the performance? Is there any option in your shared L.Geoserver.js to asynchronously get the data based on user interaction. Thanks once again
Hi, I suggest you to use WMS request. WFS is not the recommended way to fetch the data to web-GIS.
@@geodev But is there a way to get features from wms layer like wfs onEachFeature function?
This is super nice, and in my case, I am using react-leaflet to get the API from GeoServer. I want to get the attributes of the layers being displayed on a popup while the user clicks on any feature, I don't have any idea how to do that.
If you have any suggestions or reference, that would be very nice and helpful.
tnx
In react, you can write the code related to leaflet-geoserver-request script inside the componentDidUpdate method. I have never tried it with react before. You have to test it.
@@geodev Yeah, I solved it by creating a module. tnx
hi, i have to do the same thing..can you provide me with the code?
Thank you this is a great help for me !! Do you know for WFS import, if it is possible to get the Style create on Geoserver as for WMS ??
I am glad it helped you. Actually, the WFS will return the feature, so that you can apply the style on client side. For getting the same style you have to send the WMS request. There is no such way that will got the style for WFS standard.
@@geodev thank you for your explanations! Indeed I started with the WMS publishing but had too much issues to "popup" the underlying features.... Looks like I have to find a mixt between both solutions
@@rafiohero1 For "popup" you can use getFeatureInfo request, which is explained in the WMS crash course here: ua-cam.com/video/N_UIwXg-tg4/v-deo.html
@@geodev Hello, still working on my maps thanks to your tuto !!! managed to get everything perfectly through WFS, custom popup working good, but failed to Style the colors of my layers based on a features criteria :-(
Weather_Agencies' : L.Geoserver.wfs("15.236.29.28:8080/geoserver/wfs", {
layers: "cymo:global_view",
style: {
fillColor: function(feature) {
switch (feature.properties.severity) {
case 'Minor': return {color: "yellow"};
case 'Moderate': return {color: "orange"};
case 'Severe': return {color: "red"};
}},
opacity: "1",
} ,
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.event +
' Expires :'+ feature.properties.expires +
' Urgency :'+ feature.properties.urgency +
' Severity :'+ feature.properties.severity +
' Certainty :'+ feature.properties.certainty +
''+ feature.properties.summary +
''+ feature.properties.instruction +
''+ '' + feature.properties.link +'' );
},
}),
Any idea of what i did wrong ???
Thanks a lot for your help !!
@@rafiohero1 Can you try adding the default condition to your style switch? And please console.log to check which part of the switch case is activated.
Hello, thanks for this video. I have a little problem, I successfully rendered my OSM map based on geoserver and leaflet using WMS but I'm struggling with the leaflet routing machine, the route seems to be displayed behind the map and I don't know how to update display order through leaflet. I searched on google for solutions but I can't find someting. Do you have an idea about how I could solve my issue ? Thanks a lot.
Hi Quentin, I think you need to increase the z-index of your routing layer or decrease the z-index of the WMS map. If you want to fix it from WMS: try lower value of z-index here: github.com/iamtekson/leaflet-geoserver-request/blob/master/src/L.Geoserver.js#L8
@@geodev Hi, thanks a lot for your help, I didn't find the video again so I figured it out myself. Everything is working perfectly. I am now trying to implement everything in Angular, do you have any doc to help me ? Thanks a lot
Can we use onEachFeature function on wms requests? Or is there another way to show pop up features in wms?
There is no any onEachFeature function, but for the popups, you can use getFeatureInfo request. The way of implementing this is described in this video: ua-cam.com/video/N_UIwXg-tg4/v-deo.html
I have a 'parsererror' Error: getJson was not called, how to solve it?
how to upload user shapefile (.zip format) in map and immediately display on map please help me out
I have created the course on Udemy for this kind of function. Here is the overview of the course and if you like to buy the course, please check the video description: ua-cam.com/video/Gj3tXH37bzI/v-deo.html
Hello, when i enter git clone and this link, it says: 'git' is not recognized as an internal or external command, operable program or batch file.
How can i fix this? (I have already downloaded ZIP git file and have put it in folder where index.html is). Thank you in advance!
Please install the git: git-scm.com/downloads
It's not showing the layer in the leaflet of mine. why ? Can anyone give me a solution?
Is there any error message in console?
This will only work on localhost (only on my computer). How can I share this over the internet with others on the web? Is there any tutorial for this?
You can host the geoserver and the code in the server. After that only you will be able to share.
@@geodev Thanks. But I was wondering if there is any good tutorial on HOW to do this? I know this is possible, but I do not know how to do it.
@@majaturkalj4773 Yeah, I am also looking for such tutorial. I also want to host public. Are you able to get any tutorial on this ?
Does this work with getfeatureinfo request as well?
getfeatureInfo is the different plugin for WMS feature info. I think you need to implement this function separately
Hi, can you guide me to use this library for angular?
Sorry, I didn't use the angular before. I already included the index.d.ts file, hope this will help you.
@@geodev thank you very much
@@gocnhof1283 Are you guid me how to import leaflet-geoserver-request to component? i try import 'leaflet-geoserver-request' and it has error module leaflet
@@htc2123 me too
great Tuto but i wanna connect it with react leaflet how can i do ?
Just import it and then you can use it inside the hooks.
@@geodev how can i do ?
Hello i have problem with index html .Please send me the html code
You can find the index.html file here: github.com/iamtekson/Leaflet-Basic/tree/master/geoserver
@@geodev Thank You
@Ashwini Mondukar github.com/iamtekson/Leaflet-Basic/blob/master/geoserver/leaflet-geoserver-request.html