Skip to content

Instantly share code, notes, and snippets.

@wboykinm

wboykinm/index.html

Last active September 17, 2015 14:25
Download ZIP

Revisions

  1. Bill Morris revised this gist Sep 17, 2015. 2 changed files with 18 additions and 3934 deletions.
    3,914 changes: 0 additions & 3,914 deletions faraday.0fd3756a.json
    View file
    0 additions, 3,914 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
    38 changes: 18 additions & 20 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,47 +1,45 @@

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset='utf-8' />
    <title>Mapbox GL JS Easing</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.0/mapbox-gl.css' rel='stylesheet' />
    <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.0/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>
    <a class='button hidden pin-topleft' onclick='map.collisionDebug=!map.collisionDebug'>Toggle collision boxes</a>
    <a class='button pin-topright margin1 col1 icon adjust-stroke hidden' onclick='tilter()'>Tilt</a>
    <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
    var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'faraday.0fd3756a.json', //stylesheet location
    center: [47.60621, -122.33207], // starting position
    zoom: 12.66, // starting zoom,
    //hash:true
    style: 'mapbox://styles/faraday2/0fd3756a', //hosted style id
    center: [-122.33207,47.60621], // starting position
    zoom: 14 // starting zoom
    });

    function rotator(){
    map.easeTo({bearing:60, duration:5000, pitch:55, zoom:14});
    map.easeTo({bearing:60, duration:9000, pitch:55, zoom:16});
    window.setTimeout(function(){
    map.easeTo({bearing:180, duration:8000, pitch:0, zoom:10});
    map.easeTo({bearing:180, duration:8000, pitch:0, zoom:13});
    window.setTimeout(function(){
    map.easeTo({bearing:220, duration:7000, pitch:70, zoom:13});
    window.setTimeout(function(){
    rotator()
    }, 5000)
    }, 8000)
    }, 8000)
    }, 7000)
    }

    map.on('load', function(){
    rotator()
    })
    </script>

    </body>
    </html>
    </html>
  2. Bill Morris revised this gist Sep 17, 2015. 2 changed files with 3915 additions and 2 deletions.
    3,914 changes: 3,914 additions & 0 deletions faraday.0fd3756a.json
    View file
    3,914 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
    3 changes: 1 addition & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,6 @@
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.0/mapbox-gl.css' rel='stylesheet' />
    <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
    <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
    @@ -21,7 +20,7 @@
    mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
    var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/faraday2/0fd3756a', //stylesheet location
    style: 'faraday.0fd3756a.json', //stylesheet location
    center: [47.60621, -122.33207], // starting position
    zoom: 12.66, // starting zoom,
    //hash:true
  3. Bill Morris revised this gist Sep 17, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,8 +4,8 @@
    <meta charset='utf-8' />
    <title>Mapbox GL JS Easing</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.0/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.0/mapbox-gl.css' rel='stylesheet' />
    <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
    <style>
    body { margin:0; padding:0; }
  4. Bill Morris revised this gist Sep 17, 2015. No changes.
  5. Bill Morris created this gist Sep 17, 2015.
    48 changes: 48 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@

    <html>
    <head>
    <meta charset='utf-8' />
    <title>Mapbox GL JS Easing</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.0/mapbox-gl.css' rel='stylesheet' />
    <link href='https://www.mapbox.com/base/latest/base.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>
    <a class='button hidden pin-topleft' onclick='map.collisionDebug=!map.collisionDebug'>Toggle collision boxes</a>
    <a class='button pin-topright margin1 col1 icon adjust-stroke hidden' onclick='tilter()'>Tilt</a>
    <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
    var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/faraday2/0fd3756a', //stylesheet location
    center: [47.60621, -122.33207], // starting position
    zoom: 12.66, // starting zoom,
    //hash:true
    });

    function rotator(){
    map.easeTo({bearing:60, duration:5000, pitch:55, zoom:14});
    window.setTimeout(function(){
    map.easeTo({bearing:180, duration:8000, pitch:0, zoom:10});
    window.setTimeout(function(){
    map.easeTo({bearing:220, duration:7000, pitch:70, zoom:13});
    window.setTimeout(function(){
    rotator()
    }, 5000)
    }, 8000)
    }, 7000)
    }
    map.on('load', function(){
    rotator()
    })
    </script>

    </body>
    </html>