Generating a OpenLayers map as a Component

@leonardofmed wrote:

Ionic v4 & OpenLayers v5.3

I’m trying to generate a OL map as a component, but the only thing that is loaded is the icons. It seems that the styles and the JS configuration is not loading correctly, but I can’t figure out why. I was able to generate the map injecting the functions inside the main page configuration file (home.page.ts), but the quality of the map is low and blurry.

While trying to fix this I found some people suggesting to load the map as Component, so here I am. The last time I used Ionic he had just switched to version 3, so I’m a little rusty and might be missing something.

The open-layers.component.ts code:

import { Component, OnInit, ElementRef, ViewChild, Renderer } from '@angular/core';
import { Map } from 'ol';
import { OSM } from 'ol/source.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';

@Component({
  selector: 'app-open-layers',
  templateUrl: './open-layers.component.html',
  styleUrls: ['./open-layers.component.scss'],
})

export class OpenLayersComponent implements OnInit {
	@ViewChild('mapRef') mapRef: ElementRef;

	constructor() {}

	ngOnInit() {

		console.log('Hello');
	
  		var map = new Map({
  		  	layers: [
  		  		new TileLayer({ 
  		  			source: new OSM()
  		  		})],
  		  	target: document.getElementById('map'),	
  		  	view: new View({
  		  	  center: [0, 0],
  		  	  zoom: 3
  		  	})
  		});
	}
}

Inside open-layers.component.html:

<div #mapRef id="map" class="map"></div>

home.page.html:

<ion-content>
  <app-open-layers></app-open-layers>
</ion-content>

Posts: 1

Participants: 1

Read full topic