Remove default controls from Open Layers Bing Map

Question

I am building an App that uses Geolocation using Open Layers loading a Bing Map Layer. I would like to control the zooming just by touch alone and would therefore like to remove the default zoom buttons. Ideally I'd like to at least move the 'i' button also so it doesn't conflict with the round white buttons.

Here's a screenshot of how it currently renders:

So I'm talking about the blue buttons underneath the white round ones.

Aside from the Geolocation code, this is how I'm adding the Bing Maps layer, and where I'm assuming I would add the code to remove these, but everything I've tried hasn't made a difference:

var styles = [
    'Road',
    'Aerial',
    'AerialWithLabels',
    'ordnanceSurvey'
];
var layers = [];
var i, ii;
for (i = 0, ii = styles.length; i < ii; ++i) {
    layers.push(new ol.layer.Tile({
        visible: false,
        preload: Infinity,
        source: new ol.source.BingMaps({
            key: 'my key is here in the real version',
            imagerySet: styles[i],
            disableZooming: true,
            // use maxZoom 19 to see stretched tiles instead of the BingMaps
            // "no photos at this zoom level" tiles
            maxZoom: 19
        })
    }));
}

Does anyone have any suggestions?

Cayuse

Answer 1

The zoom (the plus and minus buttons on the top-left) and attribution (the i button on the bottom-right) controls are part of the ol.Map configuration. In order to disable them, you may initialize your ol.Map as follows:

var map = new ol.Map({
    ...
    controls : ol.control.defaults({
        attribution : false,
        zoom : false,
    }),
    ...
});

Roseroseann

@HelenDangerBurns I am glad I could help! :) – Roseroseann

Be sure to add an attribution to Bing maps somewhere in your app, possibly on an about page. This will keep you inline with the terms of use of Bing Maps. Details on attribution requirements can be found here: microsoft.com/maps/mob-brand-guid.aspx – Walkout