OpenLayers 8.1.0, customize controls, css

Question

OpenLayers 8.1.0, customize controls, css

258 Views Asked by Jiri Sovina At 08 October 2023 at 17:00

Map controls do not respond correctly to css instructions. The position can be determined using css, the label can be changed using properties. Any other modifications using css either do not work at all or incorrectly. For example: "background-color", "color", "border-width", "border-radius". They exist in version 8.1.0. any other broader options to modify the map controls? Until version 6.x.x, controls could be easily modified by modifying the ol/ol.css file. This does not work with version 8.x.x. The code used:

css:

html, body {
    margin: 0;
    height: 100%;
}
#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}
.ol-zoom {
    margin-left:20px;
    margin-top:20px;
    background-color:red;   -incorrect
    color:blue;             -doesn't work
    border-width:4px;       -doesn't work
    border-radius: 20%      -doesn't work
}

Js:

import './style.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import Zoom from 'ol/control/Zoom.js';

const zoomControl = new Zoom({
  zoomOutLabel: 'E',
  zoomInLabel: 'I',
  delta: 0.5,
});

const map = new Map({
  target: 'map',
  controls: [zoomControl],
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  }),
});

html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/x-icon" href="https://openlayers.org   /favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Using OpenLayers with Vite</title>
</head>
<body>
  <div id="map"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

Original Q&A

There are 1 best solutions below

**JJY9** · Answer 1 · 2023-10-09T07:49:08.933000

As per provided code HTML and Js look fine. But the problem seems to be in the CSS. I am currently using version 7.X.X and i have a map element that occupies 50% width and 100% height of my Web page. The ol-zoom-in and ol-zoom-out are setup in the bottom left of the map. I also have custom spacing and some border and other css that i have applied. Believe me it is not as straight as it looks to be. You will have to do some code and try steps before you achieve your required results.

The design that i acheived:

The CSS I used for it:

.ol-zoom {
    font-size: 24px;
    border-radius: 8px;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);

    /* --------Css Below is for positioning ---------*/
    position: absolute;
    right: 10px;
    bottom: 20px;
}

.ol-zoom-in {
    padding: 2px 10.5px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    background-color: white;
    width: 36px;
    border-bottom: 1px solid #bebebe;
}

.ol-zoom-out {
    padding: 2px 10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: white;
    width: 36px;
}

You can send me your design images and i can help you with that as well. Thanks

OpenLayers 8.1.0, customize controls, css

There are 1 best solutions below

Related Questions in CSS

Related Questions in OPENLAYERS

Related Questions in OPENLAYERS-8

Trending Questions

Popular # Hahtags

Popular Questions