Add FeatureInfo Popup functionality in your Openlayers web mapping application.

This video will help you adding custom FeatureInfo Popup in your Web Mapping application.

Recommended books for GIS Development

1. Openlayers for Beginners

2. Mastering Openlayers

3. Geoserver for Beginners

4. Mastering Geoserver

5. Innovative Software Development in GIS

You may prefer watching our other videos in GeoServer.

1. Installing GeoServer in Windows computer

1.1 Installing GeoServer with Tomcat server

2. Publishing a shapefile using GeoServer

3. Styling GeoServer layer using SLD method, using QGIS to create SLD

4. Styling GeoServer layer using CSS method

5. Grouping layers in GeoServer

6. Styling GeoServer layers with GeoStyler

7. Installing PostgreSQL on Windows Operating System

8. Importing Shapefiles into PostgreSQL and publishing WMS services using GeoServer

9. Developing your First Web Mapping Application.

10. Layer Switcher in OpenLayers Web Mapping Application

11. Showing Mouse Position in Lat-Long and Scale bar in Web Mapping Application.

[HaliruyaOS]

Thanks for your job! It helps me a lot

[prof.biplabbiswas]

Excellent tutorials by you. Many Thanks. However, if you can provide the scripts for not so pro (like me) in Coding, that would be amazing help. Thanks again

[yearsago]

for those who are getting error
i have some clues,
1. at "const url = "
here use your source from the layer your rendered

2. at 'propertyName': 'State, District'
enter the correct name of the feature u can get its name from layer preview
same goes for " content.innerHTML="state name: " + props.State_Name+"
for me its State_Name (these are not layer name so dont take that. u can find these in layer-> click the layer you want to render->Feature Type Details-> property names )

3.get your correct EPSG from layer . u can find it in layer-> Native SRS

[ShaM-fheh]

Thank you for very clear functionality. I wonder if you can show how to popup an image on click?

[johnbenofucho]

For popup error, set projection to 4326 i.e projection: 'EPSG:4326' in the mapView variable

[hiworld]

Hi,
I want to get feature info pop for multiple raster layers can you please tell me how to do that?
I tried but I am getting an error

[kishankushwaha]

Hello, first thanks for your job. Actually here I am finding error that the information of features can not extracted from feature, it's shows feature [] null. So, you have an any idea what can I do in this condition?

[ankeshpatel]

Can you share .html, java script and styling code please

[mohamadoulaminou]

I followed the tutorial but I have this error message on two different pc : 'Uncaught TypeError: feature is undefined'.
What could be the concern at this level?
here is the script of the function :
if (url){
$.getJSON(url, function(data){
var feature = data.features[0];
var props = feature.properties;
content.innerHTML = "<h3> Id : </h3> <p>" + + "</p><br><h3> Commune : </h3> <p>" + props.nom.toUpperCase() + "</p>";


})
} else {

}

[HQV-]

My popup can't show, please help me.

[Killerofnoob]

hello thanks for your job ! Your code doesn't work for me. I have a TypeError can't access property "x" of "y". I'm not sure but it seems that in my side the click don't find the coordinate. Have you an idea ? Thanks for all

[geomaticanet]

the popup doesn't show for me, the code is fine.

[TugceTay]

Hello, what could be the cause of the // Could not load content for webpack://ol/src/Map.js (Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME )// error? can you help me please?

[vinamrakaushik]

hello sir, i am sharing a screen shot, having these errors
if (url){
$.getJSON(url, function(data){
var feature = here is the error is coming thart feature is null, please suggest something;
var props = feature.properties;
content.innerHTML = "<h3> Id : </h3> <p>" + + "</p><br><h3> Commune : </h3> <p>" + props.nom.toUpperCase() + "</p>";


})
} else {

}