CODEWITHSUNDEEP
javascripthtmlcssmapboxmapbox-gl-js
SERG
SERG

Reputation: 3971

Pass drag event from div to mapbox layer

Here is a jsfiddle https://jsfiddle.net/jes4fggd/. I want to move the map, but as the div follows the mouse pointer looks like the event is catched by div. I want to pass this event to map when the mouse is over the div or buttons. I want only click event is available for buttons but drag is for map. I tried to use voteDiv1.style['pointer-events'] = 'none'; but it is kind of tricky for me. Is there any simple way? Thanks.

var voteDiv1 = document.getElementById('vote1');
map.on('mousemove', function (e) {
    var c = map.project(e.lngLat);
    console.log(c)
    voteDiv1.style.left = (c.x) -50 + 'px';
    voteDiv1.style.top = (c.y) -50 + 'px';
});

and another example https://jsfiddle.net/q3ghvuu3/ - how to move a map or click a button in this way?

Upvotes: 1

Views: 1488

Answers (1)

Brett DeWoody
Brett DeWoody

Reputation: 62861

Confused about what you're going for based on the description but here's my best guess:

  • Clicking the map should drag the map as expected
  • Clicking the button should click the button as expected
  • Moving the cursor around the map should move the button around the map
  • Clicking and dragging the button should drag the map (not expected by most users)

I'll reiterate my initial concerns that this UI is a bad idea. Users are familiar with seeing buttons overlaid on maps, like zoom buttons on Google Maps, and know that to drag the map they click anywhere but the buttons. So I'd still recommend against doing this. But here it is.

To accomplish it, we'll add pointer-events: none to the button element. That way all clicks and drags go through to the map. We then check the location of the click to see if it happened in the same location as the button, and if so dispatch a click event to the button. 

mapboxgl.accessToken = 'pk.eyJ1IjoiYmVuZGVybGlvIiwiYSI6ImNqM29qdXR5djAwMTQzM214M2hnZWVycWsifQ.jtDIyytOGMJ0TS9Pp6zFVg';
var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
  center: [-74.50, 40],
  zoom: 9 // starting zoom
});

var voteDiv1 = document.getElementById('vote1');
map.on('mousemove', function(e) {
  var c = map.project(e.lngLat);
  voteDiv1.style.left = (c.x) - 50 + 'px';
  voteDiv1.style.top = (c.y) - 50 + 'px';
});

document.getElementById("plus").addEventListener("click", function() {
  alert("Plus clicked")
})

document.getElementById("map").addEventListener("click", function(event) {
  var button = document.getElementById("plus");
  var buttonBB = button.getBoundingClientRect();

  if (
    event.pageX > buttonBB.left &&
    event.pageX < buttonBB.right &&
    event.pageY > buttonBB.top &&
    event.pageY < buttonBB.bottom
  ) {
    var bottomEvent = new Event("click");
    bottomEvent.pageX = event.pageX;
    bottomEvent.pageY = event.pageY;

    button.dispatchEvent(bottomEvent);
  }
  
  
})
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

#vote1 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0px;
  left: 0px;
  margin: 0px;
  padding: 0px;
  border: 2px solid red;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css" rel="stylesheet" />
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js"></script>

<div id='map'></div>

<div id="vote1">
  <div id="box" sectionId="" style="border:1px solid blue;">
    <button id="plus" style="width:150px; height:150px">+</button>
  </div>
</div>

Upvotes: 1

Related Questions