Question 261395 in CSS Question posted in
Some basic documentation can be found here.

OpenLayers 8.1.0, customize controls, css

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>
Tags:

2

Answers


  1. 0

    It seems like you’re facing some issues with map controls not responding correctly to CSS instructions, and you’re looking for alternative ways to modify these controls. Let’s address your concerns and explore potential solutions.

    1. Positioning with CSS: You mentioned that you can determine the position of map controls using CSS. This is typically the correct approach for controlling the layout of elements on a web page. If you’re having problems with this, ensure that you are using the appropriate CSS properties (e.g., position, top, left, right, bottom) to set the desired position. Make sure there are no conflicting CSS rules affecting these controls.

    2. Changing Labels with Properties: You mentioned that you can change the label of map controls using properties. This is usually the preferred method for altering the text or content of elements dynamically. Make sure you are using the correct properties or methods provided by the mapping library or API you are using.

    3. CSS Modifications: If you’re having issues with other CSS modifications such as background-color, color, border-width, or border-radius not working as expected, double-check the specificity of your CSS selectors and ensure that there are no conflicting styles applied elsewhere in your code. Sometimes, the order in which stylesheets are loaded can also affect CSS rules.

    4. Version 8.1.0: You mentioned that these issues exist in version 8.1.0. If you suspect that these are bugs in the specific version of the mapping library or API you are using, consider checking their official documentation, release notes, or community forums to see if others have reported similar problems. It’s possible that there may be updates or workarounds available.

    5. Broader Options: If you’re looking for broader options to modify map controls, consider checking the documentation of the mapping library or API you’re using. They may provide a set of configurable options or methods to customize the appearance and behavior of map controls. Additionally, you could explore using custom HTML/CSS or JavaScript to create and style your own custom map controls if the library allows for such customization.

    To provide more specific guidance or solutions, it would be helpful to see the actual code you’re using and have more details about the mapping library or API in question. If you can share your code or provide additional information, I’d be happy to assist you further.

    Login or Signup to reply.
  2. 0

    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:

    enter image description here

    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 👍

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search