Mapillary has become useless once again

Web and notifications
#1

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.

4 Likes
#2

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.

1 Like
#3

And I just dismounted my bicycle from my automobile :slight_smile: .
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 :slight_smile:

The right sidebar with the Feed and Uploads could be a popup bar. That would be better for me.

1 Like
#4

Tampermonkey is great! :+1:

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!

3 Likes
#5

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.

1 Like
#6

Thank you! I updated the code in my post.

#7

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.

#8

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 ?

#9

Minimization button is back again, Tampermonkey script is obsolete now. :slight_smile:

#10

Well I learned something. But Tampermonkey cannot record keystrokes. I think that Chrome also crashed more than usual.
I just miss VBA.

#11

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>
1 Like
#13

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.