0

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

8
  • Do you intend to use rotation or not?
    – TomazicM
    Commented Dec 5, 2022 at 10:38
  • I do not use rotation in my map.
    – Jayzz
    Commented Dec 5, 2022 at 10:40
  • One more question: if permalink requests featureInfo display, what should happen with permalink when map is moved/panned? Zoom and coordinates get updated, but what about request for featureInfo? Should this info be requested and shown upon every map move/pan? Please edit your question and clarify this.
    – TomazicM
    Commented Dec 5, 2022 at 16:35
  • When the permalink of getFeatureInfo is required, I would still like to keep and display the fixed association of the coordinates and zoom level when moving the map if possible
    – Jayzz
    Commented Dec 5, 2022 at 17:49
  • This does not answer my question about continously displaying featureInfo when moving/panning the map. And what do you mean by "display the fixed association of the coordinates and zoom level". This data is not fixed, it's updated by map.on('moveend', updatePermalink);
    – TomazicM
    Commented Dec 5, 2022 at 18:16

1 Answer 1

2

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));
1
  • Thank a lot, sir. It works as expected.
    – Jayzz
    Commented Dec 7, 2022 at 3:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.