Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Line Update</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<script src='https://api.mapbox.com/mapbox-gl-js/v3.0.0-beta.5/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v3.0.0-beta.5/mapbox-gl.css' rel='stylesheet' />
<style>
  body { margin: 0; padding: 0; }
  #map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
  mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
​
  const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/standard-beta',
    zoom: 17,
    center: [0, 0],
    antialias: true,  // not needed to reproduce, but possibly increases frequency of the issue
  });
​
  const geojson = {
    'type': 'FeatureCollection',
    'features': [{'type': 'Feature', 'geometry': {'type': 'LineString', 'coordinates': []}}],
  };
​
  let prevElapsedMs = 0;
​
  function animate() {
    const elapsedMs = performance.now();
    const deltaMs = prevElapsedMs == 0 ? 0 : elapsedMs - prevElapsedMs;
    prevElapsedMs = elapsedMs;
​
    if (deltaMs > 30)
      console.log(Math.round(elapsedMs) + ': ' + Math.round(deltaMs * 10) / 10);
​
    for (let i = 0; i < 100; i++)  // not needed, but increases frequency of issue
      map.getSource('line').setData(geojson);
​
    requestAnimationFrame(animate);
  }
​
  map.on('load', () => {
    map.addSource('line', {type: 'geojson', data: geojson});
    map.addLayer({
      'id': 'my-line',
      'type': 'line',
      'source': 'line',
      'layout': {'line-cap': 'round', 'line-join': 'round'},
      'paint': {'line-color': '#ff0000', 'line-width': 1}
    });
​
    animate();
  });
</script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers