Within the code snippet below, my aim is to adjust the width and height of the map using the style tag shown here:
<style>
#map3 .map {
width: 100%;
height:90px;
}
</style>
Despite trying various values for width and height, the map's dimensions remain unchanged. Can someone provide guidance on how to successfully modify the width and height of the map?
app.component.html:
<div class="MousePosition">
<div id="mouse-position"></div>
</div>
<form>
<label for="projection">Projection </label>
<select id="projection">
<option value="EPSG:4326">EPSG:4326</option>
<option value="EPSG:3857">EPSG:3857</option>
</select>
<label for="precision">Precision</label>
<input id="precision" type="number" min="0" max="12" value="4"/>
</form>
<div id="map"></div>
<style>
#map3 .map {
width: 100%;
height:90px;
}
</style>
app.component.ts:
ngOnInit() {
var mousePositionControl = new MousePosition({
className: 'custom-mouse-position',
coordinateFormat: createStringXY(7),
projection: 'EPSG:4326',
/*render: function(){
console.log(createStringXY(7));
},*/
// To place the mouse position within the map, comment out the following two lines.
target: document.getElementById('mouse-position'),
undefinedHTML: '',//for what to be rendered when the mouse leaves map scope: values https://openlayers.org/en/latest/apidoc/module-ol_control_MousePosition-MousePosition.html
});
this. map = new Map({
controls: defaultControls().extend([mousePositionControl]),
target: 'map3',
layers: [
new TileLayer({
source: new XYZSource({
url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
})
})
],
view: new View({
center: [0, 0],
zoom: 2
})
});
var projectionSelect = document.getElementById('projection');
projectionSelect.addEventListener('change', function (event) {
mousePositionControl.setProjection((event.target as HTMLSelectElement).value);
});
var precisionInput = document.getElementById('precision');
precisionInput.addEventListener('change', function (event) {
var format = createStringXY((event.target as HTMLInputElement).valueAsNumber);
mousePositionControl.setCoordinateFormat(format);
console.log(createStringXY(format));
});
this.map.on('dblclick', function(evt){
// Get the pointer coordinate
//let coordinate = transform(evt.coordinate);
var lonlat = transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326')
console.log(lonlat);
});
var zoomslider = new ZoomSlider();
this.map.addControl(zoomslider);
}