0

I'm trying to capture the click in the Attributions. I'd like to show a modal window instead.

But as you can see here, it's showing the attribution anyway.

$(".ol-attribution").click(function() {
    alert("It's showing the attribution anyway");
    return false;
});

Thanks in advance!

Costales
  • 2,799
  • 1
  • 17
  • 21

2 Answers2

1

The root of the problem is, that the ol3 click handler is executed before the handler you are trying to add, so probably the best way is to remove the original click listener before adding your own.

Because the ol3 listener is added by Closure library, it cannot be removed with jQuery and is unnecessarily complicated to be removed with vanilla JS, so your safest bet is to just remove all listeners on the element. This can be done by the following (a bit hacky, but I don't know a better alternative) piece of code (see Remove All Event Listeners of Specific Type):

var btn = document.querySelector('.ol-attribution button');
var btnClone = btn.cloneNode(true);

btn.parentNode.replaceChild(btnClone, btn);

Fiddle: http://jsfiddle.net/Kenny806/ds9em02a/

Another way is to collapse the attribution as soon as it expands, so from user's point of view, nothing happens. A (bit clumsy, but hopefully readable) fiddle here: http://jsfiddle.net/Kenny806/udpdohqg/1/

It works a bit unreliably in the fiddle, but works fine in my modified version of ol3 attribution example.

Community
  • 1
  • 1
Kenny806
  • 595
  • 4
  • 8
1

Do you still need the functionality of the attribution control? For me it seems like you only want a button that opens a popup when clicked. Maybe it would make sense to create a custom control, like in this example.

Do disable the original attribution control, set the property attribution on ol.control.defaults to false.

var map = new ol.Map({
  controls: ol.control.defaults({
    attribution: false
  }).extend([
    new app.CustomControl()
  ]),
tsauerwein
  • 5,841
  • 3
  • 36
  • 49