I'm using the Bing Maps v8 control.
I can set the zoom level to 20 at a specific location (33.736167, -117.977764) and it is definitely zoomed in more than zoom level 19 on both mobile and desktop. But if I set zoom level to 19, on the desktop I can zoom in to 20 but on mobile, I'm stuck at 19 (I can zoom out but not in).
I've tried setting maxZoomLevel when I create the map as well as by doing a setOptions with maxZoomLevel both before and after doing the setView on the map. I've also tried setting the zoom level to 20 when I create the map, again to no avail.
Here's a snippet:
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), { mapTypeId: Microsoft.Maps.MapTypeId.aerial, zoom: 20});
map.setView({center: new Microsoft.Maps.Location(33.736167, -117.977764), zoom: 20});
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
map.entities.push(pushpin);
You can see it working on desktop by pasting the snippet above here and hitting run:
https://www.bing.com/api/maps/sdk/mapcontrol/isdk/adddefaultpushpin#JS
Unfortunately, this playground won't let you customize the scripts when in mobile mode and the behavior doesn't reproduce when you switch chrome back and forth to mobile in the playground (I can get it to reproduce by switching to mobile in chrome developer tools in my own application and doing a refresh - but in the playground refresh in mobile).
I suspect the reason for this is that if you are using a mobile device with a high resolution screen (i.e. retina display), the map loads tiles from the next zoom level so as to double the pixel density of the rendered map.
That said, I'm not certain why you would be able to load a map at level 20 but not zoom into it in the same browser for the same location. However, if you are zooming into a different location, it is possible that tiles aren't available at zoom level 20 and thus the map doesn't let you zoom in. I recall Bing Maps having variable zoom levels since high detailed aerial imagery is only available in selected location.
Related
I am using Google Maps SDK on iOS using Swift, and have tried to get the map to go under the safe area, but it always respects the safe area.
I have attached the storyboard setup in the images.
How would I stop respecting the safe area and fill it?
I created a map in Mapbox studio and added it to my website. When viewed on desktop, the size of the icon points on the map are great. When I view on mobile, they're a bit too large. Is there a way to size the icons differently when viewing a map on mobile?
Mapbox-GL-JS doesn't itself provide support for desktop vs mobile. However:
If you're using Markers, you can give them responsive styling like anything else. For instance:
#media screen and (max-width: 750px){
.mapboxgl-marker {
width: 20px;
}
}
If you're using symbol layers, you would need to detect when the window size changes, and use that to set an appropriate icon-size.
I'm working with a custom image for a pushpin using the Bing Maps v7 javascript libabry. Everything works fine except the icons appear low-res / pixelated on an ipad or iphone with retina display. I've tried changing the height width but that doesn't seem to help.
Any ideas out there?
One thing that is really important with High definition screens is the actual resolution of the screen you're using.
To determine and adapt the url to use appropriate image with a higher resolution (by changing the path based on a variable), you can use:
var retina = window.devicePixelRatio > 1;
If retina is set to true, then you would compose a specific path to the image to point to the correct one.
You should check this question and answers to be able to understand how things work regarding the image and also be able to deliver and adapt the result in the good resolution:
Serving high res images to retina display
I am using Google Maps Android API v2 for creating a application which provides users with a custom map image and markers for place information. I would like to know if there is any option to overlay a PNG image file directly on top of Google Android maps. Something similar to the below example using Google Maps JavaScript API v3.
https://developers.google.com/maps/documentation/javascript/examples/maptype-image-overlay
This example uses TileOverlay, but you may also try with GroundOverlay, which has a simpler API and you can embeed your PNG directly without splitting it into tiles for all zoom levels. The drawback is you will see pixels on very high zoom levels.
Is there a way to increase the maximum zoom level of MKMapKit? As I zoom in further - eventually it no longer allows me to continue to zoom. Can this be overridden to allow for higher zoom levels?
No, you cannot.
The Map is compiled by google and has its limitations on how close you can zoom in. IF they were to update their maps to an even higher resolution and depth, the iOS SDK will hopefully be adapted accordingly.
You could cheat around this by enabling the accessibility options which then give you the possibility to zoom in the entire iPhone using a three-finger-tap.