openlayers: Angular 7.1.3 and OpenLayers 5.3.0 doesn't work

Hi, I’m trying to set up openlayers on my angular 7.1.3 site. I’ve tried some examples but none of them work. I don’t get an error on the console, but the map does not show, Can you help me?

My Code: package.json { "name": "cachegames-editor", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^7.1.3", "@angular/cdk": "^7.1.1", "@angular/common": "^7.1.3", "@angular/compiler": "^7.1.3", "@angular/core": "^7.1.3", "@angular/flex-layout": "^7.0.0-beta.21", "@angular/forms": "^7.1.3", "@angular/http": "^7.1.3", "@angular/material": "^7.1.1", "@angular/platform-browser": "^7.1.3", "@angular/platform-browser-dynamic": "^7.1.3", "@angular/router": "^7.1.3", "@mapbox/point-geometry": "^0.1.0", "@mapbox/vector-tile": "^1.3.0", "@ngx-translate/core": "^11.0.1", "@ngx-translate/http-loader": "^4.0.0", "angular-webstorage-service": "^1.0.2", "angular2-tinymce": "^2.1.1", "core-js": "^2.5.3", "hammerjs": "^2.0.8", "highcharts": "^7.0.1", "highcharts-angular": "^2.3.1", "jquery": "^3.1.1", "ngx-bootstrap": "^2.0.3", "ngx-color-picker": "^5.3.3", "ol": "^5.3.0", "rxjs": "^6.3.3", "rxjs-compat": "^6.3.3", "ts-md5": "^1.2.0", "tslib": "^1.9.0", "underscore": "^1.9.1", "zone.js": "^0.8.19" }, "devDependencies": { "@angular-devkit/build-angular": "~0.11.0", "@angular/cli": "^7.1.3", "@angular/compiler-cli": "^7.1.3", "@angular/material": "^7.1.1", "@types/hammerjs": "^2.0.35", "@types/jasmine": "2.5.53", "@types/jquery": "^2.0.39", "@types/node": "~8.0.58", "codelyzer": "~3.1.2", "jasmine-core": "~2.6.4", "jasmine-spec-reporter": "~4.1.1", "karma": "~1.7.0", "karma-chrome-launcher": "~2.2.0", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.3.3", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^0.2.2", "parcel-bundler": "^1.10.3", "protractor": "~5.1.0", "ts-node": "~3.2.1", "tslint": "~5.11.0", "typescript": "^3.1.6" } }

map.component.html:

<div id=“map” class="map"></div>

map.component.css

.map { height: 600px; width: 100%; }

map.component.ts

`import { Component, OnInit, Inject, ElementRef, ViewChild } from ‘@angular/core’; import { CacheService } from ‘…/…/services/cache.service’; import { MaputilsService } from ‘…/…/services/maputils.service’; import { TranslateService } from ‘@ngx-translate/core’; import { GlobalSettingsService } from ‘…/…/…/services/globalsettings.service’; import ‘ol/ol.css’; import OlMap from ‘ol/Map’; import OlXYZ from ‘ol/source/XYZ’; import OlTileLayer from ‘ol/layer/Tile’; import OlView from ‘ol/View’;

@Component({ selector: ‘app-mapdata’, templateUrl: ‘./mapdata.component.html’, styleUrls: [‘./mapdata.component.css’], }) export class MapdataComponent implements OnInit { public map: OlMap; public source: OlXYZ; public layer: OlTileLayer; public view: OlView;

constructor(@Inject(CacheService) private cacheService: CacheService, private mapUtils: MaputilsService, public globalsSettings: GlobalSettingsService, private translate: TranslateService ) {translate.setDefaultLang(globalsSettings.getDefaultLanguage()); }

ngOnInit(): void { this.source = new OlXYZ({ url: ‘http://tile.osm.org/{z}/{x}/{y}.png’ });

this.layer = new OlTileLayer({
  source: this.source
});

this.view = new OlView({
  center: [6.661594, 50.433237],
  zoom: 3
});

this.map = new OlMap({
  target: 'map',
  layers: [this.layer],
  view: this.view
});

} `

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 18 (3 by maintainers)

Most upvoted comments

I had the same error, when using clr-tab and openlayers. setTimeout (() => {*init map*}, 0) helped me.

xaosaki on Apr 17, 2019

I’ ve the same isse too. With ionic & OpenLayer it’s the same problem : blank map on ion-tabs.

you can use in ngOnInit : setTimeout(() => { this.map.updateSize(); }, 500);

Solution here: https://forum.ionicframework.com/t/generating-a-openlayers-map-as-a-component/161373

LoisMonet on Jan 4, 2020

It’s not like if it was not documented e.g https://material.angular.io/components/tabs/overview#lazy-loading

By default, the tab contents are eagerly loaded. Eagerly loaded tabs will initalize the child components but not inject them into the DOM until the tab is activated.

If the tab contains several complex child components or the tab’s contents rely on DOM calculations during initialization, it is advised to lazy load the tab’s content.

  <mat-tab label="Landkarte">
          <app-mapdata></app-mapdata>
  </mat-tab>

should be

  <mat-tab label="Landkarte">
          <ng-template matTabContent>
          <app-mapdata></app-mapdata>
          </ng-template>
  </mat-tab>

but I could be wrong. If it solved the issue, can you close the issue as it seems unrelated to an OpenLayers bug but more about Angular not loading DOM element and making OpenLayers fails?

ThomasG77 on Feb 19, 2019

@tklapettek For the mat-tab issue you can init the map when the tab is selected. For this you can set the aria-label property on the mat-tab:

HTML

<mat-tab-group (selectedTabChange)="onTabChange($event)">
    <mat-tab label="first">
    </mat-tab>
    <mat-tab label="second" aria-label="myMapTab">
        <div id="map"></div>
    </mat-tab>
    <mat-tab label="third">
    </mat-tab>
</mat-tab-group>

And listen to the tab change event and when the ariaLabel property matches you can init your map:

TypeScript

onTabChange(event: MatTabChangeEvent) {
        if (event.tab.ariaLabel && event.tab.ariaLabel === 'myMapTab') {
            this.initMap();
        }
}

rubeonline on Sep 26, 2019

Hi JukiJh, I’ve still the problem with the Material Tabs and Openlayers. With no Tabs it works. With Tbas not

tklapettek on Feb 18, 2019

I’m not sure what is your issue. The only clue could be that you are using ngOnInit() whereas OpenLayers need a DOM element not available (hence I’ve’ used ngAfterViewInit instead). I’ve bootstrapped a working angular demo at https://github.com/ThomasG77/angular-openlayers-minimal-project. After code checkout and npm i, follow the Development server instructions

ThomasG77 on Jan 6, 2019