Geographic Information Systems Asked by LetsamrIt on April 10, 2021
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);
}
}
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP