search

mattrei / aframe-mapbox-component

A Mapbox component for A-Frame
https://mattrei.github.io/aframe-mapbox-component/
MIT License
16 stars 5 forks source link

Dimensions of mapbox plane different on mobile than desktop #10

Open kfarr opened 3 years ago

kfarr commented 3 years ago

Site: https://17thbikelane.glitch.me

Issue: When loading on desktop I see "correct" (expected) alignment of the mapbox plane with the rest of the 3d scene (Picture 1). However in mobile on a Pixel 3a the mapbox plane is incorrectly aligned (Picture 2) and appears to be smaller than in the deskop scene.

Snippet of code used to define mapbox component:

      <a-entity
        geometry="primitive: plane; width: 512; height: 512;"
        material="color: #ffffff; shader: flat; side: both; transparent: true;"
        mapbox="center: -122.415126, 37.763699; zoom: 18; 
          accesstoken: pk.eyJ1IjoibWF0dHJlIiwiYSI6IjRpa3ItcWcifQ.s0AGgKi0ai23K5OJvkEFnA;
          style: mapbox://styles/mapbox/satellite-streets-v11;
          pxToWorldRatio: 4;"
        position="0 0 0"
        rotation="-90 0 0"
      ></a-entity>

(Full code of scene here: https://glitch.com/edit/#!/17thbikelane?path=index.html)

Picture 1 - Desktop - Correct: image

Picture 2 - Mobile - Incorrect:

kfarr commented 3 years ago

Cross posted to stack overflow: https://stackoverflow.com/questions/65352749/mapbox-component-for-a-frame-displays-different-scale-for-desktop-vs-mobile

mattrei commented 3 years ago

hmm could be related to the devicePixelRatio setting? have not found anything related though.

i have tested also your example and it works with Mozilla Firefox Mobile Browser but not with Google Chrome....

kfarr commented 3 years ago

Thanks Mattrei. Looking at this issue again I see that the scale is not different in the mapbox satellite tiles, instead it is positioned incorrectly mostly on the z axis, slightly on the x axis