index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>simplifyjs</title>
  <script src="resources/coordinates.js"></script>
  <script src="src/clip.js"></script>
  <script src="src/douglas_peucker.js"></script>
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
  <div id="map"></div>
  <div id="range">
    <input id="range-control" type="range" max="1" step="0.0001", value="0">
    <code id="range-result"></code>
  </div>
</body>
  <style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top:0; bottom:0; width:100%; }
    #range { pointer-events: all; display: flex; flex-direction: column; color: #ce2c69}
  </style>
  <script>
    // clipeLines function unused
    mapboxgl.accessToken = 'pk.eyJ1Ijoib2RkeSIsImEiOiJjanJld3R2ZnYwcGoyNGFyazJkdXA2OW5oIn0.ac5ztibRIaP3Laxf_wDHig';
    const map = new mapboxgl.Map({
      style: 'mapbox://styles/mapbox/dark-v9',
      container: 'map',
      center: [ 65.10836837339707, 50.63059929897108],
      zoom: 6,
    });
    map.on('load', _ => {
      map.addLayer({
        'id': 'maine',
        'type': 'fill',
        'source': { 'type': 'geojson',
          'data': {
            'type': 'Feature',
            'geometry': {
              'type': 'Polygon',
              'coordinates': coords,
            }
          }
        },
        'paint': {
          'fill-color': '#ce2c69',
          'fill-opacity': 0.5,
        }
      });

      map.addControl({
        onAdd: function(map) {
          const range = document.getElementById('range-control');
          range.addEventListener('input', function(e) {
            const value = e.target && e.target.value || 0; // cause custom event dispatching
            const simplified = [simplify(coords[0], value)];
            document.getElementById('range-result').innerHTML = `vertx_count:${simplified[0].length}`;
            map.getSource('maine').setData({
              'type': 'Feature',
              'geometry': {
                'type': 'Polygon',
                'coordinates': simplified,
              },
            });
          })
          range.dispatchEvent(new CustomEvent('input')); // inital event dispatching
          return document.getElementById('range');
        },
      }, 'top-right')

    });
  </script>
</html>