How to set permalink for `featureInfo` in WMS layer

Question

I'm using this example from openlayers to update browser URL with zoom level and center. It's working fine but what I want now is to update browser URL with featureInfo of WMS layer. And when the user shares the URL map will be displayed at that zoom level/center and combined with permalink of getFeatureInfo, the information in featureInfo will be displayed without clicking on the wmsLayer again.

Is it possible to do that in Openlayers 6

Here is code for permalink:

// default zoom, center and rotation
    let zoom = 6;
    let center = [11957080.545700582, 1853274.4918984743];
    //let rotation = 0;

    if (window.location.hash !== '') {
        // try to restore center, zoom-level and rotation from the URL
        const hash = window.location.hash.replace('#map=', '');
        const parts = hash.split('/');
        if (parts.length === 4) {
            zoom = parseFloat(parts[0]);
            center = [parseFloat(parts[1]), parseFloat(parts[2])];
            // rotation = parseFloat(parts[3]);
        }
    }


let shouldUpdate = true;
    const view = map.getView();
    const updatePermalink = function () {
    if (!shouldUpdate) {
        // do not update the URL when the view was changed in the 'popstate' handler
        shouldUpdate = true;
        return;
    }
    const center = view.getCenter();
    const hash =
        '#mapne=' +
        view.getZoom().toFixed(2) +
        '/' +
        center[0].toFixed(2) +
        '/' +
        center[1].toFixed(2) +
        '/' 
        // view.getRotation();
    const state = {
        zoom: view.getZoom(),
        center: view.getCenter(),
        // rotation: view.getRotation(),
    };
    window.history.pushState(state, 'map', hash);
    };

    map.on('moveend', updatePermalink);
    // restore the view state when navigating through the history
    window.addEventListener('popstate', function (event) {
        if (event.state === null) {
            return;
        }
        map.getView().setCenter(event.state.center);
        map.getView().setZoom(event.state.zoom);
        //   map.getView().setRotation(event.state.rotation);
        shouldUpdate = false;
    });

WMS Layer something like this

var wmsLayer = new ol.layer.Image({
        source: new ol.source.ImageWMS({
            url: 'https://localhoat:1111/geoserver/geo_db/wms',
            params: {LAYERS: 'geo_db:wmsLayer', 'TILED': true, 'format':'image/png8'},
            serverType: 'geoserver',
            ratio: 1,
        }),
        minZoom: 13,
        visible: true,
    });

getFeatureInfo:

//get data
        var dataWMS = document.getElementById('info');
        map.on('click', function(evt){
            dataWMS .innerHTML = '';
            viewWMS = map.getView();
            var url = wmsLayer.getSource().getFeatureInfoUrl(
            evt.coordinate,
            viewWMS .getResolution(),
            'EPSG:3857',
            {
            'INFO_FORMAT': 'application/json',
            'FEATURE_COUNT' : '50',
            'propertyName':'name,id'
            },
            );
            // console.log(url);
            if(url){
            $.getJSON(url, function(data){
                var feature = data.features[0];
                var props = feature.properties;
                dataWMS .innerHTML = "<h5>name : </h5><p>" + props.name + "</p>" + ...
            });
            }
        })

Please see more detailed code at JSFiddle

Answer 1

You can wrap your getFeatureInfoUrl call and consequent display of info in a function and then call it on map click event and at the time of app init.

Relevant part of the code could then look something like this:

function showInfo(coord, resol) {
  var dataWMS = document.getElementById('info');
  var url = wmsLayer.getSource().getFeatureInfoUrl(
    coord,
    resol,
    'EPSG:3857',
    {
      'INFO_FORMAT': 'application/json',
      'FEATURE_COUNT' : '50',
      'propertyName':'name,id'
    },
  );
  if(url) {
    $.getJSON(url, function(data) {
      var feature = data.features[0];
      var props = feature.properties;
      dataWMS.innerHTML = '<h5>name : </h5><p>' + props.name + '</p>' + ...
    });
    }
  else {
    dataWMS.innerHTML = ''
  }
}

map.on('click', function(evt) {
  showInfo(evt.coordinate, map.getView().getResolution());
})

showInfo(center, map.getView().getResolutionForZoom(zoom));