2

I need to show WMS layer information and if there are some marker or other layers at the same coordinate, it should show both data of WMS layer and marker information. But when marker covers wms layer, click would not trigger getfeatureinfo to get WMS data. Is there any method to show both?

My marker:

L.marker([lat,lng], { icon: icons }).bindPopup(
         '<table><thead><tr><th>test</th></tr></thead ><tbody align="center"><tr><td>context</td></tr>'
         ).openPopup();

I write a sample on codepen: https://codepen.io/jerry820428/pen/zYKRERE

I want to trigger map.on('click') event when click the marker, that means both alert and popup would show on web.

Improve this question
  • Do you want this marker to be interactive, meaning, do you want it to react on click or mouse over? If not, just use option interactive: false when you create it. – TomazicM Dec 30 '20 at 9:07
  • I need the marker to be interactive. Both wms layer and marker has popup contents, but I don't know how to show both when I click the intersection area. When I do so, only information of marker would be displayed, wms didn't trigger click event to get layer information. – 張佑誠 Dec 30 '20 at 9:15
  • Then the simplest solution would be to catch map.on('click', ...) event, since it gets fired always, regardless of any other event handlers, tied to various layer elements. – TomazicM Dec 30 '20 at 17:32
  • I write a demo on codepen: codepen.io/jerry820428/pen/zYKRERE It seems map.on event didn't trigger when I clicked the marker. Did I miss options or something to show trigger both? – 張佑誠 Dec 31 '20 at 3:28
  • You are right, I was a bit careless when testing. I checked for several events simultaneously and then missed that it did not fire click event on map. See solution below. – TomazicM Dec 31 '20 at 9:34
1

Since mouse click event gets caught by marker popup handler and does not reach the map, solution is to fire map click event yourself inside marker click event handler.

Code could then look something like this:

marker.on('click', function(evt) {
  map.fire('click', evt, false);
});
Improve this answer
  • That's what I need !! Thanks. – 張佑誠 Jan 4 at 6:36
0

You are free to display wms and/or geojson layers as many as you need. Please notice wms uses pre-defined styles defined on mapserver or geoserver through separate .sld files but geojson layer is styled in client side through .json object.

var wmsLayer1 = L.tileLayer.wms(url1, { ... });
var wmsLayer2 = L.tileLayer.wms(url2, { ... });
var vectorLayer1 = L.geoJSON(feactures1, { ... });
var vectorLayer1 = L.geoJSON(feactures2, { ... });

var map = L.map('map', {
    center: [lat, long],
    zoom: 10,
    layers: [
        wmsLayer1,
        wmsLayer2,
        vectorLayer1,
        vectorLayer2
    ]
});

In case of displaying multiple layers, consider order of layers.

Displaying and hiding popup on markers is possible by adding listener to vector layer that capture user interactions:

vectorLayer1.on('click', this._onLayerClick);

//React JS
_onLayerClick = (e) => {
    e.originalEvent.preventDefault();
    const { mapObject } = this.state;
    mapObject.eachLayer(function (layer) {
        if (layer === e.layer) {
            layer.setStyle(touchStyle);
            layer.bindTooltip('', {
                sticky: true,
                direction: 'top',
                offset: L.point([0, -10])
            })
            layer.setTooltipContent(`Name: ${e.layer.feature.properties.name}`)
            layer.openTooltip();
            return true;
         }
    })
}

Here I explained other events.

[refrences]

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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