0

Why does the myMenu control not respond to a click?

    var map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
        maxZoom: 18, id: 'examples.map-i86knfo3' }).addTo(map);

    var myMenu = L.control({position: 'topleft'});
    myMenu.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'myMenu');
        this.update();
        return this._div;
        };

    myMenu.update = function () {
        this._div.innerHTML = "<h2>&equiv;</h2>" ;
        };

    L.DomEvent.on(myMenu, "click", function (e) {
        alert(50);
        L.DomEvent.stop(e);
        } )

    myMenu.addTo(map);
  • I appreciate the response, but FA is a nice solution to a different problem, I believe. What's wrong with the code? – user1032402 May 27 '14 at 18:08
1

If you want to get buttons displayed on your map, Leaflet has a plugin to attach a new control with a click event in one line: https://github.com/CliffCloud/Leaflet.EasyButton

For help with coding, StackOverflow generally gets better responses. Since the question's already here though, this will get your control clickable:

var map = L.map('map').setView([37.8, -96], 4);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

var myMenu = L.Control.extend({
  options: {position: 'topleft'},

  onAdd: function (map) {
          this._div = L.DomUtil.create('div', 'myMenu');
          this._div.innerHTML = "<h2>&equiv;</h2>" ;
          L.DomEvent.on(this._div, "click", this._click )
          return this._div;          
  },

  _click: function(e){
    L.DomEvent.stop(e);
    alert(50)
  },

});

map.addControl(new myMenu());

By the way, clever use of &equiv;!

  • Perfect! That works so nicely, and answers the mail. Will look harder for what you did right and I did wrong-O. (BTW, thanks, but no claim here for originality in that three-bar icon usage.) – user1032402 May 28 '14 at 0:24
  • Got the initial problem sorted: The myMenu._div was only created onAdd so it didn't exist when the on click function was declared; it needs to be added after the control is added to the map. Also, the click event should be attached to the myMenu._div instead of the control object. Hope it helps! – user3276552 May 28 '14 at 1:21

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.