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

1 Answer 1


OK! Just realised I can use scss and compile it as part of the project, so I've added ol.css into my scss folder and recompiled it...looks good now!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.