0

The below posted code is to show a map with zoom bar or slider. The code is taken from here:

https://openlayers.org/en/latest/examples/zoomslider.html

I attempt to show the zoom slider number three, that's why I set the target of the map to map3. the result is, never a horizontal zoom bar on the top-right but a tiny small button on the left.

How can I show the horizontal zoom slider on the top right of the map?

app.component.html:

<script src="https://unpkg.com/elm-pep"></script>
<style>
  .map {
    width: 100%;
    height:400px;
  }
  /**
   * The zoomslider in the second map shall be placed between the zoom-in and
   * zoom-out buttons.
   */
  #map2 .ol-zoom .ol-zoom-out {
    margin-top: 204px;
  }
  #map2 .ol-zoomslider {
    background-color: transparent;
    top: 2.3em;
  }

  #map2 .ol-touch .ol-zoom .ol-zoom-out {
    margin-top: 212px;
  }
  #map2 .ol-touch .ol-zoomslider {
    top: 2.75em;
  }

  #map2 .ol-zoom-in.ol-has-tooltip:hover [role=tooltip],
  #map2 .ol-zoom-in.ol-has-tooltip:focus [role=tooltip] {
    top: 3px;
  }

  #map2 .ol-zoom-out.ol-has-tooltip:hover [role=tooltip],
  #map2 .ol-zoom-out.ol-has-tooltip:focus [role=tooltip] {
    top: 232px;
  }

  /**
   * The zoomslider in the third map shall be horizontal, placed in the top-right
   * corner, smaller and orange.
   */
  #map3 .ol-zoomslider {
    top: 8px;
    left: auto;
    right: 8px;
    background-color: rgba(255,69,0,0.2);
    width: 200px;
    height: 15px;
    padding: 0;
    box-shadow: 0 0 5px rgb(255,69,0);
    border-radius: 20px;
  }

  #map3 .ol-zoomslider:hover {
    background-color: rgba(255,69,0,0.3);
  }

  #map3 .ol-zoomslider-thumb {
    height: 15px;
    width: 15px;
    margin: 0;
    filter: none;
    background-color: rgba(255,69,0,0.6);
    border-radius: 20px;
  }
  #map3 a.ol-zoomslider-handle:hover {
    background-color: rgba(255,69,0,0.7);
  }
</style>

<body>
<h4>Default style</h4>
<div id="map1" class="map"></div>

<h4>Placed between zoom controls</h4>
<div id="map2" class="map"></div>

<h4>Horizontal and completely re-styled</h4>
<div id="map3" class="map"></div>
<script src="main.js"></script>
</body>

app.component.ts:

import { Component } from '@angular/core';
import Map from 'ol/Map';
import View from 'ol/View';
import 'ol/ol.css';
import MousePosition from 'ol/control/MousePosition';
import {createStringXY} from 'ol/coordinate';
import {defaults as defaultControls} from 'ol/control';
import {addCoordinateTransforms} from 'ol/proj';
import {applyTransform} from 'ol/extent';
import {get as getProjection, getTransform} from 'ol/proj';
import {transform} from 'ol/proj';
import {ZoomSlider} from 'ol/control';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app1';

  map : any;
  constructor() {}
  ngOnInit() {

    var source = new OSM();
    var layer = new TileLayer({
      source: source,
    });
    var map = new Map({
      layers: [layer],
      target: 'map3',
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    });
    var zoomslider = new ZoomSlider();
    map.addControl(zoomslider);

 }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.