ionic: Map doesn't load when inside <ion-content>

[Olivier Stuker]

Hi everyone

I'd like to use the API in an ionic-project. But i ran into a strange behaviour:

It works, as long as the id="map"-div is NOT inside an <ion-content>-element. If it is inside a <ion-content>-element, no layers are created/added.

E.g. this works:

<ion-header>
  <ion-toolbar>
    <ion-title>My Title</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
</ion-content>

<div style="width: 360px; height: 180px;" id="map">
</div>

this doesn't:

<ion-header>
  <ion-toolbar>
    <ion-title>My Title</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div style="width: 360px; height: 180px;" id="map">
  </div>
</ion-content>

Since the id="map"-div gets populated with ol-viewport in both cases, I assume the script finds the div in both cases.

Also, I don't see any "Forbidden" responses.

Has anyone ever seen this behaviour? Do you know how to resolve it?

Kind regards,
Olivier Stuker

[Marc Monnerat]

Hello Olivier,

I'm probably the worst person to answer a JS question.

What do you mean by API? Is ist the JS API (https://api3.geo.admin.ch/loader.js)? If so I urge you not to use it for a new project, as it is pretty much dead by now (the most recent version is OL4). Additionally, it uses "document.write", to load everything, which is not state of the art anymore.

Regards,

Marc

--
You received this message because you are subscribed to the Google Groups "GeoAdmin API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to geoadmin-api...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/geoadmin-api/a0f1d200-7596-4dbb-818d-bc46f3db352eo%40googlegroups.com.

--

-- ἡ φύσις οὐδὲν ποιεῖ ἅλματα.

[Olivier Stuker]

Yes, the JS API. Is there an alternative to that?

[Marc Monnerat]

Hello Olivier,

You may use the pure Openlayers (OL), Leaflet on any framework capable of displaying OGC WMTS layers, either in the Swiss Grid projection or the ubiquitous Web-Mercator one. I guess, your main interest is displaying the topographical map?

Mapbox example: https://codepen.io/procrastinatio/details/BgXxNQ ( EPSG:3857)

OL5 example: https://codepen.io/procrastinatio/details/ac491e01f147521dbeea16a971ce991e (EPSG:3857) (not tested with OL6, but should be straightfoward)

OL5 EPSG:2056, using WMTS GetCapabilities for configuration: https://codepen.io/procrastinatio/pen/jOOdwGo

Regards,

Marc

Le mer. 10 juin 2020 à 09:55, Olivier Stuker <oli...@zimatech.ch> a écrit :

Yes, the JS API. Is there an alternative to that?

--

You received this message because you are subscribed to the Google Groups "GeoAdmin API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to geoadmin-api...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/geoadmin-api/7eb13a30-5697-4f0e-a212-ec394cf4c3a3o%40googlegroups.com.

[Olivier Stuker]

I now found this solution, based on this workaround from SO

If the map is not inside an <ion-content>, it works straight out of the box. But If it is inside an <ion-content>, the map component needs to invoke map.updateSize() after everything's been rendered so the tiles-containing div has any dimensions at all:

    ngAfterViewChecked() {

        this.map.updateSize();

    }

[Olivier Stuker]

Update: After running into some troubles today, I think using a timeout in ngAfterViewInit actually does the best job:

ngAfterViewInit() {

  setTimeout(() => { this.map.updateSize(); }, 0);

}