Last active
October 6, 2015 18:47
-
-
Save joyrexus/d2f3f422a33c07754f82 to your computer and use it in GitHub Desktop.
Sewanee Flyover
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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: 'pencil-v7.json', //stylesheet location | |
| center: [35.1986838, -85.9122766], // 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "version": 7, | |
| "name": "Pencil", | |
| "constants": { | |
| "@land": "rgba(0,0,0,0)", | |
| "@water": "#73b6e6", | |
| "@park": "#c8df9f", | |
| "@road": "#fefefe", | |
| "@border": "#6d90ab", | |
| "@wood": "#33AA66", | |
| "@building": "#d9ccbe", | |
| "@building_outline": "#d2c6b9", | |
| "@text": "#000000", | |
| "@satellite_brightness_low": 0, | |
| "@satellite_brightness_high": 1, | |
| "@satellite_saturation": 2, | |
| "@satellite_spin": 0 | |
| }, | |
| "sources": { | |
| "mapbox": { | |
| "type": "vector", | |
| "url": "mapbox://mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v6" | |
| } | |
| }, | |
| "sprite": "https://www.mapbox.com/mapbox-gl-styles/sprites/pencil", | |
| "glyphs": "mapbox://fontstack/{fontstack}/{range}.pbf", | |
| "layers": [{ | |
| "id": "background", | |
| "type": "background", | |
| "paint": { | |
| "background-image": "natural_paper_seamless_s" | |
| } | |
| }, { | |
| "id": "park", | |
| "type": "fill", | |
| "source": "mapbox", | |
| "source-layer": "landuse", | |
| "filter": ["in", "class", "park", "cemetery"], | |
| "paint": { | |
| "fill-image": "shade_light", | |
| "fill-antialias": true | |
| } | |
| }, { | |
| "id": "park_outline", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "landuse", | |
| "minzoom": 11, | |
| "filter": ["all", ["in", "class", "park", "cemetery"], ["==", "$type", "Polygon"]], | |
| "paint": { | |
| "line-image": "line_shade_22_1", | |
| "line-width": { | |
| "base": 1.3, | |
| "stops": [[11, 1], [20, 11]] | |
| }, | |
| "line-opacity": { | |
| "stops": [[11, 0], [12, 0.4]] | |
| } | |
| } | |
| }, { | |
| "id": "hillshade_highlight_bright", | |
| "type": "fill", | |
| "source": "mapbox", | |
| "source-layer": "hillshade", | |
| "filter": ["==", "level", 94], | |
| "paint": { | |
| "fill-color": "#ffffff", | |
| "fill-opacity": 0.3 | |
| } | |
| }, { | |
| "id": "hillshade_highlight_med", | |
| "type": "fill", | |
| "source": "mapbox", | |
| "source-layer": "hillshade", | |
| "filter": ["==", "level", 90], | |
| "paint": { | |
| "fill-color": "#ffffff", | |
| "fill-opacity": 0.3 | |
| } | |
| }, { | |
| "id": "hillshade_shadow_faint", | |
| "type": "fill", | |
| "source": "mapbox", | |
| "source-layer": "hillshade", | |
| "filter": ["==", "level", 89], | |
| "paint": { | |
| "fill-image": "shade_dark", | |
| "fill-opacity": 0.3 | |
| } | |
| }, { | |
| "id": "hillshade_shadow_med", | |
| "type": "fill", | |
| "source": "mapbox", | |
| "source-layer": "hillshade", | |
| "filter": ["==", "level", 78], | |
| "paint": { | |
| "fill-image": "shade_dark", | |
| "fill-opacity": 0.3 | |
| } | |
| }, { | |
| "id": "hillshade_shadow_dark", | |
| "type": "fill", | |
| "source": "mapbox", | |
| "source-layer": "hillshade", | |
| "filter": ["==", "level", 67], | |
| "paint": { | |
| "fill-image": "shade_dark", | |
| "fill-opacity": 0.3 | |
| } | |
| }, { | |
| "id": "hillshade_shadow_extreme", | |
| "type": "fill", | |
| "source": "mapbox", | |
| "source-layer": "hillshade", | |
| "filter": ["==", "level", 56], | |
| "paint": { | |
| "fill-image": "shade_dark", | |
| "fill-opacity": 0.3 | |
| } | |
| }, { | |
| "id": "contour_line_loud", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "contour", | |
| "filter": ["==", "index", 5], | |
| "paint": { | |
| "line-image": "line_solid_6", | |
| "line-width": 3, | |
| "line-opacity": 0.5 | |
| } | |
| }, { | |
| "id": "contour_line_regular", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "contour", | |
| "filter": ["!=", "index", 5], | |
| "paint": { | |
| "line-image": "line_dotted_4", | |
| "line-width": 2, | |
| "line-opacity": 0.5 | |
| } | |
| }, { | |
| "id": "water", | |
| "type": "fill", | |
| "source": "mapbox", | |
| "source-layer": "water", | |
| "paint": { | |
| "fill-image": "water_pattern_s", | |
| "fill-antialias": true | |
| } | |
| }, { | |
| "id": "water_line", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "water", | |
| "minzoom": 2, | |
| "paint": { | |
| "line-width": { | |
| "stops": [[14, 1], [20, 3]] | |
| }, | |
| "line-color": "#888888", | |
| "line-opacity": 0.5 | |
| } | |
| }, { | |
| "id": "tunnel_path", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "tunnel", | |
| "filter": ["in", "class", "path"], | |
| "paint": { | |
| "line-image": "line_dotted_4", | |
| "line-width": 2, | |
| "line-opacity": 0.25 | |
| } | |
| }, { | |
| "id": "tunnel_service", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "tunnel", | |
| "filter": ["==", "class", "service"], | |
| "paint": { | |
| "line-image": "line_solid_6", | |
| "line-width": 3, | |
| "line-opacity": { | |
| "stops": [[15, 0], [15.25, 0.25]] | |
| } | |
| } | |
| }, { | |
| "id": "tunnel_motorway_casing", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "tunnel", | |
| "minzoom": 12, | |
| "filter": ["==", "class", "motorway"], | |
| "paint": { | |
| "line-image": "line_double_20", | |
| "line-width": 10, | |
| "line-opacity": 0.25 | |
| } | |
| }, { | |
| "id": "tunnel_main_motorwaylink_casing", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "tunnel", | |
| "minzoom": 13, | |
| "filter": ["in", "class", "main", "motorway_link"], | |
| "paint": { | |
| "line-image": "line_double_18", | |
| "line-width": 9, | |
| "line-opacity": 0.25 | |
| } | |
| }, { | |
| "id": "tunnel_street_casing", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "tunnel", | |
| "minzoom": 14, | |
| "filter": ["in", "class", "street", "street_limited"], | |
| "paint": { | |
| "line-image": "line_double_16", | |
| "line-width": 8, | |
| "line-opacity": 0.25 | |
| } | |
| }, { | |
| "id": "road_motorway_low_dash1", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "road", | |
| "minzoom": 7, | |
| "maxzoom": 11, | |
| "filter": ["==", "class", "motorway"], | |
| "paint": { | |
| "line-color": "#000000", | |
| "line-width": { | |
| "stops": [[7, 1], [9, 1.6]] | |
| }, | |
| "line-opacity": { | |
| "stops": [[7, 0.2], [8, 0.1], [10, 0.1], [11, 0]] | |
| }, | |
| "line-dasharray": [2, 1] | |
| } | |
| }, { | |
| "id": "road_motorway_low_dash2", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "road", | |
| "minzoom": 7, | |
| "maxzoom": 11, | |
| "filter": ["==", "class", "motorway"], | |
| "paint": { | |
| "line-color": "#000000", | |
| "line-width": { | |
| "stops": [[7, 1], [9, 2.6]] | |
| }, | |
| "line-opacity": { | |
| "stops": [[7, 0.2], [8, 0.1], [10, 0.1], [11, 0]] | |
| }, | |
| "line-dasharray": [12, 1] | |
| } | |
| }, { | |
| "id": "road_main_motorwaylink_low", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "road", | |
| "minzoom": 7, | |
| "maxzoom": 11, | |
| "filter": ["in", "class", "main", "motorway_link"], | |
| "paint": { | |
| "line-color": "#222222", | |
| "line-width": { | |
| "stops": [[7, 1], [11, 1.2]] | |
| }, | |
| "line-opacity": { | |
| "stops": [[7, 0.25], [10, 0.25], [11, 0]] | |
| } | |
| } | |
| }, { | |
| "id": "road_motorway_mid", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "road", | |
| "minzoom": 10, | |
| "maxzoom": 12, | |
| "filter": ["==", "class", "motorway"], | |
| "paint": { | |
| "line-image": "line_solid_7", | |
| "line-width": 4, | |
| "line-opacity": { | |
| "stops": [[10, 0], [11, 1]] | |
| } | |
| } | |
| }, { | |
| "id": "road_main_motorwaylink_mid", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "road", | |
| "minzoom": 10, | |
| "maxzoom": 13, | |
| "filter": ["in", "class", "main", "motorway_link"], | |
| "paint": { | |
| "line-image": "line_solid_7", | |
| "line-width": 4, | |
| "line-opacity": { | |
| "stops": [[10, 0], [11, 1]] | |
| } | |
| } | |
| }, { | |
| "id": "road_street_mid", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "road", | |
| "maxzoom": 14, | |
| "filter": ["in", "class", "street", "street_limited"], | |
| "paint": { | |
| "line-image": "line_solid_6", | |
| "line-width": 3, | |
| "line-opacity": { | |
| "stops": [[12, 0], [12.5, 1]] | |
| } | |
| } | |
| }, { | |
| "id": "road_path", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "road", | |
| "filter": ["in", "class", "path"], | |
| "paint": { | |
| "line-image": "line_dotted_4", | |
| "line-width": 2 | |
| } | |
| }, { | |
| "id": "road_service", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "road", | |
| "filter": ["==", "class", "service"], | |
| "paint": { | |
| "line-image": "line_solid_6", | |
| "line-width": 3, | |
| "line-opacity": { | |
| "stops": [[15, 0], [15.25, 1]] | |
| } | |
| } | |
| }, { | |
| "id": "road_motorway_casing", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "road", | |
| "minzoom": 12, | |
| "filter": ["==", "class", "motorway"], | |
| "layout": { | |
| "line-cap": "butt", | |
| "line-join": "miter" | |
| }, | |
| "paint": { | |
| "line-image": "line_double_20", | |
| "line-width": 10 | |
| } | |
| }, { | |
| "id": "road_main_motorwaylink_casing", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "road", | |
| "minzoom": 13, | |
| "filter": ["in", "class", "main", "motorway_link"], | |
| "layout": { | |
| "line-cap": "butt", | |
| "line-join": "bevel" | |
| }, | |
| "paint": { | |
| "line-image": "line_double_18", | |
| "line-width": 9 | |
| } | |
| }, { | |
| "id": "road_street_casing", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "road", | |
| "minzoom": 14, | |
| "filter": ["in", "class", "street", "street_limited"], | |
| "paint": { | |
| "line-image": "line_double_16", | |
| "line-width": 8 | |
| } | |
| }, { | |
| "id": "road_motorway", | |
| "ref": "road_motorway_casing", | |
| "paint": { | |
| "line-image": "line_double_20_mask", | |
| "line-width": 10 | |
| } | |
| }, { | |
| "id": "road_main_motorwaylink", | |
| "ref": "road_main_motorwaylink_casing", | |
| "paint": { | |
| "line-image": "line_double_18_mask", | |
| "line-width": 9 | |
| } | |
| }, { | |
| "id": "road_street", | |
| "ref": "road_street_casing", | |
| "paint": { | |
| "line-image": "line_double_16_mask", | |
| "line-width": 8 | |
| } | |
| }, { | |
| "id": "bridge_path", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "bridge", | |
| "filter": ["in", "class", "path"], | |
| "paint": { | |
| "line-image": "line_dotted_4", | |
| "line-width": 2 | |
| } | |
| }, { | |
| "id": "bridge_service", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "bridge", | |
| "filter": ["==", "class", "service"], | |
| "paint": { | |
| "line-image": "line_solid_6", | |
| "line-width": 3, | |
| "line-opacity": { | |
| "stops": [[15, 0], [15.25, 1]] | |
| } | |
| } | |
| }, { | |
| "id": "bridge_motorway_casing", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "bridge", | |
| "minzoom": 12, | |
| "filter": ["==", "class", "motorway"], | |
| "layout": { | |
| "line-cap": "butt", | |
| "line-join": "miter" | |
| }, | |
| "paint": { | |
| "line-image": "line_double_20", | |
| "line-width": 10 | |
| } | |
| }, { | |
| "id": "bridge_main_motorwaylink_casing", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "bridge", | |
| "minzoom": 13, | |
| "filter": ["in", "class", "main", "motorway_link"], | |
| "layout": { | |
| "line-cap": "butt", | |
| "line-join": "bevel" | |
| }, | |
| "paint": { | |
| "line-image": "line_double_18", | |
| "line-width": 9 | |
| } | |
| }, { | |
| "id": "bridge_street_casing", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "bridge", | |
| "minzoom": 14, | |
| "filter": ["in", "class", "street", "street_limited"], | |
| "paint": { | |
| "line-image": "line_double_16", | |
| "line-width": 8 | |
| } | |
| }, { | |
| "id": "bridge_motorway", | |
| "ref": "bridge_motorway_casing", | |
| "paint": { | |
| "line-image": "line_double_20_mask", | |
| "line-width": 10 | |
| } | |
| }, { | |
| "id": "bridge_main_motorwaylink", | |
| "ref": "bridge_main_motorwaylink_casing", | |
| "paint": { | |
| "line-image": "line_double_18_mask", | |
| "line-width": 9 | |
| } | |
| }, { | |
| "id": "bridge_street", | |
| "ref": "bridge_street_casing", | |
| "paint": { | |
| "line-image": "line_double_16_mask", | |
| "line-width": 8 | |
| } | |
| }, { | |
| "id": "building", | |
| "type": "fill", | |
| "source": "mapbox", | |
| "source-layer": "building", | |
| "minzoom": 14, | |
| "paint": { | |
| "fill-antialias": true, | |
| "fill-image": "shade_medium", | |
| "fill-opacity": { | |
| "stops": [[12, 0], [13, 1]] | |
| } | |
| } | |
| }, { | |
| "id": "building_outline", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "building", | |
| "minzoom": 14, | |
| "paint": { | |
| "line-image": "line_solid_6", | |
| "line-width": { | |
| "base": 1.3, | |
| "stops": [[14, 1], [17, 3]] | |
| } | |
| } | |
| }, { | |
| "id": "admin_3_4_glow", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "admin", | |
| "filter": ["all", [">=", "admin_level", 3], ["==", "maritime", 0]], | |
| "layout": { | |
| "line-join": "round", | |
| "line-cap": "round" | |
| }, | |
| "paint": { | |
| "line-color": "#e3e3e3", | |
| "line-opacity": 0.8, | |
| "line-width": { | |
| "stops": [[3, 4], [6, 6]] | |
| } | |
| } | |
| }, { | |
| "id": "admin_3_4", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "admin", | |
| "filter": ["all", [">=", "admin_level", 3], ["==", "maritime", 0]], | |
| "layout": { | |
| "line-join": "round", | |
| "line-cap": "round" | |
| }, | |
| "paint": { | |
| "line-color": "#666666", | |
| "line-opacity": 0.5, | |
| "line-width": { | |
| "stops": [[5, 1], [9, 2.2]] | |
| }, | |
| "line-dasharray": [1, 0.5, 1.5, 0.5, 0.5, 0.5, 2, 0.5, 2.5, 0.5] | |
| } | |
| }, { | |
| "id": "admin_2_maritime", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "admin", | |
| "filter": ["all", ["==", "admin_level", 2], ["==", "maritime", 1]], | |
| "layout": { | |
| "line-join": "round", | |
| "line-cap": "round" | |
| }, | |
| "paint": { | |
| "line-color": "#666666", | |
| "line-opacity": 0.5, | |
| "line-width": { | |
| "stops": [[3, 1.2], [6, 2.2]] | |
| }, | |
| "line-dasharray": [2, 2, 1.5, 1.5] | |
| } | |
| }, { | |
| "id": "admin_2_glow", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "admin", | |
| "filter": ["all", ["==", "admin_level", 2], ["==", "maritime", 0]], | |
| "layout": { | |
| "line-join": "round", | |
| "line-cap": "round" | |
| }, | |
| "paint": { | |
| "line-color": "#e3e3e3", | |
| "line-opacity": 0.8, | |
| "line-width": { | |
| "stops": [[3, 6], [6, 8]] | |
| } | |
| } | |
| }, { | |
| "id": "admin_2", | |
| "type": "line", | |
| "source": "mapbox", | |
| "source-layer": "admin", | |
| "filter": ["all", ["==", "admin_level", 2], ["==", "maritime", 0]], | |
| "layout": { | |
| "line-join": "round", | |
| "line-cap": "round" | |
| }, | |
| "paint": { | |
| "line-color": "#666666", | |
| "line-opacity": 0.8, | |
| "line-width": { | |
| "stops": [[3, 1.2], [6, 2.2]] | |
| }, | |
| "line-dasharray": [1, 0.5, 1.5, 0.5, 0.5, 0.5, 2, 0.5, 2.5, 0.5] | |
| } | |
| }] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment