PopUp not showing

Question

I'm trying to show some attributes by popup, following a YT video, but cant seem to get it working. Please help me understand what am doing wrong..(features stored in geoserver)

The code is Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGIS App</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/ol@v8.2.0/dist/ol.js"></script> -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.2.0/ol.css">

    <link rel="stylesheet" href="main.css">
    <!-- <link rel="stylesheet" href="/resources/ol-layerswitcher.css"> -->
    <!-- <script src="resources/ol-layerswitcher.js"></script> -->
    <link rel="stylesheet" href="https://unpkg.com/ol-layerswitcher@4.1.1/dist/ol-layerswitcher.css" />
</head>
<body>
    <div id="map"></div>
    <div id="popup" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
        <div id="popup-content"></div>
    </div>
    <script src="main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol@v8.2.0/dist/ol.js"></script>
    <script src="https://unpkg.com/ol-layerswitcher@4.1.1"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</body>
</html>

main.js

var IndiaTile = new ol.layer.Tile({
    title: "India States",
    source: new ol.source.TileWMS({
        url: "http://localhost:8080/geoserver/WS_Mine/wms",
        params: { 'LAYERS': 'WS_Mine:India_State', 'TILED': true },
        serverType: 'geoserver',
        visible: true,
    })
});
// map.addLayer(IndiaTile);
var IndiaTile2 = new ol.layer.Tile({
    title: "India Country",
    source: new ol.source.TileWMS({
        url: "http://localhost:8080/geoserver/WS_Mine/wms",
        params: { 'LAYERS': 'WS_Mine:India_Country', 'TILED': true },
        serverType: 'geoserver',
        visible: true,
    })
});
var OverlayGroup = new ol.layer.Group({
    title: "Overlay Maps",
    fold:true,
    layers: [IndiaTile, IndiaTile2]
})
map.addLayer(OverlayGroup);
var container=document.getElementById('popup');
var content=document.getElementById('popup-content');
var closer=document.getElementById('popup-closer');
const popup = new ol.Overlay({
    element: container,
    autoPan: {
      animation: {
        duration: 250,
      },
    },
  });
map.addOverlay(popup);
closer.onclick=function(){
    popup.setPosition(undefined);
    closer.blur();
    return false;
};
map.on('singleclick', function(evt) {
    content.innerHTML = "";
    var resolution = mapView.getResolution();
    var url = IndiaTile.getSource().getFeatureInfoUrl(evt.coordinate, resolution, 'EPSG:3857', {
        'INFO_FORMAT': 'application/json',
        'propertyName': 'state,district'
    });
if (url) {
    $.getJSON(url, function(data) {
        var feature = data.features[0];
        var props = feature.properties;
        content.innerHTML = &quot;&lt;h3&gt;State: &lt;/h3&gt;&lt;p&gt;&quot; + props.state.toUpperCase() + &quot;&lt;/p&gt;&quot; +
                            &quot;&lt;h3&gt;District: &lt;/h3&gt;&lt;p&gt;&quot; + props.district.toUpperCase() + &quot;&lt;/p&gt;&quot;;
        popup.setPosition(evt.coordinate);
    })
} else {
    popup.setPosition(undefined);
}

});

main.css

.ol-popup {
position: absolute;
background-color:white;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 280px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color:#cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content:"X";
}

Any errors in the browser debugger console or network section? — TomazicM, Dec 21 '23 at 08:06
@TomazicM Access to XMLHttpRequest at http:// localhost:8080/geoserver/WS_Mine/wms?REQUEST=GetFeatureInfo&QUERY_LAYERS=WS_Mine%3AIndia_State&SERVICE=WMS&VERSION=1.3.0&FORMAT=image%2Fpng&STYLES=&TRANSPARENT=true&LAYERS=WS_Mine%3AIndia_State&TILED=true&INFO_FORMAT=application%2Fjson&propertyName=state%2Cdistrict&I=164&J=125&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&BBOX=7827151.696402047%2C2661231.576776698%2C7983694.730330088%2C2817774.610704739 — SaFaL, Dec 21 '23 at 10:14
@TomazicM .... from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. localhost:8080/geoserver/WS_Mine/wms?REQUEST=GetFeatureInfo&QUERY_LAYERS=WS_Mine%3AIndia_State&SERVICE=WMS&VERSION=1.3.0&FORMAT=image%2Fpng&STYLES=&TRANSPARENT=true&LAYERS=WS_Mine%3AIndia_State&TILED=true&INFO_FORMAT=application%2Fjson&propertyName=state%2Cdistrict&I=164&J=125&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&BBOX=7827151.696402047%2C2661231.576776698%2C7983694.730330088%2 Failed to load resource: net::ERR_FAILED — SaFaL, Dec 21 '23 at 10:15
You have to enable CORS on your Geoserver. This might help: https://gis.stackexchange.com/questions/210109/enabling-cors-in-geoserver-jetty — TomazicM, Dec 21 '23 at 10:41
@TomazicM That error is gone now, but popups are still not loading.. — SaFaL, Dec 22 '23 at 04:32
For me your code (with different WMS) works without problems, so there must be something wrong with your WMS source. — TomazicM, Dec 22 '23 at 21:11

PopUp not showing

0 Answers0