On my Mapbox have 3 layers. id: 'Map', id:'Cluster', id: 'Point'

map.on('click', 'Point', function (e) {
    $(".page-wrapper").addClass("toggled");/*show sidebar*/
  });

This code mean when I click point on layer id: 'Point', sidebar will show.

$(".page-wrapper").removeClass("toggled");/*hide sidebar*/ 

And this code will hide sidebar when add to event.

Now, I want click any where without point on layer id: 'Point' sidebar will hidden.

How can I do that?

On my Mapbox have 3 layers. id: 'Map', id:'Cluster', id: 'Point'

map.on('click', 'Point', function (e) {
    $(".page-wrapper").addClass("toggled");/*show sidebar*/
  });

This code mean when I click point on layer id: 'Point', sidebar will show.

$(".page-wrapper").removeClass("toggled");/*hide sidebar*/ 

And this code will hide sidebar when add to event.

Now, I want click any where without point on layer id: 'Point' sidebar will hidden.

How can I do that?

• javascript
• mapbox-gl-js

Share Improve this question Follow asked Jan 26, 2019 at 8:26 AlexAlex 82711 gold badge1515 silver badges3939 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

Use the click event handler for the entire map and the preventDefault function:

  map.on('click', 'point', function(e) {
    e.preventDefault();
    console.log('show sidebar');
  });

  map.on('click', function(e) {
    if (e.defaultPrevented === false) {
      console.log('hide taskbar');
    }
  });

[ https://jsfiddle/7mfb59qo/2/ ]