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 name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <meta charset=utf-8 />
  <title>Quake | Mapbox</title>
  <link rel='shortcut icon' href='path/to/favicon.ico' type='image/x-icon' />
  <script src='https://api.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body style="position: absolute; left: 0; bottom: 0; right: 0; top: 0;">
  <div id='map' style="position: absolute; left: 0; bottom: 0; right: 0; top: 0;"></div>
​
  <script>
// Assign globals
mapboxgl.accessToken = '{your token}';
const interval = 500;
let offsetVal = 2;
  
​
// Initialize map
const map = new mapboxgl.Map({
  container: 'map',
  style: '{your style id}'
});
​
    // Function called by animate() to create property transitions
function updateProperty(layer, property, value, timeoutModifier) {
  setTimeout(function() {
    map.setPaintProperty(layer, property, value);
  }, interval * timeoutModifier);
}
​
    
// Function to call at each interval
function animate() {
  // invert offsetVal every animation loop
  offsetVal = offsetVal * -1;
  updateProperty('place-label', 'text-translate', [0, offsetVal * -1], 1.5);
  updateProperty('contour-lines', 'line-offset', offsetVal, 0);
}
​
// Minor tweaks to map & kick off the animation loop 
map.on('load', function() {
  // Update transition property on map style to match animation loop time
  const mapStyle = map.getStyle();
  mapStyle.transition = {
    duration: interval,
    delay: 0
  };
  map.setStyle(mapStyle);
​
  // Start animation
  setInterval(animate, interval);
}); 
  </script>
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers