Map is displayed, but zoom in/out buttons and logo of OpenStreetMap appears at the bottom of the map. It seems like styling is not applied, but I'm importing ol.css (code in Angular 4), not sure what I'm missing here. I've used this example: https://openlayers.org/workshop/en/basics/map.html
Section of my code (imports and init method):
//npm install ol
import 'ol/ol.css';
import Map from 'ol/map';
import View from 'ol/view';
import TileLayer from 'ol/layer/tile';
import OSM from 'ol/source/osm';
import XYZSource from 'ol/source/xyz';
import proj from 'ol/proj';
import VectorLayer from 'ol/layer/vector';
import VectorSource from 'ol/source/vector';
import Feature from 'ol/feature';
import Point from 'ol/geom/point';
import Style from 'ol/style/style';
import IconStyle from 'ol/style/icon';
import { IAddress } from "./address";
...implements OnInit {
this.map = new Map({
target: 'map-container',
layers: [
new TileLayer({
source: new OSM()
//new XYZSource({
// url:
// //'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
// //'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
//})
})
],
view: new View({
center: proj.fromLonLat([144.9, -38.1]),
zoom: 7
})
});