Please stop experimenting on our behalf.
It is impossible to analyze pictures when one fourth of the screen is obfuscated. It is horrible to watch.
Just make the windows minimizable, resizable and movable with cookies.
I am losing my patience.
The only fun at this moment is the appearence of green lines on the map.
I discussed this here, but heard nothing. Your post motivated me to figure out some coding. I have a Tampermonkey (browser extension) script to use hotkeys to move through sequences (which should exist by default), so I added a key to simply hide or show that box.
And I just dismounted my bicycle from my automobile .
I was not going to leave work early any more for Mapillary.
Luckily I was not too impolite in my post. Not as impolite as Mapillary fooling around without saying a thing. They must be busy with the Completethemap.
I resized the Chrome window and now it is acceptable again. I never should have maximized it
The right sidebar with the Feed and Uploads could be a popup bar. That would be better for me.
Tampermonkey is great!
I have coded a script that shows/hides the box, too, but by a button.
// ==UserScript==
// @name Mapillary Map Closer
// @description Adds button to remove/reload the map or pic on left bottom of Mapillary website
// @match https://www.mapillary.com/*
// @require https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant GM_addStyle
// ==/UserScript==
if(window.location.href.includes('pKey=') ){ //Sometimes you must reload the website once to show/hide the button. It's still a little bug.
//create button
var button = document.createElement("Button");
button.innerHTML = 'Go away!'
button.id = 'btn_closeMap';
button.style = 'bottom:43px;height:40px;left:19px;width:100px;position:absolute;z-index:99999;padding:0px;';
document.body.appendChild(button);
//this happens, if you click the button
$('#btn_closeMap').click ( function () {
if (button.innerHTML=='Go away!'){
GM_addStyle('.ng-tns-c126-0.Window { visibility:hidden; }');
button.innerHTML='Map/Pic come back!';
} else if (button.innerHTML=='Map/Pic come back!'){
GM_addStyle('.ng-tns-c126-0.Window { visibility:visible; }');
button.innerHTML='Go away!';
}
} );
}
Hiding is pretty quick, but re-showing is a bit slower, because there the script reloads the website. And Sometimes you must reload the website once to show/hide the button. If someone wants to improve it: Feel free!
€: Code updated, thanks to pkoby!
How about instead of
document.getElementsByClassName('ng-tns-c126-0 Window')[0].remove();
and
location.reload();
you use
GM_addStyle('.ng-tns-c126-0.Window { visibility:hidden; }');
and
GM_addStyle('.ng-tns-c126-0.Window { visibility:visible; }');
respectively?
Then you don’t have to reload the page every time. I played around with the initial loading bug, but I couldn’t get it to load the button without reloading the page.
Thank you! I updated the code in my post.
This is the first time I work with Tampermonkey.
I had some silly beginner’s problems.
I solved them but it still did not work. I even restarted Chrome.
Then I used a hard refresh (Ctrl F5) and then it worked.
Mapillary and OSM helps me keeping up to date as I have left the computer business.
Ik keep my window just so big that the inset window remains the minimum.
I do not understand what there is to discuss about a minimize button.
Or does some user interface expert want to simplify things by amputation ?
Minimization button is back again, Tampermonkey script is obsolete now.
Well I learned something. But Tampermonkey cannot record keystrokes. I think that Chrome also crashed more than usual.
I just miss VBA.
If someone wants to build a tool for making the window smaller with Tampermonkey: The HTML code of the big window looks like this:
<window _ngcontent-wbp-c126="" class="ng-tns-c126-0 Window" _nghost-wbp-c52="">
<div _ngcontent-wbp-c52="" class="Container absolute top-0 bottom-0 left-0 right-0">
<app-mapbox-gl _ngcontent-wbp-c126="">
<div id="map1" class="mapboxgl-map">
<div class="mapboxgl-canary" style="visibility: hidden;">
</div>
<div class="mapboxgl-canvas-container mapboxgl-interactive mapboxgl-touch-drag-pan mapboxgl-touch-zoom-rotate">
<canvas class="mapboxgl-canvas" style="position: absolute; width: 653px; height: 281px;" tabindex="0" aria-label="Map" width="653" height="281">
</canvas>
</div>
<div class="mapboxgl-control-container">
<div class="mapboxgl-ctrl-top-left">
</div>
<div class="mapboxgl-ctrl-top-right">
</div>
<div class="mapboxgl-ctrl-bottom-left">
<div class="mapboxgl-ctrl" style="display: none;">
<a class="mapboxgl-ctrl-logo" target="_blank" rel="noopener nofollow" href="https://www.mapbox.com/" aria-label="Mapbox logo">
</a>
</div>
</div>
<div class="mapboxgl-ctrl-bottom-right">
<div class="mapboxgl-ctrl mapboxgl-ctrl-group">
<button class="mapboxgl-ctrl-icon mapboxgl-ctrl-zoom-in" type="button" title="Zoom in" aria-label="Zoom in">
</button>
<button class="mapboxgl-ctrl-icon mapboxgl-ctrl-zoom-out" type="button" title="Zoom out" aria-label="Zoom out">
</button>
<button class="mapboxgl-ctrl-icon mapboxgl-ctrl-compass" type="button" title="Reset bearing to north" aria-label="Reset bearing to north">
<span class="mapboxgl-ctrl-compass-arrow" style="transform: rotate(0deg);">
</span>
</button>
</div>
<div class="mapboxgl-ctrl mapboxgl-ctrl-attrib">
<div class="mapboxgl-ctrl-attrib-inner">
© <a href="https://openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer">
OpenStreetMap contributors</a>
</div>
</div>
</div>
</div>
</div>
<app-mapbox-gl-instant-photo _ngcontent-wbp-c126="" _nghost-wbp-c54="">
<div _ngcontent-wbp-c54="" class="Popup bg-white shadow-bottom ng-star-inserted" style="left: 0px; top: 0px;">
<div _ngcontent-wbp-c54="" class="ImageBackground">
<div _ngcontent-wbp-c54="" class="Loading absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center z9 LoadingNow">
<app-spinner _ngcontent-wbp-c54="" size="32" _nghost-wbp-c49="">
<div _ngcontent-wbp-c49="" class="LoadingIndicator" style="width: 32px; height: 32px;">
</div>
</app-spinner>
</div>
<!---->
<!---->
</div>
<div _ngcontent-wbp-c54="" class="Triangle">
</div>
</div>
<!---->
</app-mapbox-gl-instant-photo>
</app-mapbox-gl>
<app-mapbox-gl-style-picker _ngcontent-wbp-c126="">
<div dropup-control="" for="style" class="Button cursor-pointer absolute border-radius-4 bottom-0 right-0 bg-white flex items-center justify-center z10">
<div tooltip="" text="Map style" class="ButtonIcon layer">
</div>
</div>
<!---->
</app-mapbox-gl-style-picker>
<div _ngcontent-wbp-c52="" class="SwitchButtonContainer absolute top-0 right-0 pointer-events-none overflow-hidden ng-star-inserted">
<div _ngcontent-wbp-c52="" class="SwitchButtonImage absolute top-0 right-0 pointer-events-none">
</div>
<div _ngcontent-wbp-c52="" class="SwitchButton absolute cursor-pointer pointer-events-auto">
</div>
</div>
<!---->
<!---->
<div _ngcontent-wbp-c52="" tooltip="" class="i minimize cursor-pointer absolute top-0 left-0 ng-star-inserted" style="margin: 12px; height: 18px; width: 22px;">
</div>
<!---->
</div>
</window>
The small window (that you have if your browser window is small enough) looks like that:
<window _ngcontent-wbp-c126="" class="ng-tns-c126-0 Window" _nghost-wbp-c52="">
<div _ngcontent-wbp-c52="" class="Container absolute top-0 bottom-0 left-0 right-0">
<app-mapbox-gl _ngcontent-wbp-c126="">
<div id="map1" class="mapboxgl-map">
<div class="mapboxgl-canary" style="visibility: hidden;">
</div>
<div class="mapboxgl-canvas-container mapboxgl-interactive mapboxgl-touch-drag-pan mapboxgl-touch-zoom-rotate">
<canvas class="mapboxgl-canvas" tabindex="0" aria-label="Map" height="240" style="position: absolute; width: 320px; height: 240px;" width="320">
</canvas>
</div>
<div class="mapboxgl-control-container">
<div class="mapboxgl-ctrl-top-left">
</div>
<div class="mapboxgl-ctrl-top-right">
</div>
<div class="mapboxgl-ctrl-bottom-left">
<div class="mapboxgl-ctrl" style="display: none;">
<a class="mapboxgl-ctrl-logo" target="_blank" rel="noopener nofollow" href="https://www.mapbox.com/" aria-label="Mapbox logo">
</a>
</div>
</div>
<div class="mapboxgl-ctrl-bottom-right">
<div class="mapboxgl-ctrl mapboxgl-ctrl-group">
<button class="mapboxgl-ctrl-icon mapboxgl-ctrl-zoom-in" type="button" title="Zoom in" aria-label="Zoom in">
</button>
<button class="mapboxgl-ctrl-icon mapboxgl-ctrl-zoom-out" type="button" title="Zoom out" aria-label="Zoom out">
</button>
<button class="mapboxgl-ctrl-icon mapboxgl-ctrl-compass" type="button" title="Reset bearing to north" aria-label="Reset bearing to north">
<span class="mapboxgl-ctrl-compass-arrow" style="transform: rotate(0deg);">
</span>
</button>
</div>
<div class="mapboxgl-ctrl mapboxgl-ctrl-attrib mapboxgl-compact">
<div class="mapboxgl-ctrl-attrib-inner">
© <a href="https://openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer">
OpenStreetMap contributors</a>
</div>
</div>
</div>
</div>
</div>
<app-mapbox-gl-instant-photo _ngcontent-wbp-c126="" _nghost-wbp-c54="">
<div _ngcontent-wbp-c54="" class="Popup bg-white shadow-bottom ng-star-inserted" style="left: 116px; top: -37px;">
<div _ngcontent-wbp-c54="" class="ImageBackground">
<div _ngcontent-wbp-c54="" class="Loading absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center z9 LoadingNow">
<app-spinner _ngcontent-wbp-c54="" size="32" _nghost-wbp-c49="">
<div _ngcontent-wbp-c49="" class="LoadingIndicator" style="width: 32px; height: 32px;">
</div>
</app-spinner>
</div>
<!---->
<!---->
</div>
<div _ngcontent-wbp-c54="" class="Triangle">
</div>
</div>
<!---->
</app-mapbox-gl-instant-photo>
</app-mapbox-gl>
<app-mapbox-gl-style-picker _ngcontent-wbp-c126="">
<div dropup-control="" for="style" class="Button cursor-pointer absolute border-radius-4 bottom-0 right-0 bg-white flex items-center justify-center z10">
<div tooltip="" text="Map style" class="ButtonIcon layer">
</div>
</div>
<!---->
</app-mapbox-gl-style-picker>
<div _ngcontent-wbp-c52="" class="SwitchButtonContainer absolute top-0 right-0 pointer-events-none overflow-hidden ng-star-inserted">
<div _ngcontent-wbp-c52="" class="SwitchButtonImage absolute top-0 right-0 pointer-events-none">
</div>
<div _ngcontent-wbp-c52="" class="SwitchButton absolute cursor-pointer pointer-events-auto">
</div>
</div>
<!---->
<!---->
<div _ngcontent-wbp-c52="" tooltip="" class="i minimize cursor-pointer absolute top-0 left-0 ng-star-inserted" style="margin: 12px; height: 18px; width: 22px;">
</div>
<!---->
</div>
</window>
I found ONE good use for the larger picture window =
while correcting the location of pictures.
But for normal mapping it just sits in the way.
The desktop uploader now has a nice detached picture window.
For Firefox users here’s a userscript for shrinking and resizing the smaller window.
// ==UserScript==
// @name Mapillary Map Shrinker
// @description Shrinks the smaller Mapillary of both canvases to a better size (developed for Firefox)
// @include https://www.mapillary.com/app/*
// @require https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant GM_addStyle
// ==/UserScript==
shrinker();
function shrinker(){
//Creating button:
var button = document.createElement("Button");
button.innerHTML = '<a title="Smaller!">Smaller!</a>'
button.id = 'btn_shrinkMap';
button.style = 'bottom:0px;height:0px;left:0px;width:100px;position:absolute;z-index:1;padding:0px;background-color: transparent;outline:none;color: transparent;visibility:hidden;';
document.body.appendChild(button);
//Checking each 500 ms, if showing button makes sense:
var origWidth = -1;
var origHeight = -1;
setInterval(function() {
if(document.getElementsByClassName('ViewerButton cursor-pointer absolute')[0]){ // If small canvas is invisible, button gets invisible, too.
button.style.visibility="hidden";
button.style.height='0px';
}
else if(window.location.href.includes('pKey=') && !window.location.href.includes('cKey=')){
button.style.visibility="visible";
button.style.height='20px';
if(origWidth==-1){ // Stores old measures once, if not already done.
var karte = document.getElementById('map1');
var bild = document.getElementById('mly');
var karteWidth= parseInt(karte.innerHTML.split('width: ')[1].split('px')[0]);
var bildWidth= parseInt(bild.innerHTML.split('width: ')[1].split('px')[0]);
var orig;
if(karteWidth<bildWidth){
orig=karte;
} else {
orig=bild}
origWidth= orig.innerHTML.split('width: ')[1].split(';')[0];
origHeight = orig.innerHTML.split('height: ')[1].split(';')[0];
}
}
else {
button.style.visibility="hidden";
button.style.height='0px';}
}, 500);
// Clicking button:
$('#btn_shrinkMap').click ( function () {
// Varying className has to be read out (".ng-tns-c79-0", ".ng-tns-c81-0", ".ng-tns-c90-0" , ".ng-tns-c131-0", ".ng-tns-c133-0" etc.):
var dasDingHier = '.ng-tns-c'+document.body.innerHTML.split('ng-tns-c')[2].split('-0')[0]+'-0'; // First "ng-tns-c" in HTML sourcecode doesn't have any number, that's why "[2]" is used.
if (button.innerHTML=='<a title="Smaller!">Smaller!</a>'){
GM_addStyle(dasDingHier + '.Window {width:20%; height:'+window.innerWidth*2/15+'px;}');
button.innerHTML='<a title="Bigger!">Bigger!</a>';
} else if (button.innerHTML=='<a title="Bigger!">Bigger!</a>'){
GM_addStyle(dasDingHier + '.Window {width:'+ origWidth + '; height:'+ origHeight + ';}');
button.innerHTML='<a title="Smaller!">Smaller!</a>';
}
// Fixing wrongly displayed canvas:
var i=0;
setInterval(function(){
if(i>1) {
clearInterval();
return;
}
document.getElementsByClassName('SwitchButton absolute cursor-pointer pointer-events-auto')[0].click();
i++;
}, 10);
} );
}
I hate u FB, very soon FB make from Mapillary
Whyyyyy is disabled WEB UPLOADER ???
Desctop uploder is crap and cannot be used from all computers.
I dont have acess to install any software on my work computer, that have very good upload speed.
There was a lot wrong long before the FB empire struck.
If there are bugs and errors with the desktop uploader, please keep reporting them. We want it to work and to work well!
If your personal computer upload speed is slow, that’s a problem of course but good for us to know your situation. It sounds like you rely on your work computer to have fast upload, but its restrictive for installing desktop apps. Can it run the command line either? Web is really the only option for you due to not having admin access to the computer you use, correct?
I don’t know how to use CLI.
I can’t find any instructions of upload with CLI on Windows.
The bug un Desctop uploader in my view is there is no posible to upload more than one sequence in one time. I need to upload more than 50 seq.
@kasparskk if you have a folder, let’s call it “images”, and each contains another folder with a sequence from GoPro, let’s say folders are “GOPRO1”, “GOPRO2”, “GOPRO3”, and each contains “img1.jp”, img2.jpg" and so on… just click and drag the folder “images” to the desktop uploader and it will upload all the sequences.
Is it in the manual ? I am banned from saying it as real Unix people used to say it in the eighties and nineties.
Tnx… your method is working!
One problem i have seen - can not PAUSE uploading!