Generating a OpenLayers map as a Component

Ionic Framework
4

I was able to generate the map as a component thanks to the @robinyo links. What I needed to change was:

Define map variable as the OL Map class in the beggining of the code and load the map inside ngOnInit(). This also loads the styles buttons that don’t load in previous example. I still need to update the size of the map to show him though. The blurry screen in mobile appear to be a device thing, if I try to open the OL online example page it is also blurry.

openlayers.component.ts

import { Component, OnInit, Renderer, ViewChild } from '@angular/core';
import { NavController, Platform } from '@ionic/angular';
import { Map } from 'ol';
import { OSM, Vector as VectorSource } from 'ol/source.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';

@Component({
  selector: 'app-openlayers',
  templateUrl: './openlayers.component.html',
  styleUrls: ['./openlayers.component.scss'],
})
export class OpenlayersComponent implements OnInit {

	map: Map;
	
  	constructor() { }
	
  	ngOnInit() {
  		this.map = new Map({
		  layers: [
		  	new TileLayer({ 
		  		source: new OSM()
		  	})],
		  target: document.getElementById('map'),
		  view: new View({
		    center: [0, 0],
		    zoom: 3
		  })
		});
		setTimeout(() => {
  	  	  this.map.updateSize();
  	  	}, 500);
  	}
}

home.page.html

<ion-header>
  	<ion-toolbar>
  	  	<ion-title>
  	  	  	Ionic Blank
  	  	</ion-title>
  	</ion-toolbar>
  	<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
	<style>html, body { margin: 0; }</style>
</ion-header>

<ion-content>
	<app-openlayers></app-openlayers>
</ion-content>

openlayers.component.html

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

1 Like