i am implementing an OpenLayers map inside an Ionic application for iOS. However the OpenStreetMap contributors attribution is not coming in the proper way. It is coming in the middle of the screen. Also the controls are not properly visible. Is there anything i am missing? I am implementing the map using the code below


 <div id="map" class="map"> </div>
  loadMap() {

    const view = new View({
      center: fromLonLat([this.homeCoords.lon, this.homeCoords.lat]),
      zoom: 5

    this.map = new Map({
      target: 'map',
      controls: defaultControls({ attributionOptions: { collapsible: true }}).extend([ 
        new ZoomSlider(), 
        new Zoom()]),
      layers: [
        new TileLayer({
          source: new OSM()
      view: view


Screenshot for issue

  • 4
    It's a problem with the CSS. Are you missing some CSS import, or have you renamed some map elements?
    – til_b
    Commented Apr 12, 2023 at 7:40
  • where to add the css imports.It is an ionic app.Should i add it in the html header?. I have not renamed any map elements.
    – sujith1406
    Commented Apr 12, 2023 at 7:44
  • @til_b please advice how to add css and which css file. is it provided by openlayers?
    – sujith1406
    Commented Apr 12, 2023 at 9:15

1 Answer 1


thanks for the comment from @til_b. I fixed the issue by importing

@import "../node_modules/ol/ol.css"; 

in global.scss file in the ionic project.

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.