Skip to content

Instantly share code, notes, and snippets.

@oscarlorentzon

oscarlorentzon/index.html

Last active January 20, 2021 08:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save oscarlorentzon/2a4041c93fb3711dc8dc53d1a217defe to your computer and use it in GitHub Desktop.
Save oscarlorentzon/2a4041c93fb3711dc8dc53d1a217defe to your computer and use it in GitHub Desktop.
Download ZIP
MapillaryJS storytelling with route component
Raw
index.html
<!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://unpkg.com/mapillary-js@3.1.0/dist/mapillary.min.js'></script>
<link href='https://unpkg.com/mapillary-js@3.1.0/dist/mapillary.min.css' rel='stylesheet' />
<style>
html, body { margin: 0; padding: 0; height: 100%; }
#mly { height: 90%; }
</style>
</head>
<body>
<div id='mly'></div>
<button onclick='play()'>Play</button>
<button onclick='stop()'>Stop</button>
<script>
var mly = new Mapillary.Viewer({
// Replace this with your own client ID from mapillary.com
apiClient: 'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0',
component: {
cover: false,
cache: false,
direction: false,
sequence: false
},
container: 'mly',
imageKey: '2yFbES2-ogx4Cz8IOsaThQ',
});
var routeComponent = mly.getComponent('route');
function play() {
routeComponent.play();
}
function stop() {
routeComponent.stop()
}
routeComponent.configure({
paths: [
{
sequenceKey: 'euUElwr9jYeUW1R1OHj04g', startKey: '2yFbES2-ogx4Cz8IOsaThQ', stopKey: '0cPOfPT2ZgqNIiU063CI4Q',
infoKeys: [
{ key: 'CSZGtPDQZqQxqb96lsTzpw', description: 'This is MapillaryJS.' },
{ key: 'DdTvQAKHEVhAbNlW3bCpvw', description: 'Used to show a road trip in California by Gyllen and Millenbop.' }
]
},
{
sequenceKey: 'euUElwr9jYeUW1R1OHj04g', startKey: 'ERs17ne1Ln1FCWmrRAtWuw', stopKey: 'rwfHD5iywHIDmzjsJvf8pw',
infoKeys: [
{ key: 't-H1-tJ6UiKjuqnBNRkamg', description: 'Every epic road trip should start at Sunset Blvd.' },
]
},
{
sequenceKey: 'euUElwr9jYeUW1R1OHj04g', startKey: 'EQCY7shEimCCW27J1cIl6g', stopKey: 'Z5rHmOAWCtJFz6OJzFt20A',
infoKeys: [
{ key: 'EQCY7shEimCCW27J1cIl6g', description: 'Sunset Blvd is approximately 22 miles (35 km) in length.' },
]
},
{
sequenceKey: 'TJzxIvqxxxfJ4POUxNjAEA', startKey: 'ajColPp_so8p0G6NXiMc4Q', stopKey: 'x4BbhDOZhKJ1t96vDU2n-w',
infoKeys: [
{ key: 'ajColPp_so8p0G6NXiMc4Q', description: 'After heading east for a couple of hours we reached the desert.' }
]
},
{
sequenceKey: 'sK2j7wI6ZEkj2vsDy4jpDQ', startKey: 'qKTcv58vTApeVwwZfsZL9w', stopKey: 'f9viY8M7JYMxL0KVCaIN_g',
infoKeys: [
{ key: 'qKTcv58vTApeVwwZfsZL9w', description: 'The first two nights was spent deep into Yucca Valley.' },
{ key: 'patDqTIis_qL2i72MFZaog', description: 'Where joshua trees grows everywhere.' }
]
},
{
sequenceKey: 'j8ROntKX9iv-9gb1HBuSHQ', startKey: 'yZU9lUaTYExFrAtIUlo_uw', stopKey: 'VEVbQEAZrtvz7JEinkFp2A',
infoKeys: [
{ key: 'yZU9lUaTYExFrAtIUlo_uw', description: 'The house next to ours was burnt to the ground.' }
]
},
{
sequenceKey: 'sK2j7wI6ZEkj2vsDy4jpDQ', startKey: 'vJtyfbUtct7rXbkSKnfMtQ', stopKey: '8XMDhO9w54oosT3ex7pVig',
infoKeys: [
{ key: 'vJtyfbUtct7rXbkSKnfMtQ', description: 'Nothing but desert outside our fence.' }
]
},
{
sequenceKey: 'TJzxIvqxxxfJ4POUxNjAEA', startKey: 'joM8RlVPy356_sazcblQMA', stopKey: 'ZZDciNIDLfB57I3s2cJF_w',
infoKeys: [
{ key: 'joM8RlVPy356_sazcblQMA', description: 'The first day we headed straight out in the desert.' },
{ key: 'b2GTrci-JeJvzPheAcL-1g', description: 'With our destination set for Giant Rock.' },
]
},
{
sequenceKey: 'DgoZjqjsHGH_zz5966dDBg', startKey: 'LBPEtJMmbrGh0oLnQ9E8lg', stopKey: 'wgXSKLtIR0GoFiVxe-INoQ',
infoKeys: [
{ key: 'LBPEtJMmbrGh0oLnQ9E8lg', description: 'This is the Giant Rock. Some people belive it was placed there by aliens' },
{ key: 'Np7XYqKsXhxi3OmxEKBHSQ', description: 'However the rock ended up there its an impressive beast!' }
]
},
{
sequenceKey: '1rjqpVbg2kgTrKpkneyGIQ', startKey: '2uIn4edT9tlkzzxqD78Y1Q', stopKey: 'HB4XNwjCmpR1k_VPPfhn1Q',
infoKeys: [
{ key: '2uIn4edT9tlkzzxqD78Y1Q', description: 'Next stop, the peaceful integraton.' }
]
},
{
sequenceKey: 'VQZ6FJbwb7m-kak85Lk15g', startKey: 'JAEaa5H6MdcgJGC8rWPEFQ', stopKey: 'I3b1TBdOaP1lIeQOQ7SSSg',
infoKeys: [
{ key: 'JAEaa5H6MdcgJGC8rWPEFQ', description: 'The integraton is close to the Giant Rock.' },
{ key: 'l8oTDuLuVD_Q_mHd9_WKsQ', description: 'Here you can get a soundbath to heal your soul.' },
{ key: '27FI9bQrMTwFk9FvG9xtnQ', description: 'The integraton itself is the white building.' },
{ key: '79TCHVkj3qpOKBePzC6R8g', description: 'A perfect sphere built of wood.' }
]
},
{
sequenceKey: 'hV0PWG7L377V8pHG3CE-3w', startKey: 'xOwoXDadn-G51JNJn67TRQ', stopKey: '13DeXe5fWJELCiXUOUqdrQ',
infoKeys: [
{ key: 'xOwoXDadn-G51JNJn67TRQ', description: 'Our evening was spent on the porch, watching the desert.' }
]
},
{
sequenceKey: 'gD_UgTtm3Txuy907EePIYg', startKey: 'af0_LV-Jwe981WM35yqIjQ', stopKey: '00elTbzW2vSoMo2JB-jHzw',
infoKeys: [
{ key: 'af0_LV-Jwe981WM35yqIjQ', description: 'Next day we visited Pioneer Town.' },
{ key: 'DTeBlU5HCqUXdM_LFChFwQ', description: 'A western movie set.' }
]
},
{
sequenceKey: 'FqH1Elh2497hGqntmHHy5A', startKey: 'clvsHTDMqGAFz4CCE8ndDg', stopKey: 'ZimS6e9sNXvT30y9b1sZeQ',
infoKeys: [
{ key: 'clvsHTDMqGAFz4CCE8ndDg', description: 'Deep in the desert there was motor competition.' },
{ key: 'Qqhp4_I2lPmH0TvUJnh86w', description: 'This was my journey.' },
{ key: 'B7_vLuIFsLIXLeBCRxja6Q', description: 'Now you build yours.' },
{ key: 'ZimS6e9sNXvT30y9b1sZeQ', description: 'With MapillaryJS.' }
]
}
],
playing: true
});
mly.activateComponent('route');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment