Skip to content

Instantly share code, notes, and snippets.

@oscarlorentzon
Last active January 20, 2021 08:37
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save oscarlorentzon/400b034ce75430b1a1c69af835be566c to your computer and use it in GitHub Desktop.
MapillaryJS set filter
<!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: 100%; }
</style>
</head>
<body>
<div id='mly'></div>
<script>
var mly = new Mapillary.Viewer({
// Replace this with your own client ID from mapillary.com
apiClient: 'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0',
container: 'mly',
imageKey: 'vBcUqs0vPik9KAb1TFq6iw',
});
// Show only images from a certain sequence
mly.setFilter(["==", "sequenceKey", "UJYfRAWBgygvLFQJpS6-NA"]);
// Other examples
//
// Show only images from a certain organization
// mly.setFilter(["==", "organizationKey", "<my organization key>"]);
//
// Show only images from certain users
// mly.setFilter(["in", "userKey", "<my user key #1>", "<my user key #2>"]);
//
// Show only full 360 panoramas
// mly.setFilter(["==", "fullPano", true]);
//
// Show only images captured within 24 hours from a certain timestamp
// mly.setFilter([
// "all",
// [">=", "capturedAt", <my time stamp> - 24 * 60 * 60 * 1000],
// ["<=", "capturedAt", <my time stamp> + 24 * 60 * 60 * 1000],
// ]);
// Viewer size is dynamic so resize should be called every time the window size changes
window.addEventListener("resize", function() { mly.resize(); });
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment