I have created a map using umap and embedded it on a website using the built-in iframe option. It works totally fine on desktop but the tile layer doesn't show up on mobile -- instead, the background is just grey. It does show up if it's manually selected through the menu by the user.
I have tried:
different browsers/devices
using a different tile theme
different screen resolutions in the dev console (all normal, just an issue on actual phones)
different iframe sizes and absolute/relative values
enabling/disabling scroll wheel zoom
current iframe code on the website:
<iframe width="100%" height="400" frameborder="0" allowfullscreen src="https://umap.openstreetmap.fr/en/map/meinfirmenwiki_426663?scaleControl=true&miniMap=false&zoomControl=true&allowEdit=false&moreControl=false&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=expanded&onLoadPanel=none&captionBar=false&fullscreenControl=true"></iframe>
Edit: it's the same when checking the map on the umap website
The configured tile layer doesn't support "retina tiles". These tiles are used for displays with a high DPI. These are commonly found on smartphones and on large desktop screens.
The difference between these two is the tile layer URL. In your configuration a "standard" tile is retrieved for example via
https://a.forte.tiles.quaidorsay.fr/en/8/137/91.png
while a "retina tile" is retrieved via
https://a.forte.tiles.quaidorsay.fr/en#2x/8/137/91.png
Note the #2x. The latter URL doesn't exist, though. This means you either have to switch to a tile server supporting retina tiles or you have to disable retina tiles for your map.
To disable retina tiles you have to remove the {r} placeholder from your tile URL. Replace
https://{s}.forte.tiles.quaidorsay.fr/en{r}/{z}/{x}/{y}.png
with
https://{s}.forte.tiles.quaidorsay.fr/en/{z}/{x}/{y}.png
Related
I am creating an AMP story for my project with fullHD screens. I am trying to disable the "fullscreen mode" which is automatically turned on when the browser has some specific resolution. I need to get only fullscreen story without the background and buttons etc. I use screen 9:16 (1080x1920).
Example:
https://people.com/amp-stories/royal-a-to-z/
Screenshots:
Right - https://drive.google.com/file/d/1PZmG1HOfC7TkwEgD-xTeWfalI-kkaVaD/view?usp=sharing
Wrong - https://drive.google.com/file/d/128Qcg4cl4H2pUC0TxYvPG0vg_PIXPJML/view?usp=sharing
It is not currently possible to control which experience is used from the source code of the story; these default experiences are baked into the JavaScript of amp-story. If you are hoping to use this in e.g. a kiosk environment where you are looking to modify the behavior in a single browser window, you can increase your browser's zoom level to accommodate the larger screen resolution, and the desktop experience should not get triggered.
I'm creating the splash images for my app but I've got some questions:
Can I create of all them at once? I've seen some repos for this but
there are not updated with new sizes (e.g 2048x1536)
Would be possible to use the same image for different sizes?
My phone is 1920x1080 but there is no splash screen size for that so it takes one and applies a disproportionate image. If I've got
text on it it looks really badly.
What happens with the rest of images when I build? Meteor removes the rest? Are located in resources/splash.
Could be possible to use a html with css page?
Thanks in advance!
Next time you should consider splitting your questions into independent posts.
Creating splash images: if your image is simple enough, indeed you have many scripts that can generate the different sizes automatically. I am sure you can customize them to fit your sizes.
Use the same image for different sizes: in general, that would mean your image will be stretched by the device to fill the screen. On Android, you can define a 9-patch PNG that will tell the device which pixels can be stretched, so that some part(s) of your image is not deformed.
Deformed image for 1920x1080 screen: depending on the pixel density, there should very probably be a placeholder for that.
Storage of image versions: by default, all versions (i.e. sizes) are packaged within your APK / APP, so that whatever the device needs will be available once user has downloaded the app.
Using an HTML+CSS page for splash screen: in general, no, but it depends on what you want to do with your splash screen. Meteor calls it "launch screen", because it is the first thing it displays while the app is loading / "launching". In particular, the WebView and local server may not be ready yet, and cannot serve any HTML/CSS. That is why you have to use a plain image, which is passed to a very simple activity while the app is loading. But some people also use a "waiting screen" between some parts of their app. In that case, your WebView and local server are already loaded, and you can simply use whatever you want.
Update:
For Android, if 9-patch PNG does not fit your need, you can also try to request Cordova's splashscreen plugin to maintain the aspect ratio of your image:
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/#preferences
<preference name="SplashMaintainAspectRatio" value="true" />
"SplashMaintainAspectRatio" preference is optional. If set to true, splash screen drawable is not stretched to fit screen, but instead simply "covers" the screen, like CSS "background-size:cover". This is very useful when splash screen images cannot be distorted in any way, for example when they contain scenery or text. This setting works best with images that have large margins (safe areas) that can be safely cropped on screens with different aspect ratios.
In Meteor, you would use App.setPreference in mobile-config.js:
App.setPreference("SplashMaintainAspectRatio", true, "android");
I have an A-Frame WebVR scene. I am trying to put it in an iframe.
<iframe src="https://aframe.io/aframe/examples/boilerplate/hello-world/"></iframe>
But when I Enter VR, it does not go full screen and render to the VR headset. How can I enable stereoscopic VR in an iframe?
You must set allowvr="yes" on the iframe. If you go to https://aframe.io, you'll see that all the examples are iframed, so you can follow their example.
<iframe allowvr="yes" src="https://aframe.io/aframe/examples/boilerplate/hello-world/"></iframe>
Note that this does not work well for mobile smartphones yet because mobile browsers like iOS Safari do not allow iframe's access to device orientation and device motion sensors. This could be worked around by post messaging device orientation data to the iframe. This is filed at https://github.com/googlevr/webvr-polyfill/issues/173
Only one <a-scene> can exist on a page. Alternatively, we can use an <iframe> with allowfullscreen="yes" and allowvr="yes":
<iframe allowvr="yes" allowfullscreen="yes" src="https://aframe.io/aframe/examples/boilerplate/hello-world/"></iframe>
i have created image grid using css but it look fine to desktop but when i go to moibile and tablet view the images distorts.is there a way so that it can be keep proper accross all devices.
Here is the fiddle for the example what i have done so far.
[Here is the fiddle][1]
http://jsfiddle.net/o6epbgoa/
So I try to use KML Layer with custom icons for my Google Maps V3 mobile webapp (using jQuery Mobile). The base layer of the map is displayed correctly with sharp resolution and the zoom control is styled in compact mode automatically by the API, so I guess the API has detected the mobile device alright.
However, the custom icons on the KmlLayer appear to be blurry, as a common symptom of displaying low-res marker image on high density mobile display (retina and such), despite the fact that I've already used the double-sized images. I tried to adjust the <scale> tag in the kml file to no avail, since it seems to only affect the icons after being downsampled to 32*32 by Google's server.
So the question is: is there a way to request the Google KmlLayer server to serve high-res tile images? I didn't see any such option in the documentation. Maybe some trick on the KML generation side?
Thank you in advance.
UPDATE: as Chad stated below this is not currently supported. So while I open my photoshop and design the new marker image so that it won't be so much ugly when blurred out, here's the link for the feature request on Google's page.
I am sorry I but I don't think it is available. All you can do is in your KML where you write
<IconStyle id="mystyle">
<Icon>
<href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
<scale>1.0</scale>
</Icon>
</IconStyle>
Make sure you use high resolution icon. I hope it helps.