WebGIS Development from scratch using Openlayers/Leaflet & Geoserver with feature query capability

This video shows how to create webGIS application using Openlayers/Leaflet and Geoserver from scratch.
GeoServer:
GeoServer is an open source server for sharing geospatial data. GeoServer implements industry standard OGC protocols such as Web Feature Service (WFS), Web Map Service (WMS), and Web Coverage Service (WCS). Additional formats and publication options are available as extensions including Web Processing Service (WPS), and Web Map Tile Service (WMTS).
OpenLayers:
OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles, vector data and markers loaded from any source. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free.
Leaflet:
Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 42 KB of JS, it has all the mapping features most developers ever need.
Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of plugins has a beautiful, easy to use and well documented API and a simple, readable source code that is a joy to contribute to.
Leaflet is a good alternative of OpenLayers library
Web application source code - Openlayers
drive.google.com/file/d/1AnkD...
Web application source code - Leaflet
drive.google.com/file/d/1xRd2...
For learning WebGIS development using opensource tools, Google Earth engine, GIS, Image analysis, Please contact at - opengeolab4@gmail.com
Video timeline:
00:00 - Introduction
03:25 - Demo of WebGIS application
13:38 - Download and Install Tomcat
18:10 - Deployment of Geoserver in Tomcat
20:36 - Deployment, configuration and explanation of the WebGIS application.

