I am trying to compare a saved region with another region, whether it's inside of that region or not. The region is going to be changed each time the user zoom in on the map; when the function below is called:
func mapView(_ mapView: MKMapView, regionDidChangeAnimated animated:
Bool) {
You can easily define your own function for checking if an MKCoordinateRegion contains another one. One way to do this is to calculate the min/max latitude and longitudes of the region, then compare all 4 extremities between the 2 regions you want to compare.
extension MKCoordinateRegion {
var maxLongitude: CLLocationDegrees {
center.longitude + span.longitudeDelta / 2
}
var minLongitude: CLLocationDegrees {
center.longitude - span.longitudeDelta / 2
}
var maxLatitude: CLLocationDegrees {
center.latitude + span.latitudeDelta / 2
}
var minLatitude: CLLocationDegrees {
center.latitude - span.latitudeDelta / 2
}
func contains(_ other: MKCoordinateRegion) -> Bool {
maxLongitude >= other.maxLongitude && minLongitude <= other.minLongitude && maxLatitude >= other.maxLatitude && minLatitude <= other.minLatitude
}
}
let largerRegion = MKCoordinateRegion(MKMapRect(x: 50, y: 50, width: 100, height: 100))
let smallerRegion = MKCoordinateRegion(MKMapRect(x: 70, y: 50, width: 30, height: 80))
let otherRegion = MKCoordinateRegion(MKMapRect(x: -100, y: 0, width: 100, height: 80))
largerRegion.contains(smallerRegion) // true
largerRegion.contains(otherRegion) // false
smallerRegion.contains(otherRegion) // false
Related
I'm trying to create a map that will show the route of a workout, but I can't find anywhere in MapKit documentation as to how to customize the background, i.e. here I want the map itself to be transparent so that only the route (annotations) are visible. How can I do this?
struct MapOverlay: View {
#ObservedObject var workoutDetailViewModel: WorkoutDetailViewModel
var body: some View {
if let unwrappedWorkoutLocations = workoutDetailViewModel.fullyLoadedWorkout?.workoutLocations {
Map(
coordinateRegion: .constant(
MKCoordinateRegion(
center: unwrappedWorkoutLocations.map {$0.coordinate}.center(), // Use the midpoint of the workout as the centre of the map.
span: MKCoordinateSpan(latitudeDelta: 0.02, longitudeDelta: 0.02)
)
),
annotationItems: unwrappedWorkoutLocations.map {$0.coordinate}
) { routeLocation in
MapAnnotation(coordinate: routeLocation) {
Circle().fill(TrackerConstants.AppleFitnessOrange)
}
}
.cornerRadius(10)
}
}
}
struct MapOverlay_Previews: PreviewProvider {
static var previews: some View {
MapOverlay(workoutDetailViewModel: WorkoutDetailViewModel())
}
}
Don't use MKMapView. You want to take the coordinates and make a UIBezierPath from them, and render that into your own view, or a UIImage. Something like this playground:
import CoreLocation
import MapKit
let myCoords: [CLLocationCoordinate2D] = [
.init(latitude: 42.42, longitude: 42.42),
.init(latitude: 42.43, longitude: 42.425),
.init(latitude: 42.425, longitude: 42.427),
.init(latitude: 42.422, longitude: 42.426),
]
let r = MKPolylineRenderer(polyline: .init(coordinates: myCoords, count: myCoords.count))
let path = r.path!
let bezier = UIBezierPath(cgPath: path)
bezier.apply(.init(scaleX: 0.05, y: 0.05))
let renderer = UIGraphicsImageRenderer(bounds: .init(x: 0, y: 0, width: 640, height: 480))
let image = renderer
.image { context in
let size = renderer.format.bounds.size
UIColor.darkGray.setFill()
context.fill(CGRect(x: 0, y: 0, width: size.width, height: size.height))
UIColor.black.setStroke()
bezier.lineWidth = 5
bezier.stroke()
}
I would like to draw a Octagonal shape.
I don't know how to achieve this. Here is my code -
func drawOctagonalShape(){
let camera = GMSCameraPosition.camera(withLatitude: 37.4, longitude:-122.0, zoom: 10)
let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)
mapView.isMyLocationEnabled = true
mapView.settings.myLocationButton = true;
self.view = mapView
// Creates a marker in the center of the map.
let marker = GMSMarker()
marker.position = CLLocationCoordinate2D(latitude: 37.36, longitude: -122.0)
marker.title = "India"
//marker.snippet = "Malaysia"
marker.map = mapView
let rect = GMSMutablePath()
rect.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.0))
rect.add(CLLocationCoordinate2D(latitude: 37.45, longitude: -122.0))
rect.add(CLLocationCoordinate2D(latitude: 37.45, longitude: -122.2))
rect.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.2))
// Create the polygon, and assign it to the map.
let polygon = GMSPolygon(path: rect)
polygon.fillColor = UIColor(red: 0.25, green: 0, blue: 0, alpha: 0.05);
polygon.strokeColor = UIColor.init(hue: 210, saturation: 88, brightness: 84, alpha: 1)
//polygon.strokeColor = .black
polygon.strokeWidth = 2
polygon.map = mapView
}
Octagon is basically 8 points distributed equally on a circle. You can create a method like the following:
func generateCircle(around center: CLLocationCoordinate2D, radius: Double, pointCount: Int = 8, rotation: Double = 0) -> [CLLocationCoordinate2D] {
(0..<count).map { index in
let angle = rotation + (Double(index)/Double(pointCount))*Double.pi*2.0
return .init(latitude: center.latitude + cos(angle)*radius, longitude: center.longitude + sin(angle)*radius)
}
}
I hope the code speaks for itself. You would use it in your code like
let rect = GMSMutablePath()
generateCircle(around center: myCenter, radius: someSmallRadius, pointCount: 8, rotation: 0).forEach { coordinate in
rect.add(coordinate)
}
I would expect this to work in most cases. There are 2 potential problems however:
I am unsure how this would behave around edges of both longitude and latitude.
Radius expressed in degrees may be a bit incorrect at some points
Would it not be easier to simply generate an image and place that on your map?
I'm using an extension that helps the pins on my map to cluster and expand when tapped. With the update from Swift 4 to Swift 4.2 and now Swift 5, my app cashes whenever I use the suggested new Swift Syntax.
Here is my current code in Swift 4:
extension MKMapRect {
init(minX: Double, minY: Double, maxX: Double, maxY: Double) {
self.init(x: minX, y: minY, width: abs(maxX - minX), height: abs(maxY - minY))
}
init(x: Double, y: Double, width: Double, height: Double) {
self.init(origin: MKMapPoint(x: x, y: y), size: MKMapSize(width: width, height: height))
}
var minX: Double { return MKMapRectGetMinX(self) }
var minY: Double { return MKMapRectGetMinY(self) }
var midX: Double { return MKMapRectGetMidX(self) }
var midY: Double { return MKMapRectGetMidY(self) }
var maxX: Double { return MKMapRectGetMaxX(self) }
var maxY: Double { return MKMapRectGetMaxY(self) }
func intersects(_ rect: MKMapRect) -> Bool {
return MKMapRectIntersectsRect(self, rect)
}
func contains(_ coordinate: CLLocationCoordinate2D) -> Bool {
return MKMapRectContainsPoint(self, MKMapPointForCoordinate(coordinate))
}
}
I'm getting the error "'MKMapRectGetMinX' has been replaced by property 'MKMapRect.minX'" for all my of variables.
Here is the updated Swift 5 syntax that isn't working:
extension MKMapRect {
init(minX: Double, minY: Double, maxX: Double, maxY: Double) {
self.init(x: minX, y: minY, width: abs(maxX - minX), height: abs(maxY - minY))
}
init(x: Double, y: Double, width: Double, height: Double) {
self.init(origin: MKMapPoint(x: x, y: y), size: MKMapSize(width: width, height: height))
}
var minX: Double { return self.minX }
var minY: Double { return self.minY }
var midX: Double { return self.midX }
var midY: Double { return self.midY }
var maxX: Double { return self.maxX }
var maxY: Double { return self.maxY }
func intersects(_ rect: MKMapRect) -> Bool {
return self.intersects(rect)
}
func contains(_ coordinate: CLLocationCoordinate2D) -> Bool {
return self.contains(MKMapPoint.init(coordinate))
}
}
With this new syntax, all paths through this function will call itself. Hoping someone can give me some alternatives.
You simply don't need any of the properties that are related to the points, since they already exist in Swift 5 with the same name you gave them. The same is true for intersects.
All you need are your custom initializers and the contains method.
extension MKMapRect {
init(minX: Double, minY: Double, maxX: Double, maxY: Double) {
self.init(x: minX, y: minY, width: abs(maxX - minX), height: abs(maxY - minY))
}
init(x: Double, y: Double, width: Double, height: Double) {
self.init(origin: MKMapPoint(x: x, y: y), size: MKMapSize(width: width, height: height))
}
func contains(_ coordinate: CLLocationCoordinate2D) -> Bool {
return self.contains(MKMapPoint.init(coordinate))
}
}
I'm showing marker and drawing circle using the same coordinates. Don't know why but my marker is offset a little bit to the top. How do you think what is the problem?
override func viewDidLoad() {
super.viewDidLoad()
let camera = GMSCameraPosition.camera(withLatitude: 37.36, longitude: -122.0, zoom: 13.0)
setupMapWith(cameraPosition: camera)
showMarker(position: camera.target)
circleWith(position: camera.target)
}
func showMarker(position: CLLocationCoordinate2D) {
let marker = GMSMarker()
marker.position = position
marker.title = "Palo Alto"
marker.snippet = "San Francisco"
let markerView = UIView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
markerView.backgroundColor = .red
marker.iconView = markerView
marker.map = mapView
}
func circleWith(position: CLLocationCoordinate2D) {
let circ = GMSCircle(position: position, radius: 1000)
circ.fillColor = UIColor.MapAreaFilter.areaFilterColor
circ.map = mapView
}
Try setting your marker's groundAnchor property:
marker.groundAnchor = CGPoint(x: 0.5, y: 0.5)
I'm trying to create a curly bracket in Swift, from two points. The idea works fine, with a straight line, because it's currently not dynamic in anyway. My issue lies in finding the dynamic control points and center depending on the location of p1 and p2 points.
This is my current code:
override func viewDidLoad() {
super.viewDidLoad()
let path = UIBezierPath()
let p1 = CGPointMake(100, 100)
let p2 = CGPointMake(300, 100)
let c1 = CGPointMake(150, 80)
let c2 = CGPointMake(250, 80)
var midPoint = midPointForPoints(p1, p2: p2)
var midP1 = midPoint
midP1.x -= 10
var midP2 = midPoint
midP2.x += 10
midPoint.y -= 20
path.moveToPoint(p1)
path.addQuadCurveToPoint(midP1, controlPoint: c1)
path.addLineToPoint(midPoint)
path.addLineToPoint(midP2)
path.addQuadCurveToPoint(p2, controlPoint: c2)
let shape = CAShapeLayer()
shape.lineWidth = 5
shape.strokeColor = UIColor.redColor().CGColor
shape.fillColor = UIColor.clearColor().CGColor
shape.path = path.CGPath
self.view.layer.addSublayer(shape)
}
func midPointForPoints(p1: CGPoint, p2: CGPoint)->CGPoint{
let deltaX = (p1.x + p2.x)/2
let deltaY = (p1.y + p2.y)/2
let midPoint = CGPointMake(deltaX, deltaY)
return midPoint
}
This doesen't take the degrees of the points into account, so if I were to create the two points as:
let p1 = CGPointMake(100, 100)
let p2 = CGPointMake(300, 300)
It would not find the proper control points and midpoint.
Hope someone can help me in the right direction. The idea is of course in the end to just know the two points (p1, p2) and dynamically create every other points, I just typed in values for the moment, to make it easier for myself. I've added images of the issue to better show you.
First create a path for a brace that starts at (0, 0) and ends at (1, 0). Then apply an affine transformation that moves, scales, and rotates the path to span your designed endpoints. It needs to transform (0, 0) to your start point and (1, 0) to your end point. Creating the transformation efficiently requires some trigonometry, but I've done the homework for you:
extension UIBezierPath {
class func brace(from start: CGPoint, to end: CGPoint) -> UIBezierPath {
let path = self.init()
path.move(to: .zero)
path.addCurve(to: CGPoint(x: 0.5, y: -0.1), controlPoint1: CGPoint(x: 0, y: -0.2), controlPoint2: CGPoint(x: 0.5, y: 0.1))
path.addCurve(to: CGPoint(x: 1, y: 0), controlPoint1: CGPoint(x: 0.5, y: 0.1), controlPoint2: CGPoint(x: 1, y: -0.2))
let scaledCosine = end.x - start.x
let scaledSine = end.y - start.y
let transform = CGAffineTransform(a: scaledCosine, b: scaledSine, c: -scaledSine, d: scaledCosine, tx: start.x, ty: start.y)
path.apply(transform)
return path
}
}
Result:
Here's the entire Swift playground I used to make the demo:
import UIKit
import PlaygroundSupport
extension UIBezierPath {
class func brace(from start: CGPoint, to end: CGPoint) -> UIBezierPath {
let path = self.init()
path.move(to: .zero)
path.addCurve(to: CGPoint(x: 0.5, y: -0.1), controlPoint1: CGPoint(x: 0, y: -0.2), controlPoint2: CGPoint(x: 0.5, y: 0.1))
path.addCurve(to: CGPoint(x: 1, y: 0), controlPoint1: CGPoint(x: 0.5, y: 0.1), controlPoint2: CGPoint(x: 1, y: -0.2))
let scaledCosine = end.x - start.x
let scaledSine = end.y - start.y
let transform = CGAffineTransform(a: scaledCosine, b: scaledSine, c: -scaledSine, d: scaledCosine, tx: start.x, ty: start.y)
path.apply(transform)
return path
}
}
class ShapeView: UIView {
override class var layerClass: Swift.AnyClass { return CAShapeLayer.self }
lazy var shapeLayer: CAShapeLayer = { self.layer as! CAShapeLayer }()
}
class ViewController: UIViewController {
override func loadView() {
let view = UIView(frame: CGRect(x: 0, y: 0, width: 600, height: 200))
view.backgroundColor = .white
for (i, handle) in handles.enumerated() {
handle.autoresizingMask = [ .flexibleTopMargin, .flexibleTopMargin, .flexibleBottomMargin, .flexibleRightMargin ]
let frame = CGRect(x: view.bounds.width * 0.1 + CGFloat(i) * view.bounds.width * 0.8 - 22, y: view.bounds.height / 2 - 22, width: 44, height: 44)
handle.frame = frame
handle.shapeLayer.path = CGPath(ellipseIn: handle.bounds, transform: nil)
handle.shapeLayer.lineWidth = 2
handle.shapeLayer.lineDashPattern = [2, 6]
handle.shapeLayer.lineCap = kCALineCapRound
handle.shapeLayer.strokeColor = UIColor.blue.cgColor
handle.shapeLayer.fillColor = nil
view.addSubview(handle)
let panner = UIPanGestureRecognizer(target: self, action: #selector(pannerDidFire(panner:)))
handle.addGestureRecognizer(panner)
}
brace.shapeLayer.lineWidth = 2
brace.shapeLayer.lineCap = kCALineCapRound
brace.shapeLayer.strokeColor = UIColor.black.cgColor
brace.shapeLayer.fillColor = nil
view.addSubview(brace)
setBracePath()
self.view = view
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
setBracePath()
}
private let handles: [ShapeView] = [
ShapeView(),
ShapeView()
]
private let brace = ShapeView()
private func setBracePath() {
brace.shapeLayer.path = UIBezierPath.brace(from: handles[0].center, to: handles[1].center).cgPath
}
#objc private func pannerDidFire(panner: UIPanGestureRecognizer) {
let view = panner.view!
let offset = panner.translation(in: view)
panner.setTranslation(.zero, in: view)
var center = view.center
center.x += offset.x
center.y += offset.y
view.center = center
setBracePath()
}
}
let vc = ViewController()
PlaygroundPage.current.liveView = vc.view
The key to the problem is when the figure is rotated your base vectors will rotate. When your figure is axis-aligned your base vectors are u (1, 0) and v (0, 1).
So when you are performing midPoint.y -= 20 you can see it as the same as midPoint.x -= v.x * 20; midPoint.y -= v.y * 20 where v is (0, 1). The results are the same, check for yourself.
This implementation will do what your code does, only axis independent.
let path = UIBezierPath()
let p1 = CGPointMake(100, 100)
let p2 = CGPointMake(300, 100)
let o = p1.plus(p2).divide(2.0) // origo
let u = p2.minus(o) // base vector 1
let v = u.turn90() // base vector 2
let c1 = o.minus(u.times(0.5)).minus(v.times(0.2)) // CGPointMake(150, 80)
let c2 = o.plus(u.times(0.5)).minus(v.times(0.2)) // CGPointMake(250, 80)
var midPoint = o.minus(v.times(0.2))
var midP1 = o.minus(u.times(0.2))
var midP2 = o.plus(u.times(0.2))
Note: I set the factors to match the initial values in your implementation.
Also added this CGPoint extension for convenience. Hope it helps.
extension CGPoint {
public func plus(p: CGPoint) -> (CGPoint)
{
return CGPoint(x: self.x + p.x, y: self.y + p.y)
}
public func minus(p: CGPoint) -> (CGPoint)
{
return CGPoint(x: self.x - p.x, y: self.y - p.y)
}
public func times(f: CGFloat) -> (CGPoint)
{
return CGPoint(x: self.x * f, y: self.y * f)
}
public func divide(f: CGFloat) -> (CGPoint)
{
return self.times(1.0/f)
}
public func turn90() -> (CGPoint)
{
return CGPoint(x: -self.y, y: x)
}
}