Skip to content

Instantly share code, notes, and snippets.

@oscarlorentzon

oscarlorentzon/index.html

Last active January 20, 2021 08:28
Show Gist options
  • Save oscarlorentzon/10dad7582268312b1adac2c3a869c5c5 to your computer and use it in GitHub Desktop.
Save oscarlorentzon/10dad7582268312b1adac2c3a869c5c5 to your computer and use it in GitHub Desktop.
Download ZIP
Change filters
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'>
<script src='https://unpkg.com/[email protected]/dist/mapillary.min.js'></script>
<link href='https://unpkg.com/[email protected]/dist/mapillary.min.css' rel='stylesheet' />
<style>
html, body { margin: 0; padding: 0; height: 100%; }
#mly { height: 100%; }
.filter-container {
position: absolute;
left: 0;
top: 0;
background-color: white;
padding: 7px;
}
.filter-label { display: block; margin-top: 3px; }
</style>
</head>
<body>
<div id='mly'></div>
<div id='filters' class='filter-container'>
<label for='empty' class='filter-label'>
<input id='empty' type='radio' name='filter-toggle' value='empty' checked/>
[]
</label>
<label for='fullpano' class='filter-label'>
<input id='fullpano' type='radio' name='filter-toggle' value='fullpano'/>
['==', 'fullPano', true]
</label>
<label for='notpano' class='filter-label'>
<input id='notpano' type='radio' name='filter-toggle' value='notpano'/>
['!=', 'pano', true]
</label>
<label for='singlesequence' class='filter-label'>
<input id='singlesequence' type='radio' name='filter-toggle' value='singlesequence'/>
['==', 'sequenceKey', 's-key']
</label>
<label for='multisequence' class='filter-label'>
<input id='multisequence' type='radio' name='filter-toggle' value='multisequence'/>
['in', 'sequenceKey', 's-key1', 's-key2']
</label>
<label for='notusers' class='filter-label'>
<input id='notusers' type='radio' name='filter-toggle' value='notusers'/>
['!in', 'userKey', 'u-key1', 'u-key2']
</label>
<label for='timespan' class='filter-label'>
<input id='timespan' type='radio' name='filter-toggle' value='timespan'/>
['all',
<br/>&emsp;&emsp;['>=', 'capturedAt', start],
<br/>&emsp;&emsp;['>=', 'capturedAt', end]]
</label>
</div>
<script>
var mly = new Mapillary.Viewer({
apiClient: 'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0',
component: { cover: false },
container: 'mly',
imageKey: 'B8AaHVfaEuAQrRYuzSnySg',
});
var inputFilters = {
'empty': [],
'fullpano': ['==', 'fullPano', true],
'notpano': ['!=', 'pano', true],
'singlesequence': ['==', 'sequenceKey', 's5I5m7BvYykB677MpFnOIw'],
'multisequence': ['in', 'sequenceKey', 's5I5m7BvYykB677MpFnOIw', '-aC4wx-8oOkCp6SFGXoyAg'],
'notusers': ['!in', 'userKey', 'zxVb9rBloUYNkWO3d-27Dg', '-arqiu8TOA05UY92IafU6Q'],
'timespan': [
'all',
['>=', 'capturedAt', 1370509079741 - 24 * 60 * 60 * 1000], // date minus one day
['<=', 'capturedAt', 1370509079741 + 24 * 60 * 60 * 1000], // date plus one day
],
}
function switchFilter(e) {
var handler = e.target.value;
var filter = inputFilters[handler];
mly.setFilter(filter);
}
var inputs = document
.getElementById('filters')
.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchFilter;
}
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