Geo.admin.ch with Ionic Angular doesn't work on mobile Device

[Kunz Ellen]

Hi

I have a problem to show the geo.admin.ch "swisstopo.image" layers in a ionic mobile App. In the web emulator it shows the map but not on the mobile Device.

This is my code to create the map, I declare the ol and ga in my constructur. No error occurs while building or clicking on the map.

this.map = new this.ol.Map({
view: new this.ol.View({
resolution: 3,
center: [2602788.1488876604, 1204948.8879736636],
projection: "EPSG:2056"
}),
layers: [
this.ga.layer.create('ch.swisstopo.swissimage', {name: 'aerealMapLayer'}),
],
target: 'map'

I have already search in this forum for other solutions but nothing worked for me. Do you have any advise?

Thanks

Ellen

[GeoAdminCh API]

Hello,

I suspect you have a mismatch with your projection. What kind of requests are sent?

As a side note, I really encourage you to use pure OpenLayers (or any mapping framework suitable), as the geoadmin JS API is not supported anymore.

Regards,

Marc

[Dominik Ponniah]

Hi Ellen,

I did also tried this but it seemed not to work very well.

Therefore i would like to suggest you using Leaflet and the WMTS-Layers from swisstopo.

I use these currently in an exam as technology and it works great!

Cheers,

Dominik

[Kunz Ellen]

Hi 

Thanks for your answers.

In the moment I don't do any request to the geoadmin API in the moment but I want to do that in a further step.

Now I just use the function that are suggested by openlayers documentation. For my project I must use the geoadmin API because I need the specific information's.

@ Dominik

Thanks for your answer I will test it for my project, hope it works.

Did you test it on a mobile Device?

Thanks

Ellen

[Kunz Ellen]

Another question for the WMTS you can only have the style default  but what is if I want to have like in my code above the arealMapLayer?

Does this works with the WMTS or is that just for default maps?

[Dominik Ponniah]

Hi Ellen,

(it is me again; used the wrong account before :-))

Yes i've tested it already and it works great! Depending on which base-framework you are using (i use angular) you have to add various libraries to use leaflet in it.

Maybe this can help: https://edupala.com/how-to-add-leaflet-map-in-ionic/

I do not really know what layer you mean at the moment. But i used various Layers for Aviatics inside my App.

• https://wmts100.geo.admin.ch/1.0.0/ch.bazl.segelflugkarte/default/current/2056/15/0/1.png
  
• https://wmts100.geo.admin.ch/1.0.0/ch.swisstopo.swissimage-product/default/current/2056/15/1/1.jpeg
  
• https://wmts100.geo.admin.ch/1.0.0/ch.bazl.luftfahrtkarten-icao/default/current/2056/15/2/1.png
  

My main problem is, that the API is not properly documented. Basic Informations are missing. Therefore i just opened my prefered layer inside https://map.geo.admin.ch and opened the Developer-Network-Tab using F12 in Chrome. In this way i got the direct WMTS-Links.

I hope it helps. If you need any further assistance, do not hesistate to ask :-)

Cheers!

[Kunz Ellen]

Hi Dominik :)

Thanks for your help, the leaflet is working on the mobile phone perfectly. :)

I see that you use a image that only shows a part of the swiss map: https://wmts100.geo.admin.ch/1.0.0/ch.swisstopo.swissimage-product/default/current/2056/15/1/1.jpeg

For my thesis I must also test if it would work with the openlayer and wmts, but I cant find a png or jpeg of the whole swiss.

Do you know if it is possible to get one image of the whole swiss, and not just a part of it?

Thanks for you answer 

Ellen

[Dominik Ponniah]

Hey Ellen,

i am currently also working at the final thesis and realized the map as followed:

This should help. In the example i just used the "normal" Link you posted above but i exchanged the last three values to {z}/{x}/{y}.jpg

If you like i can share also a git-repo if this could help. Just let me know :-)

Good luck at your thesis!

Cheers,

Dominik

[Kunz Ellen]

Hey Dominik,

Thank for your answer. :)

I have used this link already for the leaflet, but I'm searching for a link that is probably also working in openlayers. 

I tested the openlayers and wmts, this combination works on the mobile phone but I ca not find a link that shows the whole swiss. I just tested it with the image that I can get on the swisstopo website.

The Link that you send me is only working for the leaflet, did you test the openlayer with wmts?
Because I did find a solution yet.

Thank you, I also wish you good luck

Have a nice day

Ellen

[Kunz Ellen]

Hi 

I found a solution to show the map on a mobile device with openlayerys.

It's important to define the projection as a new Projection and also to add the projections with the proj4. If you only do one of both the map will not display.

Cheers

Ellen