Pan controls with Google Maps Javascript API v3.24+

As announced in the Google Geo Developers Blog, pan controls are removed from the Google Javascript API since v3.24, which was released in February 2016.

The new panning controls are good and work especially well with mobile devices, but if you for any reason need the old panning control back, you can do it by creating your own custom control. This is relatively easy, but since it might not be trivial enough for everybody, here’s how I solved the issue.

JavaScript

In the script after initializing your map, add the following to create a new control wrapper:

var panControl = document.createElement( 'div' );
panControl.className = 'panControls';

Next, we’ll want to create the actual buttons for panning and add them to the control wrapper. Note: The code below refers to pan_arrow.png, which you need to provide – either download the one created by me or create your own instead. Alternatively, you can embed it in the script itself with base64; see the gist for an example.

var directions = ['North', 'West', 'East', 'South'];
var pan = [];
directions.forEach( function( item ) {
    pan[item] = document.createElement( 'div' );
    pan[item].className = 'panControl ' + item;
    pan[item].innerHTML = '<img src="pan_arrow.png" />';
    panControl.appendChild( pan[item] );
} );

After that, we’ll add listeners for the buttons to activate panning on clicking. Change the panAmount variable (in pixels) to pan more or less per click.

var panAmount = 50;
pan['North'].addEventListener( 'click', function( ) {
    map.panBy( 0, -panAmount );
} );
pan['West'].addEventListener( 'click', function( ) {
    map.panBy( -panAmount, 0 );
} );
pan['East'].addEventListener( 'click', function( ) {
    map.panBy( panAmount, 0 );
} );
pan['South'].addEventListener( 'click', function( ) {
    map.panBy( 0, panAmount );
} );

Finally, we’ll push the pan control wrapper to the left bottom of the map. Change LEFT_BOTTOM to something else if you want to change the location of the panning control.

map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push( panControl );

CSS

The JavaScript itself renders a not so good looking and mostly useless block of arrows all facing in the same direction even, so we’ll need to add some CSS to go with it. Add the following CSS to your page with your map.

.panControls {
    position: relative;
    margin: 10px 20px;
    text-align: center;
    width: 40px;
    height: 40px;

    background-color: #fff;
    box-shadow: 0px 1px 4px -1px rgba( 0, 0, 0, 0.3 );
    border-radius: 2px;

    transform: rotate(-45deg);
}
    .panControls .panControl {
        width: 20px;
        height: 20px;
        -moz-user-select: none;
        cursor: pointer;
    }
        .panControl {
            position: absolute;
        }
            .panControl img {
                opacity: 0.6;
            }
                .panControl:active img {
                    opacity: 1;
                }
            .panControl.North {
                top: 0;
                left: 20px;
            }
            .panControl.West {
                top: 0;
                left: 0;
            }
                .panControl.West img {
                    transform: rotate( -90deg );
                }
            .panControl.East {
                top: 20px;
                left: 20px;
            }
                .panControl.East img {
                    transform: rotate( 90deg );
                }
            .panControl.South {
                top: 20px;
                left: 0;
            }
                .panControl.South img {
                    transform: rotate( -180deg );
                }

Now you have a nicer looking control that matches the style of the default controls!

Summary

The panning controls you can create with the code above are very simple but serve my purpose very well. The above code can be found in a gist.

There is at least one particular feature missing from these controls: constant panning when the buttons are held down for a longer time. The controls also do not include hover tooltips, let alone talking about localized ones.

Ultimately, you might want something completely different than I do, but I hope this can help you build the panning controls you need for your situation. Enjoy!

Improving the Xfce infrastructure: Bugzilla

Bug management is a vital part of any open source project. Today I’m happy to introduce you to yet another project which aims to improve the Xfce infrastructure – you guessed it – the Xfce Bugzilla!

The project to improve the Xfce bug management started quite some time ago. The first tasks in this were unrelated to the infrastructure; the team has done some work to clean up old bugs as well as triaging newer ones. Tasks like that can become extremely tedious if the tools are constantly slowing you down.

To try to remedy this situation we started a project to improve the look and feel of Bugzilla. In addition to just a general facelift we also ended up reorganizing bits here and there and even touch some functionality. I specifically want to highlight a few parts of the project:

  • Make bug filing easier and faster than before. We’ve streamlined the bug filing process by removing one unnecessary page load and a click but also by doing a big reorganization in the bug filing page.
  • Make bug handling easier and faster than before. In addition to a revamp for the bug filing procedure, the individual bug report pages have had a big update as well; information is now more clearly organized and the long bug description and comments have been brought much closer to the top of the page. We have also merged the status and resolution fields to let you choose the right combination with less clicks – and make it obvious which combinations are possible…
  • Allow using search filters on-the-fly. Whenever you are on a search result page with any filters, you can remove them individually from the search. You can now also click the product, component and assignee fields to add additional filters.
  • Highlight bug statuses. This is a smaller update, but we’re now using color-coded boxes for bug statuses anywhere they are shown. This should both help users digest information and see where work needs to be done.

Today, we’re finally at the point where we are quite happy with the changes and are ready to make them the default for the Xfce Bugzilla – all users using the default theme have been converted to the new Xfce skin and templates related to this skin. If you have specifically selected any other theme, you will be still using that; if you want to see the new theme, please go change your preferences.

We hope you like the new improvements and that they can make your life easier. As always, if you find any weirdness or bugs with the new skin and templates, file them in Bugzilla against the Bugzilla product on Xfce Bugzilla. Please note that this is not the correct place for bugs about Bugzilla itself – a good way to find out whether something is affecting the Xfce skin and related templates is to check the functionality with another skin enabled.