How to put the UITextView texting editing Magnifying Glass on the Google Maps GMSMapView
For example I have a GMSMapView to show my current location
I want to trigger a overlay Magnifying Glass view when calling delegate methods
mapView:didChangeCameraPosition: and mapView:willMove: in GMSMapViewDelegate
The purpose is to provide an overlay zooming subView according to the user tapping coordinates (like github.com/acoomans/iOS-MagnifyingGlass did on ImageView)
Please let me know if this is possible for Google Maps for iOS or if iOS MapKit can support this kind of customization
Update #2: mapView.addSubView(mapSubView) works now. But it pollutes the Main GMSMapView
Update #1: I tried mapView.addSubView, it seems does not work for GMSMapView although inherited from UIView
The intention of below code snippet is to retrieve user's touch point at the map and converts it into CGPoint for creating a second GMSMapView
func mapView(mapView: GMSMapView!, didTapAtCoordinate coordinate: CLLocationCoordinate2D) {
println("Tapping at (\(coordinate.latitude), \(coordinate.longitude))")
// 1. retrieve the user touch position as CLLocationCoordinate2D
let cameraPosition = GMSCameraPosition.cameraWithLatitude(coordinate.latitude, longitude: coordinate.longitude, zoom: 20)
// 2. convert it into CGPoint
let screenTouchPoints = mapView.projection.pointForCoordinate(coordinate)
// 3. set the CGRect for init the mapSubView
let frame = CGRectMake(screenTouchPoints.x, screenTouchPoints.y, 100, 100)
mapSubView = GMSMapView.mapWithFrame(frame, camera: cameraPosition)
// 4. Finally add to the main Map View
mapView.addSubview(mapSubView)
}
It seems plausible with a GMSMapView. Maybe have a second GMSMapView on top of the original(high corner radius to create a circle?) and animate the alpha and scale along with the zoom level within the second map. Do this whenever mapView:didChangeCameraPosition etc is called.
By taking reference to this Github Project, GMSMapView can also be magnified by putting the view hierarchy in this way:
View Controller > Magnifying View > The View want to be zoomed
The core rendering mechanism is
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context, self.frame.size.width/2, self.frame.size.height/2 );
CGContextScaleCTM(context, scale, scale);
CGContextTranslateCTM(context, -touchPoint.x, -touchPoint.y + (self.scaleAtTouchPoint? 0 : self.bounds.size.height/2));
[self.viewToMagnify.layer renderInContext:context];
}
loupe = ACLoupe()
magnifyingGlass = ACMagnifyingGlass()
magnifyingView = ACMagnifyingView(frame: self.view.frame)
magnifyingView.magnifyingGlass = loupe
magnifyingView.addSubview(Your_Subview_here)
by this method the magnifying view can capture current frame context, because Magnifying View is the container of other views so that the capturing can show the current UI situation and zoom by 1.5 times (default scale factor)
Related
I want to show my current location lower in the map (iOS 6 and iOS 7) as per below screen shot to user can see further view [google default app with google map].
Right now, the cursor that shows center in the view as per below image [my app with apple map] .
Therefore the largest part of the screen is used to display what's behind, while it cannot look forward very far.
In the first image and second image, I compare to Google Navigation, which shows the current position much lower in the screen, for about the same rotation angle. I've added some arrows to show what I'm talking about.
i tried below code for set center because i cannot find to set lower.
mapView.userTrackingMode = MKUserTrackingModeFollow;
and also try below method
[mapView setCenterCoordinate:currentLocation.coordinate animated:YES];
Setting layoutMargins on MKMapView works just fine.
According to docs,
The default spacing to use when laying out content in the view.
In iOS 11 and later, use the directionalLayoutMargins property to
specify layout margins instead of this property.
To offset camera's centering point to be centered in bottom half of the MKMapView, just set UIEdgeInsets.top to half of MKMapView's height.
class MapViewController: UIViewController {
#IBOutlet var mapView: MKMapView!
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
let layoutMargins = UIEdgeInsets(top: self.mapView.bounds.size.height / 2, left: 0, bottom: 0, right: 0)
self.mapView.layoutMargins = layoutMargins
}
Don't set the userTrackingMode or the map's centerCoordinate.
Instead, you can try pointing the MKMapCamera to a coordinate slightly ahead of the user's in the direction they are heading. This will automatically put the user's location lower on the screen.
Calculating the coordinate "a short distance ahead" is not currently built into the iOS SDK so you'd have to calculate it manually.
One way to do it is using the method shown in:
Calculate new coordinate x meters and y degree away from one coordinate.
Using the coordinateFromCoord:atDistanceKm:atBearingDegrees: method from that answer, you could set the camera like this:
MKMapCamera *cam = [MKMapCamera camera];
CLLocationCoordinate2D coordinateAhead =
[self coordinateFromCoord:currentLocation.coordinate
atDistanceKm:0.15
atBearingDegrees:currentLocation.course];
//adjust distance (0.15 km) as needed
cam.centerCoordinate = coordinateAhead;
cam.heading = currentLocation.course;
cam.pitch = 80; //adjust pitch as needed (0=look straight down)
cam.altitude = 100; //adjust as needed (meters)
[mapView setCamera:cam animated:YES];
Try this with the "City Bicycle Ride", "City Run", or "Freeway Drive" in the simulator.
You may need to adjust some of the numbers to get the perspective you want.
A simple workaround that should work is to make the MKMapView frame bigger than the screen of the device.
Something like:
MapViewHeight = (WindowHeight - desiredOffsetFromBottom)*2
I'm drawing a map within a view covering the entire device screen space.
On top of this view is another view occupying the bottom half of the screen. The top view is semi transparent and so the user can see the covered map beneath it.
Within the map I am displaying the user's current location.
The map view is automatically positioning the map such that the user's location is centered within the view - which is therefore the center of the device screen, however the center is also covered by the top view.
However I would like the user's location to be centered within the part of the map view that is not covered by the top view.
The simplest solution is to apply an offset to a coordinate to shift the map a little bit, taking advantage of the span of the region of the MKMapView.
CLLocationCoordinate2D newCenter = userCoordinate;
newCenter.latitude -= _mapView.region.span.latitudeDelta * 0.50;
[self.mapView setCenterCoordinate:newCenter animated:YES];
Value of 0.50 is there just to give you an example. By changing it you can adjust the offset.
You can also take the current center position, convert it to a CGPoint, then add desired offset in pixels to a CGPoint and convert it back to CLLocationCoordinate2D:
UIOffset offset = UIOffsetMake(30.0f, 40.0f);
offset.horizontal
offset.vertical
CGPoint point = [_mapView convertCoordinate:userCoordinate
toPointToView:_mapView];
point.x += offset.horizontal;
point.y += offset.vertical;
CLLocationCoordinate2D newCenter = [_mapView convertPoint:point
toCoordinateFromView:_mapView];
[_mapView setCenterCoordinate:newCenter animated:YES];
Hope it helps.
I have a scenario where I need to implement an Offline Map concept for which I am using the image of map on a UIScrollView that zooms on PinchGesture, which works fine.
Problem
I have a UIButton on map. While zooming, the button does not track its position with respect to UIImageView which is being scaled.I am able to reframe the button without affecting its size. But the position is wrong.
TLDR,
I need to reproduce the mapView with annotation kinda concept on UIScrollView with UIImage on it. Can any one help?
Thanks in advance :)
I have found the answer for this. I initially stored the button value in a CGRect initialButtonFrame. Then I updated the button frame (only origins, not the size of the button size as I wanted the button not to zoom like the image ie; I button should not zoom) using the scrollview delegate
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale
{
[self manageImageOnScrollView];//here i managed the image's coordinates and zoom
[self manageButtonCoordinatesWithRespectToImageWithScale:scale];
}
-(void)manageButtonCoordinatesWithRespectToImageWithScale:(float)scaleFactor
{
//initialButtonFrame is frame of button
self.button.frame = CGRectMake((initialButtonFrame.origin.x * scaleFactor),
(initialButtonFrame.origin.y * scaleFactor),
initialButtonFrame.size.width,
initialButtonFrame.size.height);
[self.scrollView addSubview:self.button];// I removed the button from superview while zooming and later added with updated button coordinates which I got here
}
If you know your current offset and zoom of your map, you should be able to compute the position of your button:
//Assuming your map image has its origin at 0, 0
CGPoint mapOffsetX, mapOffsetY; // these would come from your map as you calculated it.
CGPoint mapZoomFactor; // 1.0 means not zoomed, 3.0 means zooming in 3x, etc
CGPoint buttonAnchorPosition; //the position of your button on your map at 1.0 zoom
CGFloat buttonX = buttonAnchorPosition.x * mapZoomFactor + mapOffsetX;
CGFloat buttonY = buttonAnchorPosition.y * mapZoomFactor + mapOffsetY;
CGPoint buttonPosition = CGPointMake(buttonX, buttonY);
button.position = buttonPosition;
Try that, good luck
I am trying to Geo-fence using Google Map for iPhone app.
A lot of tutorials can be found for MKMapView. But can't find for the GMSMapView.
The basic thing is how to convert the screen coordinate (x,y) to the MapCoordinate lat/lng.
Is there any API available for Google Map in iOS for that conversion?
Thanks
You can use something like this:
GMSMapView* mapView = ...;
CGPoint point = ...;
...
CLLocationCoordinate2D coordinate =
[mapView.projection coordinateForPoint: point];
UPDATE:
The comments on the projection property in GMSMapView.h are:
/**
* The GMSProjection currently used by this GMSMapView. This is a snapshot of
* the current projection, and will not automatically update when the camera
* moves. The projection may be nil while the render is not running (if the map
* is not yet part of your UI, or is part of a hidden UIViewController, or you
* have called stopRendering).
*/
#property (nonatomic, readonly) GMSProjection *projection;
Therefore you can only access the .projection property after the map has rendered. It will be nil if you try to access it during loadView or viewDidLoad.
I don't know if there is a better way to tell if the map has been rendered, but I noticed that the mapView:didChangeCameraPosition: method is called once after the map view is first displayed, and that the map's projection property is valid there.
So, in your view controller's header, add GMSMapViewDelegate:
#interface ViewController : UIViewController <GMSMapViewDelegate>
When you allocate the map view, assign the delegate:
_map = [GMSMapView mapWithFrame: CGRectMake(0, 0, width, height) camera: camera];
_map.delegate = self;
[self.view addSubview: _map];
Then add the delegate method:
- (void)mapView: (GMSMapView*)mapView
didChangeCameraPosition: (GMSCameraPosition*)position
{
CGPoint point = CGPointMake(x, y);
CLLocationCoordinate2D coordinate =
[_map.projection coordinateForPoint: point];
}
Note that mapView:didChangeCameraPosition: is called every time the user changes the camera, so you'd probably need to use a flag, so that you only do your calculations the first time mapView:didChangeCameraPosition: is called.
No need to convert x,y to lat,long.
GMSCircle *fence = [GMSCircle circleWithPosition:locationCord radius:fenceRadius];
[fence setFillColor:[UIColor colorWithRed:102.0/255 green:178.0/255 blue:255.0/255 alpha:0.3]];
[fence setZIndex:100];
[fence setMap: _map];
Add this code when you are making GMSMapView and geo fence will be shown with your location marker.
I really love the way foursquare designed venue detail view. Especially the map with venue location in the "header" of view ... How was it done? Details are obviously some uiscrollview (maybe uitableview?) and behind it (in the header) there is a map so when you scroll up the map is beeing uncovered as the scroll view bounces... does anyone has an idea how to do this?
Here's the way I manage to reproduce it:-
You need a UIViewController with a UIScrollView as its view. Then, the content of the UIView you add to your scrollview should look like this :-
- The frame of the MKMapView have a negative y position. In this case, we can only see 100pts of the maps in the default state (before dragging).
- You need to disable zooming and scrolling on your MKMapView instance.
Then, the trick is to move down the centerCoordinate of the MKMapView when you drag down, and adjust its center position.
For that, we compute how much 1point represent as a delta latitude so that we know how much the center coordinate of the map should be moved when being dragged of x points on the screen :-
- (void)viewDidLoad {
[super viewDidLoad];
UIScrollView* scrollView = (UIScrollView*)self.view;
[scrollView addSubview:contentView];
scrollView.contentSize = contentView.frame.size;
scrollView.delegate = self;
center = CLLocationCoordinate2DMake(43.6010, 7.0774);
mapView.region = MKCoordinateRegionMakeWithDistance(center, 1000, 1000);
mapView.centerCoordinate = center;
//We compute how much latitude represent 1point.
//so that we know how much the center coordinate of the map should be moved
//when being dragged.
CLLocationCoordinate2D referencePosition = [mapView convertPoint:CGPointMake(0, 0) toCoordinateFromView:mapView];
CLLocationCoordinate2D referencePosition2 = [mapView convertPoint:CGPointMake(0, 100) toCoordinateFromView:mapView];
deltaLatFor1px = (referencePosition2.latitude - referencePosition.latitude)/100;
}
Once those properties are initialized, we need to implement the behavior of the UIScrollViewDelegate. When we drag, we convert the move expressed in points to a latitude. And then, we move the center of the map using the half of this value.
- (void)scrollViewDidScroll:(UIScrollView *)theScrollView {
CGFloat y = theScrollView.contentOffset.y;
// did we drag ?
if (y<0) {
//we moved y pixels down, how much latitude is that ?
double deltaLat = y*deltaLatFor1px;
//Move the center coordinate accordingly
CLLocationCoordinate2D newCenter = CLLocationCoordinate2DMake(center.latitude-deltaLat/2, center.longitude);
mapView.centerCoordinate = newCenter;
}
}
You get the same behavior as the foursquare app (but better: in the foursquare app, the maps recenter tends to jump, here, changing the center is done smoothly).
The example above is nice. If you need more help, I think they're using something very similar to RBParallaxTableViewController. https://github.com/Rheeseyb/RBParallaxTableViewController
It's essentially the same effect that Path uses for its header photo.
Yonel's answer is nice, but I found a problem as I have a pin at the center of the map. Because the negative Y, the point is hidden under my UINavigationBar.
Then, I didn't set the Negative Y, and I correct my mapView.frame according the scroll offset.
My mapView is 320 x 160
_mapView.frame = CGRectMake(0, 160, 320, -160+y);
Hope this helps someone.