3

I have a simple Leaflet map to which I've added two functionalities:

The default map behaviour in this context shows both popups - measure popup and info popup. Screenshot:

enter image description here

I have added the code to jsFiddle.

So my question is:

How can I prevent the info popup from showing up while using the measure tool?

Edit

I managed to disable the popup by using

$( ".leaflet-control-measure" ).click(function() {
  map.off('click', layer.getFeatureInfo, layer);
});

but now I need to turn them back on. I tried using jQuery toggle(), but something weird happens to the measure button.

$(".leaflet-control-measure").toggle(function() {
  map.off('click', layer.getFeatureInfo, layer);
 } , function() {
  map.on('click', layer.getFeatureInfo, layer);
});
2
  • Leaflet.TileLayer.BetterWMS is not a well-known Leaflet plugin. Where did you get it? The solution will depend on its implementation of the popups. Commented Mar 20, 2017 at 14:23
  • I have added the url for the L.TileLayer.BetterWMS plugin in my question. I got it from GitHub. Commented Mar 20, 2017 at 14:44

3 Answers 3

2

IvanSanchez's answer got me on the right track. The L.TileLayer.BetterWMS plugin uses the following methods to enable/disable the getFeatureInfo popups:

  onAdd: function (map) {
    ...
    map.on('click', this.getFeatureInfo, this);
  },

  onRemove: function (map) {
    ...
    map.off('click', this.getFeatureInfo, this);
  },

So I had to toggle between these two states. I managed to do that by binding a click event on the leaflet-control-measure button:

$(".leaflet-control-measure").click(function() {
  var oddClick = $(this).data("oddClick");
  $(this).data("oddClick", !oddClick);
  if (!oddClick) {
    map.off('click', layer.getFeatureInfo, layer);
  } else {
    map.on('click', layer.getFeatureInfo, layer);
  }
});

I used the oddClick approach because apparently the jQuery .toggle() has been deprecated.

jsFiddle here.

1

Given the implementation of L.TileLayer.BetterWMS that you are using, you should be able to disable the getFeatureInfo clicks with something like:

map.off('click', wmsLayer.getFeatureInfo, wmsLayer);

...and enable them back again with .on. You should be doing this whenever a measurement starts/ends.

4
  • They simply detach the event handlers that BetterWMS attaches to the map. Ideally, BetterWMS should have the ability to toggle this functionality on and off, instead of being always-on and relying on this kind of hack. Commented Mar 21, 2017 at 10:48
  • You're right! Now that I look at L.TileLayer.BetterWMS, I can see the onAdd and onRemove methods. I have disabled the popups with a click on measure button, but now the tricky part is to enable them back on. Please see my edited post. Commented Mar 21, 2017 at 10:53
  • I have found the solution based on your approach.. See fiddle. Should I edit your answer and mark it as accepted or should I add a new answer and include the toggle oddclick part? Commented Mar 21, 2017 at 12:26
  • As you wish. Personally I'd prefer if you added your own answer. Commented Mar 21, 2017 at 12:45
0

You can change the css to display: none; so that the tooltips won't show eg:

.leaflet-measure-tooltip {
    font: 9px/1.25 "Helvetica Neue", Arial, Helvetica, sans-serif;
    white-space: nowrap;
    display: none;
}
.leaflet-measure-tooltip-total {
    font-weight: bold;
    display: none;
}

See jsfiddle

Edit: Just realized you're looking to disable the WMS popups not the measure: The attached jsfiddle in OP isn't showing a WMS service for me

3
  • I attribute my poor reading to not finishing my morning's coffee! In your JSFiddle I can't see the WMS? I think you can accomplish this using javascript and on click events, and change the css properties to none or display Commented Mar 20, 2017 at 14:54
  • I can see that the jsFiddle I provided is quite buggy, sometimes it loads the WMS layer, sometimes it doesn't (without changing anything in the code). When it DOES work, I can also see the getFeatureInfo requests in the Network in Dev Tools. Thanks for the javascript/css idea, I will try it. Commented Mar 20, 2017 at 15:03
  • I have edited my post, I tried using jQuery toggle(), show/hide(), and display:none, and while it hides/shows the currently open popup, when I click elsewhere on the map, other popups still appear. Commented Mar 21, 2017 at 10:31

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.