How to remove zoom feature in HTML file using openlayers library?

Question

I want to remove the zoom-in and zoom-out buttons on my application. When I run it on the browser and click inspect I can see this line "<button class="ol-zoom-in" type="button" title="Zoom in">+</button>" but in my code editor, I am not able to find it.I'm using openlayer 6.5.0 Inspect screenshot

Answer 1

const map = new Map({
    controls : defaults({
        attribution : false,
        zoom : false,
    }),
});

https://openlayers.org/en/latest/apidoc/module-ol_control_defaults

Answer 2

The Zoom in/out buttons that are visible on your screen are called controls in the openlayer world and they can be configured while initializing the map object.

Specifically, you can remove the default zoom control buttons (zoom-in and zoom-out) by excluding them from the list of controls in your map's configuration.

See below example,

const map = new Map({
  target: 'mapDOMElement', 
  view: yourConfiguredView,
  layers: [...yourLayers],
  controls: [], // An empty array to remove all default controls
});