CODEWITHSUNDEEP
cssopenlayersopenlayers-3openlayers-6
Prashant Shravan Ujjainkar
Prashant Shravan Ujjainkar

Reputation: 23

How to Change position of default zoom tool of Open Layers using css?

How to Change position of default zoom tool of Open Layers using css? enter image description here

Upvotes: 1

Views: 2610

Answers (2)

Jakob Miksch
Jakob Miksch

Reputation: 173

adding this CSS moves the zoom buttons to the right

div.ol-zoom {
    top: .5em;
    right: .5em;
    left: auto;
}

Upvotes: 0

geocodezip
geocodezip

Reputation: 161384

To put the zoom control in the upper left corner of the map, set:

.map .ol-zoom {
  top: 10px;
  left: auto;
  right: 10px;

}

(as @Mike indicated in his comment)

proof of concept fiddle

screenshot of resulting map

code snippet:

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([37.41, 8.82]),
    zoom: 4
  })
});
html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.map {
  height: 100%;
  width: 100%;
}

.map .ol-zoom {
  top: 10px;
  left: auto;
  right: 10px;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/css/ol.css" type="text/css">
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js"></script>
  <title>OpenLayers example</title>
</head>

<body>
  <div id="map" class="map"></div>
</body>

</html>

Upvotes: 2

Related Questions