JSFiddle - React, Tailwind, and code Playground

by cchudzicki

HTML

<script src='https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.css' rel='stylesheet' />
<div id="map"></div>

CSS

#map {
  height: 500px
}

JavaScript

/**
 * This fiddle illustrates that short marker drags register map clciks.
 * The effec tis easier to see if map has larger click tolerance.
 * Accompanying issue:
 */
mapboxgl.accessToken = 'pk.eyJ1IjoiY2NodWR6aWNraSIsImEiOiJjazlpZjh2cXExOHZkM2lsbHhoNWZsaXIwIn0.Ak6uTSCgDB3NSvQaWyFQ_A';

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v9',
  center: [-70.2568, 43.6591],
  zoom: 11,
  // clickTolerance: 20 // default is 3
});

const element = document.createElement('div');
element.style.backgroundImage = 'url(https://placekitten.com/g/60/60/)';
element.style.width = '60px';
element.style.height = '60px';
element.style.cursor = 'pointer';

const marker = new mapboxgl.Marker(element, { draggable: true })
  .setLngLat([-70.2, 43.66])
  .addTo(map);

// Listeners
const pointerCoords = {
  lastDown: { x: null, y: null },
  lastUp: { x: null, y: null },
}
let isPointerDown;
const distance = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
document.addEventListener('pointerdown', e => {
  console.log('pointer down')
  pointerCoords.lastDown.x = e.clientX;
  pointerCoords.lastDown.y = e.clientY;
  isPointerDown = true;
})
document.addEventListener('pointermove', () => {
  if (isPointerDown) {
    console.log('pointer down and moving')
  }
})
document.addEventListener('pointerup', e => {
  console.log('pointer up')
  pointerCoords.lastUp.x = e.clientX;
  pointerCoords.lastUp.y = e.clientY;
  isPointerDown = false;
})
map.on('click', () => {
  console.log('map click')
  const { lastDown, lastUp } = pointerCoords;
})
marker.on('dragstart', () => {
  console.log('marker dragstart')
})
marker.on('dragend', () => {
  const { lastDown, lastUp } = pointerCoords;
  console.log(`marker dragend: pointer moved: ${distance(lastDown, lastUp)}`)
})