-
-
Save geografa/34b16cd7aaaf1841dfe0043163959dd7 to your computer and use it in GitHub Desktop.
MAY THE FOURTH BE WITH YOU
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <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.30.0/mapbox-gl.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.30.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> | |
| <script> | |
| mapboxgl.accessToken = 'pk.eyJ1IjoiZ3JhZmEiLCJhIjoiY2lvOHdtcDVlMDMwN3ZibHpucHczemQ4dSJ9.xfu_0kXfz1Nymp2LIyLS4Q'; | |
| var map = new mapboxgl.Map({ | |
| container: 'map', // container id | |
| style: 'mapbox://styles/grafa/ciwgu2bi6008e2qoi2u5rc0af', //stylesheet location | |
| center: [-74.048761683216,40.65137390725303], // starting position | |
| zoom: 16, // starting zoom | |
| pitch: 60, | |
| bearing: -147.9302320257936 | |
| }); | |
| map.on('load', function () { | |
| map.addSource("markers", { | |
| "type": "geojson", | |
| "data": { | |
| "type": "FeatureCollection", | |
| "features": [ | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "title": "Episode IV: A NEW HOPE", | |
| "description": "It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire. During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet. Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy...."}, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -74.04235886352959,40.65846033896625 | |
| ] | |
| } | |
| } | |
| ] | |
| } | |
| }); | |
| map.addSource("title", { | |
| "type": "geojson", | |
| "data": { | |
| "type": "FeatureCollection", | |
| "features": [ | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "title": "Episode IV: A NEW HOPE"}, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -74.04466515187657,40.65556363300749 | |
| ] | |
| } | |
| } | |
| ] | |
| } | |
| }); | |
| map.addLayer({ | |
| "id": "markers", | |
| "type": "symbol", | |
| "source": "markers", | |
| "layout": { | |
| "text-field": "{description}", | |
| "text-font": ["Arial Unicode MS Bold"], | |
| "text-offset": [0, 0.6], | |
| "text-anchor": "top", | |
| "text-max-width": 15, | |
| "text-rotation-alignment": "map", | |
| "text-size": 50, | |
| "text-rotate": -147.9302320257936 | |
| }, | |
| "paint": { | |
| "text-color": "yellow" | |
| } | |
| }); | |
| map.addLayer({ | |
| "id": "title", | |
| "type": "symbol", | |
| "source": "title", | |
| "layout": { | |
| "text-field": "{title}", | |
| "text-font": ["Arial Unicode MS Bold"], | |
| "text-offset": [0, 0.6], | |
| "text-anchor": "top", | |
| "text-max-width": 15, | |
| "text-rotation-alignment": "map", | |
| "text-size": 65, | |
| "text-rotate": -147.9302320257936 | |
| }, | |
| "paint": { | |
| "text-color": "yellow" | |
| } | |
| }); | |
| }); | |
| setTimeout(function(){ map.flyTo({center: [-73.93618902394385,40.787632320016144], | |
| zoom: 15, | |
| speed: 0.05, | |
| curve: 0.1 | |
| });}, 3000); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment