I love Maps App. I like the usefulness of Google Maps and simplicity of Apple Maps. Using it everyday for navigation, food search, trip planning and more. I had one wishlist in the UI, though. When I want to explore the area that I'm looking at, I wanted to see a small map so that I can see what's around it and visually understand locational context. Currently, the panel just goes up to full screen, which was frustrating.

Lately, I discovered a very nice course called "100 days of SwiftUI", which finally pushed me to try understanding the whole concept of Swift. Also recently updated Xcode was helpful. Real-time update canvas really enabled fast prototyping experience. Actually the lead time to see what I just wrote was the biggest turn off for me.

Moreover, introduction of chatbots were huge confidence boost for me. Back then, I had to search a lot of times and click so many links to find something works, but then I couldn't really understand the complexity of it. If I change a value, it doesn't work, if I wanted to customize to my own liking, it crashes. Now, most chatbots (paid tier especially) just creates working code with step-by-step explanations. I could learn so much without spending too much time searching and browsing. I'm using the mix of Gemini Advanced, ChatGPT and Claude 3. Paid tiers were all satisfactory for my needs.

So I decided to bring my wishlist to life, not really trying to build an app. But more to teach myself and get me more used to writing code with SwiftUI.

Learning How to Code with LLM

I first wanted to know how I can create the map. Instead of searching, I simply asked, "Give me basic map view in SwiftUI" - then I got this (simplified, removed basic structures like import and view struct).

// Setting up region

@State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194),
        latitudinalMeters: 5000, // This controls the zoom based on physical distance
        longitudinalMeters: 5000 // Same as above, for width
    )

// Implement it to basic Map View

Map(coordinateRegion:$region)
    .ignoresSafeArea()

This worked perfectly and gave me this view. I added a ZStack to simply add frames around it.

Then I wanted to create a view that sits on top of the Map view. Which also need to be draggable. So I also went like, "Give me a simple view that is draggable in SwiftUI". What I like about this approach is that I just make everything more easily digestible. I now created a circle that moves as I drag. It is in the same view (also simplified).

//Setting up a variable that stores position
@State private var position = CGSize.zero

// Creating a circle and make it draggable
Circle()
  .fill(Color.blue)
  .frame(width: 100, height: 100)
  .offset(position)
  .gesture(
      DragGesture()
        .onChanged { value in
            self.position = value.translation
            }
        .onEnded { _ in
            self.position = .zero
            }
        )

Now this Circle is draggable, Map is interactive. This is the moment that really clicked for me. It's not about AI help you build something with zero-knowledge, it's actually very good learning tool. Help you to focus on learning instead of spending so much of time to poking around the web to search the answer.

Next time, I'll write about how I set different variables to control animation on drag gestures.

Useful links :

• Hacking with Swift

• A Designer's Guide to SwiftUI