Geoserver: Feature Editing on WebGIS using Geoserver(WFS-T service) and Openlayers
Вставка
- Опубліковано 2 сер 2024
- This video shows how to develop a WebGIS application having feature editing capability (Creation, Deletion and Updation) using WFS-T service of the Geoserver and Openlayers Library
Timeline of Video:
00:00 - Intoduction abut Video
02:36 - WebGIS Application demonstration (Editing Vector layer)
15:48 - Geoserver WFS-T service
19:29 - Application Code explanation
WebGIS HTML pages shown the video:
drive.google.com/file/d/1Z0oF...
drive.google.com/file/d/1T3sT...
This channel is very underrated and easily the best OpenLayers tutorial channel out there. Please set up a Paypal account so people can contribute to this channel.
Great video and thank you
Hello, thanks for your great videos. Is there any way to divide a feature into two features or join two features?
Also pls use the text editor like sublime text or vscode like most of the developer are using
Hello OpenGeo Lab, thank you for your great explainations of the combinations between openlayers, geoserver and PostGis (PostgreSQL). Your videos are very helpful. When i want to press the "Toggle Editing"-Button, it is only possible in developer tools interface (after pressing F12). Do you know what the reason could be? How can i access this mode without developer tools interface? Thanks a lot.
Hello, I am very thankful for this videos, can you make tutorial on plotting features using coordinate data, pick one core feature and make circular buffer(6 km) around it, clip/remove another features that doesn't include in the buffer, and then calculate the distance between core feature to other features inside the buffer. Idk if this possible, but thanks in advance really appreciate it
That is possible...can be done using WPS service of geoserver or directly using postgis spatial queries and can be rendered on map...
How to handle gml of polygon? I saw in its gml interior, exterior rings
Hello sir, First off all i would to thank you for all these videos, i have a question for you, so i have done all these steps and i would like to add a login to this webgis , can you please help me with this ? because i had tried to do it with PHP but it did'not work ? please answer me as soon as possible, thank you
when i add a polygon say Could not find coordinates to build linestring Could not find coordinates to build linestring. why cant you helpme
Hello. why i always get this error: Refused to set unsafe header "User-Agent" when i try to create or to update ?
Just comment following line of code from creation, updation and deletion request to the server, error will resolve
.setRequestHeader('User-Agent', 'XMLHTTP/1.0');
hello sir..thank you for the tutorial it is very useful..what i want to ask is, how if we make one computer as a server and the other as a client to open this application on the client computer, is there any special settings for the geoserver..thank you very much..this tutorial very helpful and very nice
Yes you can install tomcat and deploy your application on server machine...just change the localhost to IP address of the machine in the web page...
Also, you have to do following for adding password and username for editing
You can do the following;
1. Login to geoserver ...then under security tab....click.on data.. tab..give read and write access to your workspace or layer...
2. Also under security tab ..in services option..add new rule and select service wfs and method * then in roles if you select admin role username and password of geoserver will be needed for access wfs service....so if u select role anonymous all will be able to access wfs service.. or you can selct grant access to all roles.
@@OpenGeoLab sir..thank you, finally created, the update from the client computer is working..thank you very much sir
@@agungadisantosa1638 hi, is your app working properly? web editing and get info button works? can you share your code please
Greetings, first of all, thank you for the teaching and assistance in research and contribution to the growth of science. My concern has to do with the fact that it doesn't maintain the system's persistence... The system I created, based on the attached code, does everything the professor exposed, however, he only registers for about 3 hours of time after Furthermore, it no longer registers the information in the spatial database (Postgresql). Can you help me identify the problem, is this also happening to you, or have you not paid attention yet?
You mean to say you are not able to save the edits and created features I database after 3 hours...
@@OpenGeoLab The system does everything that appears in the video but after 3 hours it no longer saves the information from the database, it is as if it has lost connection with the spatial database. Here Luís from Mozambique, thank you so much.
Problem is with the geoserver setting we are not updating feature directly in database ...we are updating in geoserver...
You can do the following;
1. Login to geoserver ...then under security tab....click.on data.. tab..give read and write access to your workspace or layer...
2. Also under security tab ..in services option..add new rule and select service wfs and method * then in roles if you select admin role username and password of geoserver will be needed for access wfs service....so if u select role anonymous all will be able to access wfs service.. or you can selct grant access to all roles.
@@OpenGeoLab thank you so much for the support
Hello the 'toggle editing button' and 'get info button' does not work, so for the meantime, I enabled 'Create' function on the HTML code, so now it is clickable. But when I start creating polygons, it does not actually save my edits.
I followed your comments about allowing read write access to the 'topp' workspace and allow * service access rules in Geoserver. I also enabled CORS policy in Tomcat as per your other videos. Please advise.
PS: I recreated your buildings.shp data and store under topp workspace to test first if it will work as per your original code. I simply changed port to 8082 to 8084
Hi, wondering if u found any solution to the toggle editing button no working.. if yes, mind sharing what the solution is?
@@aimansyahmi5660 no solution yet, I simply replaced 'disabled' to 'enabled' for each button in the HTML code
Select
Create
Modify
Delete feature
What I did is to hide these button until toggle editing is clicked.
I created a DIV element. I already customized some text for my use case so pardon for that.
👆︎ Select Property
✎ Create Property
🗘 Modify Property
✖ Delete Property
+ Add a Property
function toggle_editing() {
var x = document.getElementById('WFS-Tdiv');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
hey! could you please share how you managed to get the toggle button and get feature info button work
@@_B_AbheySharma sorry mate forgot about that already. I'll try to find the modified html if I still have it. Tbh might be worth while just running it on chatgpt to fix it
Hello sir. Thank you again for your great tutorials. I have successfully completed the one on webgis from scratch and this one is the next part. Unfortunately none of button (Toggle editing, select, getFeatureInfo, and so one) is working. The WFS Layer also do not appear in the right overlay pane. Have i missed anathing i should do before in geoserver? The demo script you show, have we add them in the html code?
Can u mail me your html page???
Hey can you get the solution of this problem, actually I am facing the same problem. IF you don't mind please help me in this.
Hello Steve! I have the same problem. Could you kindly let me know how you solved the problem?
@@swarnalatha6376 sorry, didn't get a trigger on notification . Here are some paths i checked on to solve it... Give more attention to the last point (4)...... 1. Your layers name has space and special character..due to which legend images are noy rendering
2.some.layers.are in UTM and some are in epsg4326..there should be uniformity...
3. Few wfs urls still has geoserver name in it, need to be replaced with liberal/Libre.....
4. You have to Enable CORS which is blocking wfs request...you can see my recent video and.enable cors either in tomcat web.xml or in geoserver web.xml.
Also, if you are doing installation on aws PaaS server I would report, that if the Tomcat installation is done with a Java version other than 8 and 11 there is an error "Unsupported class file major version 60" . Then i had to reinstall my Tomcat.... Hope it help
@@dullknife01 thank you. I have checked all the points and everything seems okay. My map displays the WFS layer but it doesn't let me edit the layer or show the feature information. Can you please explain me if you know "Change the uri in the post request as per the workspace" means?
Hello, very nice and usefull video. i have been looking for something like this for long time. however i am unable to get to your source code link on Google drive. i get an error or it has been removed. is it possible you can make it available please. I want to do the same dyncamic vector layer editing with Ms-Sql server spatial Data. Thanks
I am still able to download the html page using the link given in description of the video...I will check it again...
Editing shown in this video does not depend on database...it depends on geoserver WFS-T service only...geoserver by default support postgis for publishing data....you can store data in sql server and publish through geoserver ..and u will be able to edit the data......see this link for installing the sql server plugin for geoserver ...using this you will be able to publish the data stored in sql server...
docs.geoserver.org/stable/en/user/data/database/sqlserver.html
Hi Bro, I have any question, how to create a shapefile from image .TIF. For using your example
You can convert raster to vector tool in qgis software for conversion..but your raster data should be thematic for that..such as classifies data..
But if you have...continous raster data..such as satellite image, DEM etc then you have to digitize or classify the data
@@OpenGeoLab excelent tutorial, thank, great from Ecuador, iam sorry for my english, i speak spanish
Hey can you help me? I’m unable to activate the toggle button.
Can you tell me why is it not working?
hi I am facing the same problem, have you solved it?
req1.setRequestHeader('User-Agent', 'XMLHTTP/1.0'); is unsave and is out..., so that`s the problem about save edit features
Pls, where do I find layout.css?
I'm unable to activate the toggle editing button and get feature info button can you please help me?
hi I am facing the same problem, have you solved it?
Sir, please help Toggle Edit, Get Feature-Info & Delete Feature, Delete, Create Tab not Working
If you are not able to save edits..change the following geoserver settings
You can do the following;
1. Login to geoserver ...then under security tab....click.on data.. tab..give read and write access to your workspace or layer...
2. Also under security tab ..in services option..add new rule and select service wfs and method * then in roles if you select admin role username and password of geoserver will be needed for access wfs service....so if u select role anonymous all will be able to access wfs service.. or you can selct grant access to all roles.
3. Change the uri in the post request as per the workspace
Also for CORS error see this video.
ua-cam.com/video/1qrikPfLBFs/v-deo.html
Hello sir . Toggle editing and get feature button is not working how to fix it ?
hi I am facing the same problem, have you solved it?
Please provide a zip file....
I am not able to save my layer in my WFS kindly help me
Problem is with the geoserver setting
You can do the following;
1. Login to geoserver ...then under security tab....click.on data.. tab..give read and write access to your workspace or layer...
2. Also under security tab ..in services option..add new rule and select service wfs and method * then in roles if you select admin role username and password of geoserver will be needed for access wfs service....so if u select role anonymous all will be able to access wfs service.. or you can selct grant access to all roles.
finally... the reason why features cannot be saved is that geoserver stores must be created in shapefile and not in postgis. Publish layers in such stores enables saving features
No if you uploading your shapefile in postgis and then publishing in geoserver as postgis store, it should save features.
Please check the first pinned comment
@@OpenGeoLab I do that, but without any result. I even try to change GML to GML2, 3, 32, base, NS....but nothing. PostData is ok, it`s sending everything what is need, but on geoserver in Geojson data`s are not complete... Tha`s why I publish file in new stores under shapefile... even it`s work under directory shapefile, but not under PostGIS... and I`m via PostGIS import same shp file into pgADMIN, becouse of storage of the features data when I edit/create new one... I will keep trying
Hello, thank you so much for your videos. They are very helpful. Could you kindly mention the reference to libraries in webgis/libs forlder or it would be very helpful if you could upload the html file along with libraries in G drive like you did for the other video. Thanks a lot again!
Sure will do that and link will be in the description of the video
@@OpenGeoLab Thanks a lot!
Hello. Is it possible to allow only users with a password to edit ?
In geoserver under security tab ..in services option..add new rule and select service wfs and method * then in roles if you select admin role username and password of geoserver will be needed for accessing wfs service....so if u select role anonymous all will be able to access wfs service.. or you can selct grant access to all roles.
Please share layout.css file.
Sir
Toggle editing button not working sir
If you are not able to save edits..change the following geoserver settings
You can do the following;
1. Login to geoserver ...then under security tab....click.on data.. tab..give read and write access to your workspace or layer...
2. Also under security tab ..in services option..add new rule and select service wfs and method * then in roles if you select admin role username and password of geoserver will be needed for access wfs service....so if u select role anonymous all will be able to access wfs service.. or you can selct grant access to all roles.
3. Change the uri in the post request as per the workspace
Also for CORS error see this video.
ua-cam.com/video/1qrikPfLBFs/v-deo.html
Hello I don't understand where I have to change the uri in the Post request. Do you mean in the "save_created()"-function?
I have 4 errors:
1) Refused to set unsafe header "User-Agent"(902)
2)Access to XMLHttpRequest at 'localhost:8083/geoserver/wfs' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.(917)
3) Failed to load resource: net::ERR_FAILED (917)
4) Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'localhost:8083/geoserver/wfs'.
at save_mod_features (file:///C:/Program%20Files/Apache%20Software%20Foundation/Tomcat%209.0_Tomcat9.1/webapps/webgis/feature_editing6.html:917:9)
at HTMLButtonElement.onclick (file:///C:/Program%20Files/Apache%20Software%20Foundation/Tomcat%209.0_Tomcat9.1/webapps/webgis/feature_editing6.html:1:1)(917)
Can you help me, please?
Enable Cross-Origin Resource Sharing (CORS) to allow JavaScript applications outside of your own domain, or web browsers, to use GeoServer.
docs.geoserver.org/latest/en/user/production/container.html
check this for enable Enable Cross-Origin Resource Sharing (CORS)
@@OpenGeoLab did not help
@@OpenGeoLab can you help me?
@@albertnuriev1999 mail me your html page..email is in about section
@@OpenGeoLab
sent, thanks a lot
I would like you to share the source code as a zip file.
thank you
Ok will give the link in the description after uploading it...
@@OpenGeoLab I am missing the libs folder
@@ahmednour6726 hi bro -- you can creat it easly
@@ahmednour6726 or if you want ? i can help you online now .
ua-cam.com/video/eAQcBGMPQTk/v-deo.html
See the description of the above video.... link for all the libraries is given..
Bro please send me the jquery.min.js file you used here
link for jquery file
drive.google.com/file/d/1DgddyjkHp6SUmRx0RsKQuoWa5gqeTxsn/view?usp=sharing
also make sure to change the workspace name and uri of workspace in the var postData i.e
'xmlns:topp="www.openplans.org/topp"
'
in above line topp is workspace name of geoserver
www.openplans.org/topp is uri given while creating workspace in geoserver
Your edits are not saving because I think geoserver is not permitting you to save.....just login to geoserver ...and in the bottom left ..click on data option....then in data security option add new rule...and select your workspace....and in layers let it be *...and in access mode select write and check grant access....it should solve your problem...
Deprecation]Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.
It is not an error it is warning ...just let it be...if u want to remove the warning just change the true to false in the post request..warning will disappear...
You can comment this line...setRequestHeader('User-Agent', 'XMLHTTP/1.0');
@@OpenGeoLab Thank you bro very very much it s working now
Hello. I tried to recreate your demo.
A. First, I used my own data and follow your advice to change geoserver ports, target workspace, layer names, and field names. However, it did not work for me.
B. Then I tried to recreate your data, same filename (buildings.shp), same workspace, and same fields. But in QGIS, I drew in Vietnam instead of US. and publish the layer in the same workspace ("topp"). But it also did not work for me. The only thing I did not follow was the port numbers as my port is 8084 instead of 8082.
For both tests A and B, when I click the "toggle editing" and "get info" buttons, both functions do not work; means it won't allow edits, and the pop-up won't work. Other functions work aside from these two. I could see my WFS buildings layer properly.
I could package my folder if you need to have a look, thanks in advanced!
My humble suggestion is pls do coding while doing the video, rather than explain the code
It is a very long code that's why I explained it...instead of writing it....
Will try to do next time...
Hi!. one question. Who is webgis that i can see in url http:8082/webgis? is a system developed ?
Tomcat is a webserver which is installed at port 8082....and geoserver and Web application (which we are Calling as webgis ) is deployed in tomcat..
Check this video for installation of tomcat and geoserver
ua-cam.com/video/64zKiHrt5PM/v-deo.html
@@OpenGeoLab Tks men! i understand. this is my scenario too.
sir i have sent you an email kindly respond
...everything is ok, but plse take the gum out of your mounth
Sorry for the voice...
@@OpenGeoLab ...something not good..., there is overlay checkbox and both files WFS_layer and population, but there is not show on the map
@@OpenGeoLab also... console show this error: VM17974:1 Uncaught SyntaxError: Unexpected token '
@@OpenGeoLab or should I import population.shp to my database?
@@OpenGeoLab ...and in Layer Preview I cant to export GeoJSON to copy