1

The problem is that I am using Typescript 3.4.3 and the OpenLayer API is been documented only for Javascript. Somewhere I found that I need to install @types/ol": "^5.3.3" in order to use Openlayer with Typescript.

I have the following code but I do not get any error but also the map is not visible. I can not understand where the problem is.

I Did try some solutions that other users found useful like:

a) Ionic-Framework (4) - Openlayers map not working/visible (using a setTimeout)

b) https://stackoverflow.com/a/54281422/11873024

None of them works

map.page.ts

import Tile from 'ol/layer/Tile';
import Map from 'ol/Map';
import View from 'ol/View';
import OSM from 'ol/source/OSM';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {

  private map: Map;
  // @ts-ignore
  // b) @ViewChild('mapElementRef') mapElementRef: ElementRef;
  constructor() {}

  initializeMap() {
    this.map = new Map({
      target: 'map',
      layers: [
        new Tile({
          source: new OSM()
        }),
      ],
      view: new View({
        center: [0, 0],
        zoom: 3
      }),
    });
  }

  ngOnInit() {
    this.initializeMap();
    // b) this.map.setTarget(this.mapElementRef.nativeElement);


  }

}

map.page.html

<ion-content>
  <div class="ion-padding">
    <h3>Map Here!</h3>
  </div>
  <div id="map" class="map">
  </div>

</ion-content>

I expected an error or a map, but i got nothing so I don't know what to search.

skassi
  • 79
  • 8
  • I think you are missing `#mapElementRef` on the template, it should be `
    `, and then the target of the map should be `this.mapElementRef.nativeElement`     – cabesuon Aug 07 '19 at 01:25
  • @cabesuon I forgot to remove the last row of code. I was in the middle of trying too many things in order to succeed it (I will edit my code). I tried the suggestion you said but still nothing. With or without the nativeElement its the same – skassi Aug 07 '19 at 07:09
  • If you are going to use target with a dom id you have to add a timeout, in your code should be something like `ngOnInit() { setTimeout(_ => this.initializeMap(), 2000); }` – cabesuon Aug 07 '19 at 17:20
  • Btw, I am asumming you are seeing the zoom buttons but the OSM is not showing, that you specified a size to the map container div in home.page.scss, and you are importing ol.css. – cabesuon Aug 07 '19 at 17:26
  • Your assumption was correct. I was viewing the buttons and nothing else. Now with the timeout I can see the map ( and the buttons if I remove the scss I declared). It's weird because i Did try with setTimeout for 1000ms before and it didn't work. – skassi Aug 08 '19 at 07:34
  • Some personal advice: Take a look at https://leafletjs.com/. A few weeks ago I needed a simple map to visualize the location of some objects on a map and chose OpenLayers... After much work I finally got it working, only to realize that I just doubled my bundle size: This thing is HUGE. – Fabian N. Aug 08 '19 at 21:01
  • @FabianN. Yes I need to do the same simple thing. I have leafletjs.com in mind too. I finally got working the OpenLayers but yes indeed is heavy. Thanks both of you for the advises. – skassi Aug 09 '19 at 13:44

0 Answers0