I am currently working on an App that utilizes Geolocation with Open Layers to load a Bing Map Layer. My goal is to enable touch-based zooming and remove the default zoom buttons. Additionally, I would like to relocate the 'i' button to prevent any conflicts with the existing round white buttons.
Shown below is a snapshot of the current rendering:
https://i.sstatic.net/DyC8i.jpg I am referring to the blue buttons located beneath the white round ones.
In addition to the Geolocation code, here is how I have incorporated the Bing Maps layer. I believe this is where I should make modifications to eliminate these elements, but my attempts so far have not been successful:
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
})
}));
}
If anyone has any suggestions or solutions, please feel free to share them. Thank you!