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","",{'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.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'),
    ), 14);

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..


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


Do you need to remove the big one (blue one?) or the small one behind it? if the big one is the issue, try commenting:

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

and you should get only one control like here:

var map, layer;
        function init(){
            map = new OpenLayers.Map( 'map');
            layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
                new OpenLayers.LonLat(-71.147, 42.472).transform(
                    new OpenLayers.Projection("EPSG:4326"),
                ), 12

If the 2nd is the issue, follow this example and adapt it as you wish:

var map;
    var lon = 5;
    var lat = 40;
    var zoom = 5;
    function init(){
        map = new OpenLayers.Map("map", {
            controls: [
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanPanel(),
                new OpenLayers.Control.ZoomPanel()

        var wms = new OpenLayers.Layer.WMS(
            "OpenLayers WMS",
            {layers: 'basic'}

        map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
  • Both links are dead :/
    – Joel
    Mar 3 '15 at 18:18
 var options = {
        controls: [
         //   new OpenLayers.Control.LayerSwitcher(),
            new OpenLayers.Control.Zoom({
                zoomInId: "bplus",
                zoomOutId: "bminus"
            new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.MousePosition(
        { div: document.getElementById("coordinates") })
        transitionEffect: 'none',


you can add custom zoom like that


Use it , It works well no zoom buttons and navigation still works!

map = new OpenLayers.Map('map', 
     controls: [new OpenLayers.Control.Navigation()]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.