Ionic cordova openlayers error in display

Ionic Framework ionic-v3
1

Hi!
Someone could help me to find out what the reason was

openlayers_error
openlayers_error.png478×630 24 KB

I’m sorry if my English writing is not accurate.
Thanks.

2

hi , you can use google map pluging https://ionicframework.com/docs/native/google-maps/

3

Hi, thanks for the reply. I can only use a OpenLayers map

4

Hello @abocsik,

You can use this link to solve your issue : Generating a OpenLayers map as a Component

5

You can fix this by adding the OL style file (CSS) in the page header.

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>