mapillary-js
Version:
WebGL JavaScript library for displaying street level imagery from mapillary.com
205 lines (187 loc) • 9.26 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>MapillaryJS Debug Page</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel='stylesheet' href='dist/mapillary.min.css' />
<style>
body { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
#viewer { width: 90%; height: 90%; }
</style>
</head>
<body>
<div id='viewer'></div>
<button onclick="viewer.activateCover()">Activate Cover</button><button onclick="viewer.deactivateCover()">Deactivate Cover</button>
<br>
<button onclick="play()">Play</button><button onclick="stop()">Stop</button>
<button onclick="showSlider()">Show Slider</button><button onclick="hideSlider()">Hide Slider</button>
<button onclick="playRoute()">Play Route</button><button onclick="stopRoute()">Stop Route</button>
<button onclick="letterbox()">Letterbox</button><button onclick="fill()">Fill</button>
<button onclick="setFilter()">Filter</button>
<script src='dist/mapillary.js'></script>
<script>
var viewer = new Mapillary.Viewer(
"viewer",
"QjI1NnU0aG5FZFZISE56U3R5aWN4ZzpkYzg0NzE3MDA0YTRhZjlh",
"zarcRdNFZwg3FkXNcsFeGw",
{
component: {
cover: false,
image: false,
stats: false,
},
renderMode: Mapillary.RenderMode.Letterbox,
}
);
window.addEventListener("resize", function() { viewer.resize(); });
function letterbox() {
viewer.setRenderMode(Mapillary.RenderMode.Letterbox);
}
function fill() {
viewer.setRenderMode(Mapillary.RenderMode.Fill);
}
var filterIndex = 0;
var filters = [
[],
["==", "fullPano", true],
["!=", "pano", true],
["==", "sequenceKey", "s5I5m7BvYykB677MpFnOIw"],
["in", "sequenceKey", "s5I5m7BvYykB677MpFnOIw", "-aC4wx-8oOkCp6SFGXoyAg"],
[
"all",
[">=", "capturedAt", 1370509079741 - 24 * 60 * 60 * 1000],
["<=", "capturedAt", 1370509079741 + 24 * 60 * 60 * 1000],
],
];
function setFilter() {
filterIndex = (filterIndex + 1) % filters.length;
viewer.setFilter(filters[filterIndex]).then(
function(n) {
console.log("filter", filters[filterIndex]);
});
}
var sequenceComponent = viewer.getComponent("sequence");
var route = viewer.getComponent("route");
route.configure({paths: [
{sequenceKey: "euUElwr9jYeUW1R1OHj04g", startKey: "2yFbES2-ogx4Cz8IOsaThQ", stopKey: "0cPOfPT2ZgqNIiU063CI4Q",
infoKeys: [
{key: "CSZGtPDQZqQxqb96lsTzpw", description: "This is mine and Millenbops Califronia roadtrip."},
{key: "DdTvQAKHEVhAbNlW3bCpvw", description: "It all began in West Hollywood."}
]
},
{sequenceKey: "euUElwr9jYeUW1R1OHj04g", startKey: "ERs17ne1Ln1FCWmrRAtWuw", stopKey: "rwfHD5iywHIDmzjsJvf8pw",
infoKeys: [
{key: "ERs17ne1Ln1FCWmrRAtWuw", description: "Every epic road trip should start at Sunset Blvd."},
]
},
{sequenceKey: "euUElwr9jYeUW1R1OHj04g", startKey: "EQCY7shEimCCW27J1cIl6g", stopKey: "Z5rHmOAWCtJFz6OJzFt20A",
infoKeys: [
{key: "EQCY7shEimCCW27J1cIl6g", description: "Sunset Blvd is one of the busiest streets in Los Angeles."},
]
},
{sequenceKey: "TJzxIvqxxxfJ4POUxNjAEA", startKey: "ajColPp_so8p0G6NXiMc4Q", stopKey: "x4BbhDOZhKJ1t96vDU2n-w",
infoKeys: [
{key: "ajColPp_so8p0G6NXiMc4Q", description: "After heading east for a while we ended up in the desert."}
]
},
{sequenceKey: "sK2j7wI6ZEkj2vsDy4jpDQ", startKey: "qKTcv58vTApeVwwZfsZL9w", stopKey: "f9viY8M7JYMxL0KVCaIN_g",
infoKeys: [
{key: "qKTcv58vTApeVwwZfsZL9w", description: "Our lodging the first two nights was 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: "Our closets neighbours house was completly burnt to the ground."}
]
},
{sequenceKey: "sK2j7wI6ZEkj2vsDy4jpDQ", startKey: "vJtyfbUtct7rXbkSKnfMtQ", stopKey: "8XMDhO9w54oosT3ex7pVig",
infoKeys: [
{key: "vJtyfbUtct7rXbkSKnfMtQ", description: "The main yard was behind this 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 by 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 in wood."}
]
},
{sequenceKey: "hV0PWG7L377V8pHG3CE-3w", startKey: "xOwoXDadn-G51JNJn67TRQ", stopKey: "13DeXe5fWJELCiXUOUqdrQ",
infoKeys: [
{key: "xOwoXDadn-G51JNJn67TRQ", description: "Our evening was spent on the veranda."}
]
},
{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: "Next up was King of the Hammer."},
{key: "Qqhp4_I2lPmH0TvUJnh86w", description: "This was my journey."},
{key: "B7_vLuIFsLIXLeBCRxja6Q", description: "Now you build yours."},
{key: "ZimS6e9sNXvT30y9b1sZeQ", description: "With MapillaryJS."}
]
}
], playing: true});
function play() {
viewer.deactivateComponent("cache");
sequenceComponent.play();
}
function stop() {
viewer.activateComponent("cache");
sequenceComponent.stop();
}
function showSlider() {
viewer.activateComponent("slider");
viewer.deactivateComponent("imagePlane");
viewer.deactivateComponent("direction");
viewer.deactivateComponent("sequence");
viewer.deactivateComponent("mouse");
viewer.deactivateComponent("keyboard");
}
function hideSlider() {
viewer.activateComponent("imagePlane");
viewer.activateComponent("direction");
viewer.activateComponent("sequence");
viewer.activateComponent("mouse");
viewer.activateComponent("keyboard");
viewer.deactivateComponent("slider");
}
function playRoute() {
viewer.deactivateComponent("cache");
route.play();
}
function stopRoute() {
viewer.activateComponent("cache");
route.stop();
}
viewer.on("loadingchanged", function (loading) {
console.log("loading:", loading);
});
</script>
</body>
</html>