I'm currently in the process of converting a custom map from using a CATiledLayer scroll view to using custom map tiles in an MKMapView with an MKTileOverlay. Whilst the CATiledLayer-approach generally works well and looks nicer, you get a lot of things for free by using an MKMapView such as rotations which are otherwise very difficult to achieve.
So, I've redrawn my tiles for use with the recommended format of zoom level, column and row numbers, and have them displaying in the map view correctly. Note that my map tiles only cover a small region somewhere; I don't have them for the entire globe.
The first problem I noticed is that there seems to be an issue when you zoom in past the largest zoom level my tiles support. I have tiles all the way to zoom level 20 so I set my MKTileOverlay's maximumZ property to 20. If you zoom in to level 21, the map view no longer requests tiles at all. Any tiles loaded on the way to level 21 still show (albeit pixelated), but if you scroll away it won't load any more tiles, so eventually the map just becomes blank. Ideally, it would fall back to my level 20 tiles and display those instead, or prevent the user from zooming in too far. When I use the CATiledLayer, you could zoom in as much as you want and it would always show the most zoomed in tiles (even if you were zoomed in further than the tiles were 'comfortable' at). Example
I have other minor niggles too:
If you set canReplaceMapContent to true, you can zoom in a lot further (which is fine), but the camera clips the ground if you get too close and I get all sorts of rendering artefacts. Any way to prevent that from happening? Example
Sometimes there are small pixel-sized rendering artefacts between tiles which indicate the tiles aren't quite positioned or sized correctly my the MKMapView. These artefacts don't seem to affect the native maps app; any way to get rid of these? Example
As you pan around when zoomed in, there are a lot of white flashes as tiles are loaded and it's quite obvious. When I used the CATiledLayer, they were loaded in quite smoothly (by animating the opacity) and the lower-zoom levels were already present in the background so it was overall difficult to tell it was even using tiles. Is there any way to load in my tiles more seamlessly? Example
I'm guessing the answer to most of these questions is that it's not possible to fix using MKMapView, which is a shame because I really want to allow the user to change the heading of the map and it seems pretty difficult to do using a standard CATiledLayer!
Related
The tiles are loaded from disk via loadTileAtPath / URLForTilePath with a subclassed MKTileOverlay.
When setting the maximumZ of the overlay, tiles beyond that level are (as expected) no longer loaded. However, the tiles of the level above also disappear. Any ideas?
It's been a while for me, but I had some issues with this in the past. I think it could be something with the internal caching or the overlays.
For example, if it happens to be the case that the tiles disappear at the transition from zoom level 20 to zoom level 21, and it is also the case that your tile source has a maximum zoom level of 20, then the behavior you're seeing could be a result of polylines invalidating portions of MKMapView's rendered tile cache.
It could be that what you're seeing might be happening because your tile source doesn't provide tiles at a high enough zoom level for the amount of zooming you're attempting to do. Normally Apple's MKMapView render cache provides some limited overzooming, but when you do something that triggers a new render (like adding lines), the render cache gets invalidated and the pseudo-overzooming stops working.
However, I also once saw a fix simply by changing the level for the overlay,
Changed from "MKOverlayLevelAboveLabels" to
[mapView addOverlay:overlay level:MKOverlayLevelAboveRoads];
I hope these suggestions can get you a bit further :)
I'm using openseadragon with the excellent svg overlay plugin.
On Chrome, the app behaves as expected: users can tap to zoom in until a table rendered in SVG is fully visible, the note on the table is legible.
Here's the link to the demo. Zoom out to see the SVG version of the table appear, overlaying the fuzzy raster version of the background.
On Safari on iOS or OSX when zooming past a seemingly arbitrary threshold the table and everything on it start to disappear. The point of disappearance seems to depend on other factors I don't understand, hence this question for insight. For example, a orange circle drawn with two.js will disappear when the scale transform is precisely 51201 (at 51200 the circle is there). For the more complex table SVG, elements on the table will disappear at different scale levels, between ~23000 to 50000. Sometimes they'll disappear and then reappear upon a slight zoom in. Sometimes they'll disappear on zoom and then reappear as I pan around, the objects nearing the edge of the viewport.
IE 11 has a very similar issue.
Has anyone dealt with this before or solved it?
That's a really slick project!
In my experience, that kind of problem with SVG disappearing has to do with extreme amounts of zoom. The good news is you should be able to work around it by changing your viewport coordinates. By default the width of the image is a viewport value of 1, but you can set your image to be width 10,000 or some such, which will look exactly the same on the screen, but it means that the SVG thinks it's zoomed out a lot at first, so when you zoom in you can go a lot further.
If you're using two.js, another possible fix would be to switch over to canvas rendering and use https://github.com/altert/OpenSeadragonCanvasOverlay.
Btw, I'd love to share your project when it's done... please file a ticket at https://github.com/openseadragon/site-build/issues when you're ready and we can add it to http://openseadragon.github.io/examples/in-the-wild/.
I’d like to use a Shapefile to generate an interactive world map. I was able to import the data and use CG Paths to draw the map into one large view.
The map needs to support panning, zooming and touch interaction. For that, I've created a UIScrollView and placed the MapView (large view with all of the countries drawn) into it.
I need to improve two aspects of it:
Performance / rendering
I have drawn the map much larger than the screen size, in order to make it look reasonable when I zoom in. There are a few problems with this. First, when I'm zoomed out, I need the border stroke/line to be wider so they are visible. When I zoom in, I'd like the stroke to be a thinner. Also, when I zoom in, I can still see that the map is a blurry. I don't want to increase the view size too much.
How can I make the map look crisp when I'm zoomed in? I attempted to redraw the map on zoom in, but it takes far too long. Can I somehow only re render onscreen stuff?
Touch Interaction
I need to be able to have a touch event for every different country.
Possible approach?
I was thinking of trying to separate every country onto it’s own view. That should make touches easy to handle. Then I’m thinking I can possibly redraw the appropriate views that are on screen/zoomed to.
I've played with an app that does something similar ("World Maps"), and I can see that when you pan or zoom, the map is blurry for a second but then becomes clear. What is going on there?
use mapkit and provide custom tiles. dont reinvent the wheel and try to write yet another map framework
I think that you have to create different scaled area image from the big map image. how to say... imagine the google map, how it works... I think that provide many different zoom factor image for every area of the world... then merged display on the screen while user need show it ...
use code implemented the map effect is impossible on current iPhone device, out of the ability of the iOS device
The application I am working on requires a 4px bar height with a full screen size width. I need to be able to select this 4px bar and move it around. I also can not change the size of this bar it has to be 4px in height.
This wouldn't be that big of an issue if I wasn't using OpenGL to create the object. OpenGL obviously does not have its own selection features so I am needing to program my own.
Initially after research I built a color selector to identify the object. How my color selector works is what ever x and y my finger touch returns from touchesBegan: is the pixel I grab from a screenshot of the OpenGL View. The issue with this is finger location is not precise at all. If I use the mouse it works perfect...
I decided to maybe loop through a buffer zone of the selected x and y but unfortunately a screenshot of the OpenGL view has antialiasing happens to the image when it's stored in memory and the buffer returns several shade of my objects color. I could possibly do a comparative color look up, to see if its in the range of colors but that seems overly complicated with how much I have already had to do. Plus cycling through the buffer zone isn't quick.
I also have thought maybe just remembering the location of my line on the screen and if my finger is close to that location just know that that's the one I want to select and move it around.
The future of this application can have up to 4 lines just like this so, I want something more secure then just knowing the location of where it is in memory.
What better way is there out there of handling selection of small objects?
How about maintaining an array of frames for the four objects, but expand the heights to something more manageable (8px or bigger)? Then, a touch within the larger region could be compared against the array (using CGRectContainsPoint). If you get a hit, then "snap to" the center point of the smaller (4px) rectangle before beginning the drag.
I do something like this by maintaining a list of "drop targets" for drag & drop, where it snaps to the drop target when it gets pretty close. Don't know if I'm conveying the idea very well, but it ought to work.
If the four 4px rectangles are going to be contiguous or very close together, you'll have to be able to make the selected one stand out or the user won't be able to tell which they're dragging -- but you could do that by making it bigger (maybe 6-8 px) then bringing it to the front so it overlays its adjacent neighbors.
More of an idea than an answer I guess.
John,
I would suggest a different approach. As you've discovered, touches in iOS are very imprecise. Apple usually suggests that the "hit box" for your controls be at least 40x40 points. I've gone as small as 30x30 points, but that starts to get hard.
What I would suggest you do is to factor your code so the app knows where the line is, and keeps track of it as a logical object. Then in your touch handler, interpret touches based on a large "buffer area" around the things you want the user to be able to move. If you just have a single horizontal bar, this should work great. Where you'll get into trouble is if you have multiple, thin horizontal bars that are close together. In that case you might need to rethink your app design and find another way to solve the problem.
As for the implementation details, you might add a pan gesture recognizer to your OpenGL view, and have it notify the OpenGL view of touch and drag actions. Then your OpenGL view can use knowledge of where your draggable objects are to decide how to interpret the touches.
I'm tring to synchronize cocos2D layer objects with the map, I managed to get it working by adjusting the glView to the visibleMapRect of the MKMapView. I can zoom, move, my objects are following the map. But, there is a small and annoying lag between the MKMapView and the cocos2D Layer.
I'm synchronizing it at each display loop.
Method:
1) Retrieve the MKMapView.visibleMapRect
2) Set the glViewPort
3) Do an orthographic projection to adjust my layer to the MapView.
I already tried others methods, like moving the cocos2D layer with touch and then move the coordinates of my map according to the touch, still laggy.
Even disabling acceleration and deceleration of the MapView doesn't remove the lag.
Thanks.
Shot in the dark: we know that iOS devices use optimizations to speed up rendering while scaling. This is true for Safari browser, when you zoom in you actually only zoom in on the image that is currently being displayed as the browser window's contents. Only after you stop the pinch motion does the device update the view.
You'll see this specifically with text on older devices. When the device re-renders the contents with the new scale factor, the text suddenly becomes sharp and crisp again. I believe the same optimization is done in MKMapView.
You might want to check if the visibleMapRect values are actually updated during the zoom, and whether they accurately reflect the current zoom level or not.
The other issue I can imagine is that the framerate with MKMapView + Cocos2D is simply low. And specifically zooming might consume a lot of CPU power. You might want to enable the cocos2d FPS display to see what the framerate is.
Another trick that's necessary to allow smooth scrolling of views in cocos2d (particularly complex views like UITableView) is to reduce cocos2d's max framerate (animationInterval) and/or to run the rendering of the gl view on a separate thread. Your issue may simply be a variation of this issue: UIScrollView pauses NSTimer until scrolling finishes
Note that this also occurs with DisplayLink director. The info in this question did the trick for me.