Пікірлер: 63

  • @aihackathongr
    @aihackathongr2 жыл бұрын

    Thank you for these excellent tutorials!! Be well and keep it up!! :)

  • @kevinsambuli6746
    @kevinsambuli67462 жыл бұрын

    Thanks for this detailed tutorial Keep up

  • @alifurunusaina4001
    @alifurunusaina40012 жыл бұрын

    Best.. Thanks very much

  • @eduardcureg2593
    @eduardcureg2593 Жыл бұрын

    Thanks much sir!

  • @chickhunter10027
    @chickhunter100272 жыл бұрын

    Thank you sir. Great video. Could you please make a video about adding charts (dashboard) to this webGis App?

  • @anasseelqour340
    @anasseelqour340 Жыл бұрын

    hello sir ! I hope you are well I am a master student in GIS development I appreciate what you have done it has helped me a lot to carry out part of my end-of-study project really thank you I will be grateful to you all my life. in short, my question: can you add in the continuity of video how then add modify delete the attribute data and the spatial data after having imported the layer in on the map. thanks in advance Cordially

  • @redouanemanaa
    @redouanemanaa2 жыл бұрын

    Thanks for your Video. How can we implement user profiles sessions to restrict some functions depending on user profile type?

  • @syedzakria7308
    @syedzakria73082 жыл бұрын

    Thanks sir

  • @guibalnicolas7463
    @guibalnicolas7463 Жыл бұрын

    Hello sir ! Thank you for this wonderful tutorial. I wanted to know if it's possible to do the same but with Cesium instead of Openlayers/Leaflet to have some 3D capabilities ?

  • @eserbora411
    @eserbora41111 ай бұрын

    Thank you, it's a great video. I have a question; when I select attributes from the map, it doesn't restrict or zoom in according to the selected values. What could be the reason for this, in your opinion?

  • @JAZZMAINAWABBS
    @JAZZMAINAWABBS Жыл бұрын

    Hello Boss, You are awesome , your tutorials are very helpful and am already using them. I have a few problems though 1. I cannot see my other layers althought they are in the georserver and have imported them using postgis 2. and the getfeature info is not working for me any advice ?. or anything I am missing ?

  • @user-eb5jc5tf5r
    @user-eb5jc5tf5r8 ай бұрын

    Hello, Can anyone tell me why I am not getting any layer on the application page (index.html) even by updating the workspace name in map.js file, I checked in the source file everything is updated and did refresh but still not getting any WMS and other layers on the application page, can someone guide me?

  • @syedzakria7308
    @syedzakria73082 жыл бұрын

    Thanks you sir. For sharing knowledge. please sir add code for When I check the layer checked box shows in the legend. When i uncheck it Disapear from legend.

  • @flimingo1616
    @flimingo16162 жыл бұрын

    nice video, sir plz add spatial query feature and buffer selection for your new video

  • @OpenGeoLab

    @OpenGeoLab

    2 жыл бұрын

    Will try to do that...

  • @manuelndebele4282

    @manuelndebele4282

    2 жыл бұрын

    @@OpenGeoLab i would love to see that too, some common spatial queries

  • @debobratasadhukhan5517
    @debobratasadhukhan5517 Жыл бұрын

    how to upload kml in point line and polygon in openlayers or leaflet pls make a video on it and it will automatic zoom to the kml or a tool to zoom in can u please help me on it 😊

  • @thanhnguyetnguyen8423
    @thanhnguyetnguyen84232 жыл бұрын

    Thanks for this detailed tutorial!!! Can you make a video on how to add images to the shapefile like the 4:31 of this video???

  • @OpenGeoLab

    @OpenGeoLab

    2 жыл бұрын

    Sure will do that..

  • @thanhnguyetnguyen8423

    @thanhnguyetnguyen8423

    2 жыл бұрын

    @@OpenGeoLab Thanks very much

  • @thanhnguyetnguyen8423

    @thanhnguyetnguyen8423

    2 жыл бұрын

    I regularly watch your videos published, and I look forward to your videos on how to add images to shapefiles like this one.

  • @gayathri2553
    @gayathri255310 ай бұрын

    even the internet is there search bar is not working, how should i correct it

  • @erelife5038
    @erelife5038 Жыл бұрын

    when log in to geoserver it shows invalid password, but i tried with the exact same username and password

  • @SharvariNagraj
    @SharvariNagraj2 жыл бұрын

    Anyone who can suggest how to go about hosting this online?

  • @malshi6108
    @malshi6108Ай бұрын

    WMS layers are not showing

  • @gabrieletech
    @gabrieletech2 жыл бұрын

    hi, thanks for this tutorial, if I want add on this map also cesium view?

  • @OpenGeoLab

    @OpenGeoLab

    2 жыл бұрын

    There is 3rd party Cesium plugin of openlayers...I had tried that...I was able to switch between 3d globe and 2d..map..only wms and wfs layer was not visible on 3d..globe...I will give the link of that html and js page in the description of video..in a day or two..

  • @gabrieletech

    @gabrieletech

    2 жыл бұрын

    @@OpenGeoLab ok thanks

  • @gabrieletech

    @gabrieletech

    2 жыл бұрын

    @@OpenGeoLab hi, can you send me the link? Thanks!

  • @gayathri2553
    @gayathri255310 ай бұрын

    while I was adding the shapefiles in the geo server store ,the projection system was unknown ,how should i change it

  • @OpenGeoLab

    @OpenGeoLab

    10 ай бұрын

    you have to give the EPSG code of the Projection, you can see the projection in the .prj file of the shapefile or you can open the shp in QGIS and other gis software and check the projection of the shp. further you can search the EPSG code of the projection on google.

  • @gayathri2553

    @gayathri2553

    10 ай бұрын

    @@OpenGeoLabtq soo much its working now

  • @santhipsengottuvel
    @santhipsengottuvel2 жыл бұрын

    Every thing in this video is awesome sir but load layer in query panel had not working is there any steps to make rectify this

  • @OpenGeoLab

    @OpenGeoLab

    2 жыл бұрын

    Have you changed the port no...as per tomcat installation?? Also, right click on the webpage and click on inspect...further click on console...and see the what is the error it is showing when you hit the query button..

  • @santhipsengottuvel

    @santhipsengottuvel

    2 жыл бұрын

    @@OpenGeoLab yes sir i had changed my port. Thank you sir for your respond i shall try it

  • @santhipsengottuvel

    @santhipsengottuvel

    2 жыл бұрын

    Its showing all the attributes as per in data but while running. It doesnt select in map what are all the data I had given in wuery pannel

  • @trusteddownloads9494
    @trusteddownloads94942 жыл бұрын

    sir, can you sir layers file too ?

  • @BeYob
    @BeYob2 жыл бұрын

    Are you available for project? I don’t know what your front end experience is but we’re looking to add another dev for a short term project

  • @OpenGeoLab

    @OpenGeoLab

    2 жыл бұрын

    I am available part-time..but I want you to know that .. I am not a Hard core developer....I am a GIS professional with bit of experience of Web GIS development using open source tools..

  • @BeYob

    @BeYob

    2 жыл бұрын

    @@OpenGeoLab perhaps, you could help us once we’re nearing the finish line - 70% of our endpoints are completed . Once backend is done, you could look at it to see what route we should be taking. For mobile apps we’re going with google maps api and for website we’ll probably go postgis

  • @BeYob

    @BeYob

    2 жыл бұрын

    @@OpenGeoLab where can I reach you?

  • @OpenGeoLab

    @OpenGeoLab

    2 жыл бұрын

    My email is in about section of channel..

  • @OpenGeoLab

    @OpenGeoLab

    2 жыл бұрын

    opengeolab4@gmail.com

  • @gisknowledge4849
    @gisknowledge48492 жыл бұрын

    Thank you sir for sharing your knowledge with us. Sir I followed up your code. It was explained very well. But I got an error when I intersecting layers, following error is showing in console: VM292:1 Uncaught SyntaxError: Unexpected token at JSON.parse () at uS (JSONFeature.js:202:25) at n.readFeatures (JSONFeature.js:55:7) at a.onload (featureloader.js:106:20) I can't handled it out, please tell me how can I rectify it.

  • @OpenGeoLab

    @OpenGeoLab

    2 жыл бұрын

    You may check the field name of the geometry column in geoserver(the_geom or geom) for the layer and same name should be in the WFS link which is used in the code to access the layer. Also this error sometime appears due to old version of Java.. please update Java version also..

  • @syedzakria7308
    @syedzakria7308 Жыл бұрын

    sir please work on point layer animation just blinking layer please sir reply

  • @syedzakria7308

    @syedzakria7308

    Жыл бұрын

    please reply sir

  • @Tech.Library
    @Tech.Library5 ай бұрын

    where can we get the full source code?

  • @OpenGeoLab

    @OpenGeoLab

    5 ай бұрын

    Link is in the description Openlayers drive.google.com/file/d/1AnkD-h-aYdZrNkjXda1PGtNypCoQq021/view?usp=sharing Leaflet drive.google.com/file/d/1xRd2UYi6Za_RzcZ6HoFLCOYSV0E225-I/view?usp=sharing

  • @Tech.Library

    @Tech.Library

    5 ай бұрын

    @@OpenGeoLab ok thank you i want to develop a webGIS app for solid minerals or for Flight navigation. Is this possible with the tools you describe? Please give me a guide

  • @prats22
    @prats229 ай бұрын

    give your shape files

  • @syedzakria7308
    @syedzakria7308 Жыл бұрын

    please reply sir

  • @syedzakria7308
    @syedzakria73082 жыл бұрын

    reply please

  • @OpenGeoLab

    @OpenGeoLab

    2 жыл бұрын

    I will try to change and revert

  • @syedzakria7308

    @syedzakria7308

    2 жыл бұрын

    @@OpenGeoLab change and revert please sir

  • @ahmednour6726
    @ahmednour67262 жыл бұрын

    Access to XMLHttpRequest at 'localhost:9090/geoserver/wfs?request=getCapabilities' from origin 'localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

  • @OpenGeoLab

    @OpenGeoLab

    2 жыл бұрын

    Check this video for solving problem kzread.info/dash/bejne/Y6Wmy82Jlq-odtY.html

  • @ahmednour6726

    @ahmednour6726

    2 жыл бұрын

    @@OpenGeoLab there is still the same problem because it blocks the view request i am using Xampp and the geoserver in port 9090 so i would like to have a solution thank you

  • @jaygohil2020
    @jaygohil2020 Жыл бұрын

    We need your support in project .how to connect with you? Pls share your contact.

  • @syedzakria7308
    @syedzakria7308 Жыл бұрын

    Thanks you sir. For sharing knowledge. please sir add code for When I check the layer checked box shows in the legend. When i uncheck it Disapear from legend

  • @syedzakria7308
    @syedzakria7308 Жыл бұрын

    Thanks you sir. For sharing knowledge. please sir add code for When I check the layer checked box shows in the legend. When i uncheck it Disapear from legend

Келесі