CODEWITHSUNDEEP
angularopenlayers
Thomas Klapettek
Thomas Klapettek

Reputation: 81

Angular 7.1.3 and Openlayers 5.3.0 doesn't work

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:

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
    });
  }

Upvotes: 2

Views: 1823

Answers (2)

Vinodh Ram
Vinodh Ram

Reputation: 809

In map.component.html

<div id="mapId" class="map-css"></div>

In map.componenet.css

::ng-deep .map-css {
    height: 600px !important;
    width: 100% !important;
}

Upvotes: 0

FatAl
FatAl

Reputation: 899

Your XYZ source seem to be the problem. Look in the network console to see the problem.

See here a working example with OSM

Upvotes: 1

Related Questions