9

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

5 Answers 5

8

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

4

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");
            map.addLayer(layer);
            map.setCenter(
                new OpenLayers.LonLat(-71.147, 42.472).transform(
                    new OpenLayers.Projection("EPSG:4326"),
                    map.getProjectionObject()
                ), 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",
            "http://vmap0.tiles.osgeo.org/wms/vmap0",
            {layers: 'basic'}
        );
        map.addLayers([wms]);

        map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
    }
1
  • Both links are dead :/
    – Joel
    Mar 3, 2015 at 18:18
0
 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

0

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

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

below line hide default zoom in/out [+/-] buttonsmMapView.getZoomController().setVisibility(CustomZoomButtonsController.Visibility.NEVER);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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