AJS AJS - 2 years ago 87
Swift Question

Zooming in on a cordinate from the raw image in a UIScroll View in Swift

In my app I have a list of countries. I want the user to be able to click on one of the countries (A button) and it zooms into that country on said map. I have the coordinates from the raw png file, but when I am setting those coordinates multiplied by the scrollViews frame size (Width or height) divided by the imageViews Image size (Width or height) to the contentOffSet it doesn't position itself to the country I choose.

Here is what I have so far:

For Testing Purposes I set the coordinates to variables. These will change based on what the user chooses. Also for testing purposes I made it so when the view loads it automatically runs the code that would run when clicking the button for Afghanistan.

@IBOutlet var scrollView: UIScrollView!
@IBOutlet var mapImageView: UIImageView!

override func viewDidLoad() {

var xScale = scrollView.frame.size.width / mapImageView.image?.size.width

var yScale = scrollView.frame.size.height / mapImageView.image?.size.height

var xCord = 3090
var yCord = 1280

scrollView.zoomScale = 3

scrollView.contentOffset = CGPointMake((x * xScale) - (scrollView.bounds.size.width / 2), (y * yScale) - (scrollView.bounds.size.height / 2))


I would also like the country to be visible so I am using a formula to calculate the zoomScale based on the size of the country. For testing purposes I set the
scrollView.zoomScale = 3
. The country I am aiming to zoom in on is Afghanistan. But keep in mind the
will change based on which country the user picks.

Here is the map I am using. Afghanistan is highlighted in yellow.

Just for clarification the scrollView contains an imageView which holds the map image I gave the link to above.

Also for clarification the code has to be generic for any coordinate (from the raw image file) and the
calculated through the formula (Said above not in code but in writing).

My question in conclusion is how can I use the coordinates I collected from the raw image file (Specifically the map image), and position my scrollViews visible part on the coordinates I collected.

Answer Source

I figured out the issue. My theory is that the content size didnt have enough time to generate before i set the content off set. Anyways i added the content off set code into the viewDidApear method and then added the zoomScale setting into the viewDidLoad. Also I changed the scrollView.contentMode to UIViewContentMode.Redraw and I used setContentOffset to add a bit of animation. It works perfectly on any zoomScale value. Here is my code...

@IBOutlet var scrollView: UIScrollView!
@IBOutlet var mapImageView: UIImageView!

override func viewDidLoad() {

     scrollView.zoomScale = 5


override func viewDidAppear(animated: Bool) {

        let xScale = scrollView.contentSize.width / (mapImageView.image?.size.width)!
        let yScale = scrollView.contentSize.height / (mapImageView.image?.size.height)!

        let xCord:CGFloat = 3090
        let yCord:CGFloat = 1280

        scrollView.setContentOffset(CGPointMake((xCord * xScale) - (scrollView.bounds.width / 2), (yCord * yScale) - scrollView.bounds.height / 2), animated: true)

        scrollView.delegate = self
        scrollView.contentMode = UIViewContentMode.Redraw

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download