[GIS] How to remove default zoom in/out [+/-] buttons from openlayers to keep the navigation bar on

defaultnavigationopenlayers-2toolbar

I want to remove the default zoom +/- buttons from openlayers.

Here is my code

    <script type="text/javascript">
    var map, ia_wms;
    function init(){
map = new OpenLayers.Map('map', {zoomDuration: 1,projection: 'EPSG:3857'
***/*controls: [
    new OpenLayers.Control.Navigation(),
    new OpenLayers.Control.ArgParser(),
    new OpenLayers.Control.Attribution()
    ]*/***
    });
    var sr_all = new OpenLayers.Layer.WMS("EOL","http://192.168.0.233/cgi-bin/mapserv?map=/var/www/mstest/plant.map",{'layers':"map_outline",'transparent':true,'format':'image/png'}
           ,{
            isBaseLayer: false,opacity: 100
            },
            {singleTile: true, ratio: 1}
            );
    var gmap = new OpenLayers.Layer.Google(
    "Google Streets", // the default
    { numZoomLevels: 25,visibility: false}
    ,{
        isBaseLayer: true
    }
    );      
    map.addLayers([sr_all,gmap]);
    map.addControl(new OpenLayers.Control.PanZoomBar());

    map.zoomToExtent(new OpenLayers.Bounds(69.728426,22.311238,69.774227,22.356185));
    map.setCenter(new OpenLayers.LonLat(69.754227,22.332185).transform(
    new OpenLayers.Projection('EPSG:4326', 'EPSG:3857'),
    map.getProjectionObject()
    ), 14);
    }
</script>

when I added,
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.ArgParser(),
new OpenLayers.Control.Attribution()
]
to the map = new OpenLayers.Map, to remove default zoom +/- buttons, the map is not loading.
Please see the image also.

Both the navigation buttons exist. :(
Both the navigation buttons exist. 🙁

I want to remove the small- 2 button- one.
I changed the code like this:

        map = new OpenLayers.Map('map', {zoomDuration: 1,projection: 'EPSG:3857'
    controls: []
    });

and added

        map.addControl(new OpenLayers.Control.PanZoomBar());
    map.addControl(new OpenLayers.Control.KeyboardDefaults());

But, the map is not loading. Do not know any syntax error..

Best Answer

You should initialize the map with no controls. You can do this passing an empty array to the controls like this:

map = new OpenLayers.Map('map', 
    {zoomDuration: 1,projection: 'EPSG:3857'
    controls: []});

You should then add only those controls that you require, like this:

map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.ArgParser());
map.addControl(new OpenLayers.Control.Attribution());

This should solve your problem

Related Question