JSFiddle - React, Tailwind, and code Playground

by alekzonder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet-src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css">
<div>
  <div id="map" style="float:left;"></div>

  <div style="float:left;">
    <button id="clear">
      clear
    </button>
    <pre id="log">

</pre>

  </div>
</div>

CSS

#map {
  height: 500px;
  width: 500px;
}

JavaScript

var map = L.map(document.getElementById('map'), {
  center: [55.0415, 82.9346],
  zoom: 10
});

var osm = L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: null
  }
);


map.addLayer(osm);

var timeout = null;

map.on('moveend', function() {
  document.getElementById('log').innerHTML += '!moveend!\n';

  timeout = setTimeout(function() {
    document.getElementById('log').innerHTML = '';
    clearTimeout(timeout);
  }, 1000);
});

document.getElementById("clear").addEventListener("click", function(e) {
  if (timeout) {
    clearTimeout(timeout);
  }
  document.getElementById('log').innerHTML = '';

  e.preventDefault();
});