I'm using MKMapView to display a map on my iOS app. I've simulated my location to London for the sake of example as I know it has high quality aerial imagery.
Here is a picture from Apple's own Maps app. No problems, super quality:
Here is the same place from my app at the approximately same zoom level:
It looks like it's zoomed out, cropped and zoomed into that region as satellite image is from a more "zoomed out" zoom level. At that level, all the labels disappear too (in Maps), but I've got the labels. I've got multiple instances of MKMapView and the problem is present on all of them. I don't have any special filters, scaling, or anything that would affect the rendering of the maps. In other words, the view instances themselves aren't "zoomed in" in any way. What is exactly going on and how can I make MKMapView render the map at the quality where Maps renders it?
If you are using MKMapTypeSatellite type map, consider that this type has been abandoned by Apple.
Try using MKMapTypeSatelliteFlyover or MKMapTypeHybridFlyover for a better quality.
Related
I’m working on creating a marker based AR game using AFrame 1.2.0 and ar.js 3.3.3. The display shows 2D images of animals that the user has to “find”. The whole game functions well now, but I was running into an issue of photos appearing distorted or warped. I figured out that the issue is the marker’s plane is not being read correctly by mobile devices. The pictures below include a red cube to show the issue better. The top one is on a PC’s webcam and shows correctly the box is mounted to the marker. The bottom one shows the box is not mounted to the marker.
I figure that the issue is either mobile device’s gyroscope features or that the screen dimensions are affecting the aspect ratio of the screen.
I’ve tried a few properties on Aframe’s a-entity, such as look-controls=‘Enabled:false’ and look-controls=‘magicWindowTrackingEnabled: false’. Neither of those made a difference. I haven’t found properties within ar.js to use. Just wondering if anyone has come across this issue and found a fix.
images planing correctly with the marker
images not planing correctly
arjs comes in two different, mutually exclusive builds - Image + location based tracking, and marker tracking (link).
Importing the wrong one may/will cause incorrect behavior like the one you experience.
The problem I'm facing is similar and closely related to this issue on Github but that's for Unity SDK, my question is for iOS SDK.
I want to achieve the same thing. Let me explain, basically I have pixel grid in which each pixel'd have equal size. Pixel is set to be 10m x 10m in real world. The thing I experienced is that if pixel locates towards the northern or southern part of the world, its size is stretched like the following.
Click for larger resolution
But when such pixel locates along the equator line, or simply along the middle part of the world. It looks ok like following
Click for larger resolution
There's no problem about rendering stuff, or positioning on Mapbox. The thing is I want every pixel to be square visually.
I've read along on the issue I linked above. It relates to mercator and the world is not flat thus makes this visual happens. It looks stretched along the northern and southern part of world map. As well, I found out that there's no equal functionalities as presented in Unity SDK for this particular problem on iOS SDK, so I'm not sure which approach I should go on to solve this solution.
How can I achieve equal size of pixel on the gridline on mapbox using Mapbox iOS SDK? Is there already solutions provided in the SDK?
FYI.
My requirement also needs real distance as shown on the map. I'm not sure it'd affect the solution as presented in the link I linked above.
I use Mapbox iOS SDK 3.7.6
My initial approach is straightforward as I fix the size of pixel to be 10m x 10m, then calculate its corresponding latitude and longitude value. Use those values to position them in Mapbox treating entire world map as a tilemap. Anyway I didn't take into account mercator in calculation, so this might be the case, if so then how to do just that? Only thing from my checking as available in iOS SDK is MGLMapView's metersPerPoint(atLatitude:). No tile ID system, or Conversions.cs as seen on Unity SDK. So i'm not sure on how to go on and solve this problem.
Update
I managed to solve it and made it work!
I'll come back and post the solution.
My solution is to port sphericalmercator.js to swift, then use it in code. I use a fixed zoom level of level 22 as its visual look is closest to what I need and also before. I went with the approach to at least have it looks visually equal not necessary its physical size.
Thanks to a hint in this answer on how to use sphericalmercator.js.
Anyway from my testing with it, tile size as set when you creating an instance using SphericalMercator seems not to be in effect no matter what value I set. Only zoom level will determine number of tiles across the world map for you. Note that upper-left corner is origin which is 0,0 tile index. Lower zoom level value will generate large tile size, but higher value will generate smaller tile size.
You can take a look as SphericalMercator-swift; the code I ported from origin JS implementation as linked above along with how to use it to get tile index, or bounding box of longitude/latitude in swift code in order to do rendering stuff on top of Mapbox.
We have an iPhone app that uses mapbox to display offline maps created using tilemill. In previous versions of Mapbox the user could zoom in as much as they wanted even though the map had only be created to a level 15 zoom. This was important to us as we overlay a GPX track and waypoints over the map and it is important we can zoom in to view that information. The map of course distorted but wasn't a major issue.
We have created various maps with tilemill however we are finding that to be able to zoom in to the level we require needs a map of 100s of megabytes which is not feasible for an iPhone app. In previous editions of Mapbox the user was able to zoom in further than the zoom set when creating the app.
Is there any way to zoom into the maps further? or are there any other alternatives to view offline maps on a mobile device?
Thanks.
Additional comment: Another option would be to hide all data at zoom levels above 17 so that the map would go blank above zoom 17. i.e. user can zoom in but once they past a certain point the map goes blank. Therefore not requiring the thousands of tile images above zoom level 17. How could we do that in Tilemill?
I would love to reproduce GoogleHeart-like 3D map flyover even when offline.
As of iOS 7 MapKit allows us to draw custom offline tiles. It also allows us to set a Camera in order to see the map in 3D or 2.5D as you may wish to call it.
I was wondering: can I draw a 3D shape like Apple does for its flyover feature, on my custom tiles?
I need to apply a "bump-map" to the map in order to get a GoogleHeart-like 3D view and I was wondering if Apple would allow me to do just that with iOS 7 and custom tiles rendering + camera settings.
Thanks
I have experimented pretty extensively with this, but there is no supported way to do this. Right now, Apple only offers raster tile-based overlay, albeit with automatic 2.5/3D transformation when overlaid on a map. Hopefully in the future they will support 3D API and/or custom, say, OpenGL-based augmentation to the map.
After updating to iOS 6 I have noticed sever performance decreases when panning or zooming a MKMapView with multiple overlays. An app I created has approximately 600 polygon overlays of various colours, and ran lag-free (even on older iOS devices) on iOS 5, now runs extremely laggily (when zooming & panning) on iOS 6, even on the latest devices.
My hunch is that this is due to the fact the device has to actually dynamically create the map (since its vector based) rather than just display tiles onscreen.
Has anyone got any ideas to reduce the lag experienced when panning or zooming the map?
Some extra info, this low frame rate also occurs whilst zooming or panning areas where the overlays are not displayed on screen at all, so it is not to do with the creation of the overlays as they come onscreen.
You can try combining all of your overlays into a single one. This can dramatically boost performance.
The idea is to create an overlay with a bounding box that encompasses all of your polygons. This way your mapView: viewForOverlay will always be called. Create a property for your overlay that holds all of your polygons. Then in the drawMapRect: method of your overlay view, test all of your polygons for intersection with mapRect and draw them if necessary. This is important since you don't want to be drawing polygons that are off screen.
This strategy is based on Apple's own MapKit example projects. Check out HazardMap for an example of drawing several objects in a single MKOverlayView and check out BreadCrumb for an example of how to efficiently test polygons for intersection with your current mapRect in the drawMapRect method
I have a minimalistic MapKit tech demo and it's lagging noticeably as I run it on an iPad 3 with iOS6. Profiling reveals that it's CPU bound, but only 0.2% is from my own code. The big culprits in my case are rendering roads, followed by rendering labels - both done by MapKit. I am showing downtown San Francisco at a 5KM scale, so there are a lot of roads and labels to render.
So the moral of the story is: iOS6 maps are SLOW. Can't tell you how this compares to iOS5 or to an iPad 2, though. But it's lagging, and I am barely doing any work of my own at all.
P.S:
Open Instruments and use the Time Profiler. Make a recording + drill down to find your culprits. Then check 'hide system libraries' to find out how much of the lag is your responsibility vs MapKit's. Then optimize only as needed.