I have the coordinate for northeast, southwest and center coordinates for a country Philippines
but it does not zoom in there. This is the code I am using in OnAppear in the map view
@State private var region = MKCoordinateRegion()
var body: some View {
Map(coordinateRegion: $region)
.edgesIgnoringSafeArea(.all)
.onAppear() {
region = MapTool.getPARCoordinateRegion()
}
}
static func getPARCoordinateRegion() -> MKCoordinateRegion {
let ph = getPHCountryPlaceMark()
let southWestPoint = MKMapPoint(x: ph.southWestLongitude, y: ph.southWestLatitude)
let northEastPoint = MKMapPoint(x: ph.northEastLongitude, y: ph.northEastLatitude)
let northWestPoint = MKMapPoint(x: southWestPoint.x, y: northEastPoint.y)
let mapRectWidth = northEastPoint.x - northWestPoint.x
let mapRectHeight = northWestPoint.y - southWestPoint.y
return MKCoordinateRegion(MKMapRect(x: southWestPoint.x, y: southWestPoint.y, width: mapRectWidth, height: mapRectHeight))
}
static func getPHCountryPlaceMark() -> CountryPlaceMark {
let countryPlaceMark = CountryPlaceMark()
countryPlaceMark.longName = "Philippines"
countryPlaceMark.shortName = "PH"
countryPlaceMark.centerLatitude = 12.879721
countryPlaceMark.centerLongitude = 121.774017
countryPlaceMark.southWestLatitude = 4.613444
countryPlaceMark.southWestLongitude = 116.931557
countryPlaceMark.northEastLatitude = 19.574024
countryPlaceMark.northEastLongitude = 126.604384
return countryPlaceMark
}
But instead zooms here. Thoughts?
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Created
Hi. Beginner here. Currently this is how my app looks like. What I wish to do is for every view that gets changed highlighted by the green square border, the menu item in the top horizontal HStack (my so called toolbar) also changes (highlighted in yellow circle).
Currently, I use an ObservedObservable to change the view (green square) via the sidebarmenu.
What is the best approach to the toolbar part? I was thinking that maybe within the child view e.g. SampleMap1, it has a custom menu item view variable which will be shown in the parent view (Where the yellow circle is lcoated) to add the menu item view. But I am not sure how to go about it.
Advise, suggestions appreciated. Thoughts?
These are what i have so far ...
struct MainContent: View {
@ObservedObject var navigationManager : SidebarNavigationManager
var body: some View {
VStack(spacing: 0) {
switch navigationManager.menuCategory {
case .SAMPLE1:
SampleMap1()
case .SAMPLE2:
SampleMap2()
}
}
.navigationBarTitleDisplayMode(.inline)
}
}
And content view looks like this ...
struct ContentView: View {
@StateObject var navigationManager = SidebarNavigationManager()
@State var show = false
var body: some View {
NavigationView {
ZStack(alignment: .leading) {
VStack(spacing: 0) {
HStack {
Button(action: {
withAnimation(.default) {
show.toggle()
}
}) {
Image(systemName: "line.3.horizontal")
}
Spacer()
Text("Home")
Spacer()
// This is where I wish to put like 2 or 3 menu items, default hidden and will show when the child view provides a menu item view with it that will get shown here
OverflowMenu() <-- ordinary view
}
.padding()
.foregroundColor(.primary)
.overlay(Rectangle().stroke(Color.primary.opacity(0.1), lineWidth: 1).shadow(radius: 3).edgesIgnoringSafeArea(.top))
MainContent(navigationManager: navigationManager)
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
HStack {
SideMenuView(show: $show, navigationManager: navigationManager)
.offset(x: self.show ? 0 : -UIScreen.main.bounds.width / 1.2)
Spacer(minLength: 0)
Rectangle().stroke(.clear).frame(width: show ? UIScreen.main.bounds.width - (UIScreen.main.bounds.width / 1.2) : 0)
.contentShape(Rectangle())
.onTapGesture {
if (show) {
withAnimation(.default) {
show.toggle()
}
}
}
}
}
.navigationBarHidden(true)
}
.navigationViewStyle(.stack)
}
}
struct SampleText : View {
let text: String
var body: some View {
Text(text)
}
}
Is this possible?
I have a class/struct that will store a function that will be used as an action to the button.
e.g.
struct Test {
var action: (() -> Void)?
}
This works
tempfunc() -> Void {
print("clicked it")
}
let test = Test()
test.action = tempfunc
Button("click me", action: test.action)
What I want to do is something like this.
test.action = () -> Void {
print("clicked")
}
Is this possible? If i try that code, error shows up saying "Cannot assign value of type '()' to type '() -> Void'"
Hi, is there a heatmap class that can be used in a SwiftUI Map? I do not want to use MKMapView and I have seen libraries that are not Swifty and does not make use of the new Map()
Tips are welcome on how to go about this? Or if anyone has a sample code?
I basically have an array of CLCoordinate2D and i wish to use that to generate a heatmap in the map.
No Google Maps please. I decidede not to use this since they do not have a SwiftUI version for it.
Hi. This is my MapView code
import SwiftUI
import MapKit
struct MapView: UIViewRepresentable {
var region: MKCoordinateRegion
var polylineCoordinates: [CLLocationCoordinate2D]?
func makeUIView(context: Context) -> MKMapView {
let mapView = MKMapView()
mapView.delegate = context.coordinator
mapView.region = region
if let polylines = polylineCoordinates {
let polyline = MKPolyline(coordinates: polylines, count: polylines.count)
mapView.addOverlay(polyline)
}
return mapView
}
func updateUIView(_ view: MKMapView, context: Context) {
}
func makeCoordinator() -> Coordinator {
Coordinator(self)
}
}
class Coordinator: NSObject, MKMapViewDelegate {
var parent: MapView
init(_ parent: MapView) {
self.parent = parent
}
func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
if overlay is MKPolyline {
let routePolyline = overlay as! MKPolyline
let renderer = MKPolylineRenderer(polyline: routePolyline)
renderer.strokeColor = UIColor.white
renderer.lineWidth = 2
return renderer
}
return MKOverlayRenderer()
}
}
If i do this
var body: some View {
MapView(region: [array of CLLocationCoordinage2D])
.edgesIgnoringSafeArea(.all)
}
it works since the value of the region property is set in the constructor. However, what i want is to set the region property in the onAppear closure. What is lacking here since it does not work.
I wish to do something like this
var body: some View {
MapView(region: region)
.edgesIgnoringSafeArea(.all)
.onAppear {
region = [array of CLLocationCoordinage2D]
}
}
I want to apply the same thing to polylineCoordinates property but for now, if I can make it work with region, I am sure the same thing can be applied to polylineCoordinates property.
Thoughts?
Hi, beginner here. So I have read how 1 way to use an optional without having to be forced to unwrap it with ! is this ...
if let var1 = optionalVar1 {
}
This is not a prob. But what if i have too many optionals? I do not want to have nested if let blocks. Is there a shorter way not to do too many ifs that without having to unwrap it with ! ?
e.g.
if let var1 = optionalVar1 {
if let var2 = optionalVar2 {
if let var3 = optionalVar3 {
}
}
}
I wish to ask for suggestions how to go about how to fetch data once it is successful in a swift ui view.
Where is it best to put it? What annotation is best suited for this?
I have a map view and it fetches data first before showing marker annotations. I put it in onAppear. This may work if it is just 1 view. But if this view is used inside a TabView, then once the tab is selected, the onAppear block will be executed and will be fetched again.
What is the best way to go about this by fetching the data only once? Thoughts?
var body: some View {
TabView {
MapView(cameraUpdate: ...)
.onAppear() {
// fetch data here.
}
.onDisappear() {
}
.tabItem {
Label("tab2, systemImage: "list.dash")
}
MapView(cameraUpdate: ...)
.onAppear() {
}
.onDisappear() {
}
.tabItem {
Label("tab2, systemImage: "list.dash")
}
}
.onAppear() {
}
}
So you can unwrap an optional like this
if let var1 {
}
else {
}
What is the opposite for this one such that I only want to put code in the else.
Should I go with
if var1 == nil {
}
or is there something close like
if !(let var1) {
}
Thoughts?
Hi. This short code for Kingfisher goes like this
KingfisherManager.shared.retrieveImage(with: ImageResource(downloadURL: URL(string: "URL HERE")!)) { result in
switch result {
case .success(let value):
break
default:
break
}
}
I am actually interested in .success only but if i remove default it will show an error message like Switch must be exhaustive.
How to make this an if statement that goes something like this
if result == .success {
how to get value in scope here so i can use it. thoughts?
}
I am trying to avoid doing different code in swift. I already found a good library in java
https://github.com/ChristianLutz/gpcj
I was wondering if anybody has used a related library like that in Swift?
I only wish to draw the convex hull of the typhoon path in maps
Thoughts?
Hi all. Came here as a last resort. All the samples provided that I came across are not in SwiftUI.
Google's documentation is also outdated since they do not provide any samples or tutorial to do so in SwiftUI.
While showing the map in SwiftUI requires you to extend a UIViewRepresentable, i have no clue how to apply the custom info window with it.
Anyone got suggestions?
See sample code
@State private var citiesList: [City]?
var body: some View {
if let cities {
content(cities)
}
else {
AsyncView(
operation: { try await getData(()) },
content: { cities in
contentView(cities)
}
)
}
}
So this works ok. my issue is when adding a code above contentView(cities) since it seems this kind of closure only accepts 1 line, returning a view and does not accept any other code?
like if i add the line
citiesList = cities
contentView(cities)
it will say Type '()' cannot conform to 'View'
What is the solution for this?
Or is it possible that the "cities in" part, i can assign it to the citiesList, so that citiesList will be passed to the content(citiesList) method instead of content(cities) ?
This is my current view. Instead of a List, I use a LazyVStack wrapped under a ScrollView.
.onAppear does not seem to work here. I assumed it runs when the view is visible on the screen.
My goal is when the footer is visible, it always runs a Task.
What could be wrong?
@State private var cities: [City]?
@State private var index = 0
@State private var showFooter = true
func content(_ cities: [City]) -> some View {
return GeometryReader { geometryProxy in
ScrollView {
LazyVStack(alignment: .leading, spacing: 0) {
if cities.count > 0 {
ForEach(cities) { city in
HStack {
Text(city.header)
.bold()
.foregroundColor(.white)
.textCase(.uppercase)
.padding(.all, 8)
Spacer()
}
.background(Color(UIColor(named: PrefTool.instance.getBoolean(Keyword.DARK_MODE) ? "DarkerGray" : "DarkGray")!))
ForEach(city.businesses) { busines in
Text(business.name)
Divider()
}
}
}
else {
Text("Empty List")
}
}
.safeAreaInset(edge: .bottom, spacing: 0) {
if showFooter {
VStack {
Text("Footer")
}
.padding()
.frame(maxWidth: .infinity)
// The background will extend automatically to the edge
.background(Color.green)
.onAppear {
Task {
do {
let moreList = try await getMoreCities(index)
showFooter = false
if !moreList.isEmpty {
cities?.append(contentOf: moreList)
showFooter = true
}
} catch {
showFooter = false
}
}
}
}
}
}
}
}
This is used inside body
var body: some View {
content(cities)
}
Thoughts? What is a good way to show a footer and then run a task when it is visible in the screen.
The title might be confusing but here is an example data to give a clear understanding
struct City {
var name: String?
var businesses: [Business]?
}
So if i have a city array, i wish to merge the businesses array based on the city name since the city may have duplicates e.g.
[
{
name: "CIty 1"
businesses: [
{ name: "Business 1" },
{ name: "Business 2" },
]
},
{
name: "CIty 2"
businesses: [
{ name: "Business 1" },
{ name: "Business 2" },
]
}
{
name: "CIty 1"
businesses: [
{ name: "Business 3" },
{ name: "Business 4" },
]
}
]
In the data example above, there are 2 entries of City1. i am looking for a way to not have to use a dictionary, if it is possible to use the existing array and output it such that there is only 1 entry of City but will contain 4 entries of business.
Thoughts?
Hi. Please see screenshot. Currently the icon placeholder is small. What I am trying to replicate is to have an area (the one in red) where the place holder icon is in the middle horizontally and vertically.
That same red area is where the downloaded image will be drawn. I think the term for this is aspect ratio if i am not mistaken? That the height should be proportionate based on the width.
I am using Kingfisher to load the image. This is what I have.
KFImage.url(URL(string: ""))
.placeholder {
HStack {
Image(systemName: "photo")
.resizable()
.frame(width: 50, alignment: .center)
.background(.red)
}
.background(.yellow)
.scaledToFit()
}
.fade(duration: 0.25)
.onFailure { error in print("Load image error : \(error) = \(earthquakeDetail.imgUrl)")
}
.resizable()
.aspectRatio(contentMode: .fill)
Based on the screenshot image, the area for HStack is so thin with its height being small. My goal is to create an area like the one in red border.
Thoughts?