MapKit JS

RSS for tag

Embed interactive Apple maps on your website, annotate points of interest, and perform geo-related searches using MapKit JS.

Posts under MapKit JS tag

129 Posts

Post

Replies

Boosts

Views

Activity

MapKit JS - Center Map Around Coordinates
I'm working with MapKit JS for the first time. I'm using the 'Annotations With a Custom Callout' sample code as my starting point as my map will need to work in a similar way to this one. I've got the basics working but I would now like to specify the center coordinates for the map but can't get this to work and not sure of the correct syntax. For example if I wanted that map to centre around these coordinates: (37.8184493, -122.478409) I'm not sure where/how to specify these. I've tried adding: var center = new mapkit.Coordinate(37.8184493, -122.478409); after: const map = new mapkit.Map("map"); but this doesn't change how the map is displayed. Appreciate if someone can show me where/how to specify the center coordinates for this type of map.
0
0
773
Mar ’23
Quota of MapKitJS for company accounts
I can read that If you are doing web app development with MapKit JS, you get a daily limit of 250,000 map views and 25,000 service calls per Apple Developer Program membership. This is documented at the bottom of this page, as part of the MapKit JS Dashboard section. However it is not clear to me about the quotas for company account. My company has registered an Apple Developer Program as a company. We can create multiple users and each user have their own key/token for using Apple Maps in our different application. Are the quotas of 250k/25k per day for each user or for the whole company in this account?
0
0
910
Feb ’23
Prevent Balloon Animation when mouse-clicking/selecting MarkerAnnotation
I am trying to prevent the default mouse-click markerAnnotation animation, in which a clicked Balloon expands to a larger size. You can see a demo link of the behavior I wish to prevent at the following link (apple wouldn't let me embed it) gifyu(DOT)com/image/Smhl1 Lets say the code is something like... // helper vars let coordinate = new mapkit.Coordinate(37.33182, -122.03118) let options = { title: "My Custom Title", subtitle: "Anno's Address", color: "#0000FF" } // create the annotation let annotation = new mapkit.MarkerAnnotation(coordinate, options) // add custom click behavior in the eventListener callback annotation.addEventListener("select", (e) => { let clickedAnnotation = e.target clickedAnnotation.color = "#FF0000" // red }) // add to map map.showItems(annotation) After reviewing the mapkitjs annotation documentation I have tried: Adding enabled: false to options which does not work -- It does prevents the animation, but it also prevents ALL user interactivity, so no custom eventListeners() can be created or fired. adding e.stopPropagation() or e.preventDefault() to the eventListener callback which does not work adding e.target.selected = false to the eventListener callback which does not work... I'm surprised this didn't work. My guess its due to attempting to override the ~1 second animation after it already has started asyncronously(?) see docs here. TLDR: How do you prevent mouse-click animations on markerAnnotations?
1
0
1k
Jan ’23
MapKit Help
Hello everyone, I am learning swift and learning the MapKit API. I have done a little research but the App I am attempting to build is complicated (But will save my work money). I am creating a Bus Stop Manager for the school I work at. My best logic is I have the map overlay with a menu bar where you can add locations, those locations are saved either to an Array or an SQLite database. The map pulls all (between 8-15) locations and gives turn-by-turn directions for Sub Bus Drivers. So my question is well is it possible for my logic to become reality and if so does anyone have any tutorials or suggestions on how to go about it? Thank you!
1
0
1.1k
Jan ’23
Apple Maps Styling Configuration (Label Density)
Hi all, I'm wondering if it is possible to make any adjustments for the label density of road signage and points of interest on the map. I am creating a custom map with markers and the additional signage and road markings are really distracting from what I want to display. Can't seem to find anything in the documentation that refers to density only being able to customise the specific styling of icons or marker shapes for example. Thanks!
0
0
898
Jan ’23
【MKUserLocation】tap! and change image! with blueball
hello im a beginner developer to use UIkit. and i want to make product with map. i could learn MKAnottationView( custom pin) but MKUserLocation has no call out!! i want to make MKUserLocation to being tap to display half modal screen. And changing "NO NAME" image to other image. (however i like blueball) Please Tell me how to solve it....!!! thank you for reading my bad english sentence.
1
0
1k
Dec ’22
Annotation appears next to the road instead of the middle of it
I’m currently working on a taxi aggregator application (PWA). Within this application, users can order rides from multiple providers like Uber, Bolt or Freenow for instance. Using Mapkit js, I’m implementing a feature that consists of “showing the movement, the direction and the path of the driver” after a user has ordered a ride and the driver is coming to pick him up. I have access to the position of the driver (latitude and longitude) via the APIs from taxi providers, but when I place the coordinate on Mapkit js, it appears next to the road instead of the middle of it (please find attached some screenshots). Example I have this position from an API : latitude: 48.844837, longitude: 2.371858. On Google Maps, it shows well on the middle, but it appears next to the road on Mapkit js. How do you explain this behaviour and do you know how to fix this issue ? How to get (calculate) the direction of the driver since he doesn't use our application ? Thank you very much ! Looking forward to hearing from you soon!
0
0
1.4k
Nov ’22
Using MapkitJS in golang
So my question is regarding mapkitJS and if there is any way that i can use it in my backend just for it's directions API. The URL it makes requests on is https://api.apple-mapkit.com/v1/directions Generating a signed JWT token for authorisation is fine, but the part where that token needs to be used to initialise mapkitJS is where i am having difficulty Can you please let me know if there is a way i can make requests on that url above and how to go on about the initialization using that bearer token?
0
0
966
Nov ’22
xcode quit unexpectedly
I want to read almost a million addresses in foor loop using CLGeocoder and save their coordinates. I have also put a 2 second pause in each loop, but every time I want to run the program in Xcode, after 200 or 300 iterations, the program closes suddenly. Does anyone know the reason? Is there a problem with the code? here is my code : func createCSV(from recArray:[Dictionary<String, AnyObject>]) {     var csvString = "\("Adresse");\("latitute ");\("longitude")\n\n"     for dct in recArray {       csvString = csvString.appending("\(String(describing:dct["Adresse"]!));\(String(describing: dct["latitute"]!));\(String(describing: dct["longitude"]!))\n")     }     let fileManager = FileManager.default     do {       let path = try fileManager.url(for: .documentDirectory, in: .allDomainsMask, appropriateFor: nil, create: false)       let fileURL = path.appendingPathComponent("CSVRec.csv")       try csvString.write(to: fileURL, atomically: true, encoding: .utf8)     } catch {       print("error creating file")     }   } func getLocation(for address: String) async throws -> CLLocationCoordinate2D {       guard let coordinate = try? await CLGeocoder().geocodeAddressString(address) else {     throw getLocationError.unableToGetLocation   }       return coordinate.first!.location!.coordinate      } var Coordinates:[Dictionary<String, AnyObject>] = Array() var address: String for row in result.rows {   address = "\(row["LABE"] ?? "") \(row["HAUS"] ?? ""), \(row["Gemeindename"] ?? "")"   var coordinate = try await getLocation(for: address)   var dct = Dictionary<String, AnyObject>()   dct.updateValue(address as AnyObject, forKey: "Adresse")   dct.updateValue(coordinate.latitude as AnyObject, forKey: "latitute")   dct.updateValue(coordinate.longitude as AnyObject, forKey: "longitude")   Coordinates.append(dct)   sleep(2) } createCSV(from: Coordinates) Does anyone have an idea what to do?
1
0
1k
Nov ’22
MapKit JS Sample Code
Hello! MapKit JS sample code is now available at https://maps.developer.apple.com/sample-code. Here's a list of the samples that are currently available: Embedded Map Demonstrates simply displaying a map with minimal code. Annotations & Reverse Geocoding Demonstrates adding/removing annotations, using the Reverse Geocoding API to find place data. Annotations with a Custom Callout Demonstrates how to add custom styles to annotation callouts. US Population By State Overlays Demonstrates displaying, transforming, and interacting with GeoJSON-based map overlays. Callout Accessory Views Demonstrates displaying additional customized elements within a callout. Region and Zoom Limits Demonstrates limiting a map's viewport's zoom levels and latitude/longitude constraints. Animated Polyline Overlays Demonstrates animating an overlay property in a request animation frame loop.
1
1
4.8k
Nov ’22
Map doesn't pop up require user location, and it doesn't show my current location. It just appears as a map
import SwiftUI struct MapView: View {   @State var showHome = false   @StateObject private var viewModel = MapViewModel()           var body: some View {     ZStack {       Map(coordinateRegion: $viewModel.region, showsUserLocation: true)           .ignoresSafeArea()           .accentColor(Color(.systemPink))           .onAppear{             viewModel.checkLocationAuthorization()         } //      VStack { //        Image("Back") //          .padding([.leading, .top]) //          .frame(maxWidth: .infinity,alignment: .leading) //          .onTapGesture{ //            showHome.toggle() //        } //        Spacer() //      }               }.overlay(RootView()) //    if showHome{ //      HomeView() //    }   } } struct MapView_Previews: PreviewProvider {   static var previews: some View {     MapView()   } } final class MapViewModel: NSObject, ObservableObject, CLLocationManagerDelegate {       @Published var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 33.748997, longitude: -84.387985), span: MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01))       var locationManager: CLLocationManager?       private func checkLocationServiceEnable() {     if CLLocationManager.locationServicesEnabled() {       locationManager = CLLocationManager()       locationManager?.desiredAccuracy = kCLLocationAccuracyBest       locationManager!.delegate = self                     }else{       print("Your location service is off")     }   }       func checkLocationAuthorization() {     guard let locationManager = locationManager else {return}           switch locationManager.authorizationStatus {             case .notDetermined:       locationManager.requestWhenInUseAuthorization()     case .restricted:       print("Location is restricted")     case .denied:       print("You have denied location permission, go to settings to change it")     case .authorizedAlways, .authorizedWhenInUse:       region = MKCoordinateRegion(center: locationManager.location!.coordinate, span: MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01))     @unknown default:       break     }   }       func locationManagerDidChangeAuthorization(_ manager: CLLocationManager) {     checkLocationAuthorization()   } }
0
1
909
Oct ’22
Box UIElements Preview not displaying files in iOS App (only)
Details: We have integrated Box UIElements into our Salesforce community application. Box UIElements Explorer and Preview are integrated as Static resources in the Salesforce org and are loaded and called by Aura components. We are using Explorer 14.0.0 and Preview 2.42.0, with core-js 2.5.3 (polyfills). Salesforce Mobile Publisher is used to generate an iOS app and an Android app. The Box components work fine in Desktop Browsers, Mobile Browsers and the Android app, but (only) in the iOS app, the Box Preview hangs while trying to load a file. Is there anyone out there who has iOS app w/ Box integrated experience who has come across this issue or can offer some ideas as to why Preview is not loading, or knows how something about how this can be resolved? Thank you!
0
0
706
Sep ’22
Does MapKit for JavaScript Support Roads Markup?
Native maps applications have road mark up when zooming in closely in large cities. Is this feature available for Javascript library? If not, is there any chance that Apple would add the support in the future?
Replies
0
Boosts
0
Views
498
Activity
Apr ’23
MapKit JS - Center Map Around Coordinates
I'm working with MapKit JS for the first time. I'm using the 'Annotations With a Custom Callout' sample code as my starting point as my map will need to work in a similar way to this one. I've got the basics working but I would now like to specify the center coordinates for the map but can't get this to work and not sure of the correct syntax. For example if I wanted that map to centre around these coordinates: (37.8184493, -122.478409) I'm not sure where/how to specify these. I've tried adding: var center = new mapkit.Coordinate(37.8184493, -122.478409); after: const map = new mapkit.Map("map"); but this doesn't change how the map is displayed. Appreciate if someone can show me where/how to specify the center coordinates for this type of map.
Replies
0
Boosts
0
Views
773
Activity
Mar ’23
Quota of MapKitJS for company accounts
I can read that If you are doing web app development with MapKit JS, you get a daily limit of 250,000 map views and 25,000 service calls per Apple Developer Program membership. This is documented at the bottom of this page, as part of the MapKit JS Dashboard section. However it is not clear to me about the quotas for company account. My company has registered an Apple Developer Program as a company. We can create multiple users and each user have their own key/token for using Apple Maps in our different application. Are the quotas of 250k/25k per day for each user or for the whole company in this account?
Replies
0
Boosts
0
Views
910
Activity
Feb ’23
Getting County Name in MapKit JS 'Place' object
On iOS, we could get the 'subAdministrativeArea' in CLPlacemark when doing a reverse geocode via MapKit, which, in the US, gives us the county name. How do we get the equivalent county name when using MapKit JS? The Place object that is returned doesn't have a subAdministrativeArea and doesn't seem to have any other property for county name?
Replies
3
Boosts
1
Views
1.6k
Activity
Feb ’23
does mapkit JS support 3D view mode?
does mapkit JS support 3D view mode? I was trying to use it on web browser on my website thank you !
Replies
0
Boosts
0
Views
688
Activity
Feb ’23
Prevent Balloon Animation when mouse-clicking/selecting MarkerAnnotation
I am trying to prevent the default mouse-click markerAnnotation animation, in which a clicked Balloon expands to a larger size. You can see a demo link of the behavior I wish to prevent at the following link (apple wouldn't let me embed it) gifyu(DOT)com/image/Smhl1 Lets say the code is something like... // helper vars let coordinate = new mapkit.Coordinate(37.33182, -122.03118) let options = { title: "My Custom Title", subtitle: "Anno's Address", color: "#0000FF" } // create the annotation let annotation = new mapkit.MarkerAnnotation(coordinate, options) // add custom click behavior in the eventListener callback annotation.addEventListener("select", (e) => { let clickedAnnotation = e.target clickedAnnotation.color = "#FF0000" // red }) // add to map map.showItems(annotation) After reviewing the mapkitjs annotation documentation I have tried: Adding enabled: false to options which does not work -- It does prevents the animation, but it also prevents ALL user interactivity, so no custom eventListeners() can be created or fired. adding e.stopPropagation() or e.preventDefault() to the eventListener callback which does not work adding e.target.selected = false to the eventListener callback which does not work... I'm surprised this didn't work. My guess its due to attempting to override the ~1 second animation after it already has started asyncronously(?) see docs here. TLDR: How do you prevent mouse-click animations on markerAnnotations?
Replies
1
Boosts
0
Views
1k
Activity
Jan ’23
MapKit Help
Hello everyone, I am learning swift and learning the MapKit API. I have done a little research but the App I am attempting to build is complicated (But will save my work money). I am creating a Bus Stop Manager for the school I work at. My best logic is I have the map overlay with a menu bar where you can add locations, those locations are saved either to an Array or an SQLite database. The map pulls all (between 8-15) locations and gives turn-by-turn directions for Sub Bus Drivers. So my question is well is it possible for my logic to become reality and if so does anyone have any tutorials or suggestions on how to go about it? Thank you!
Replies
1
Boosts
0
Views
1.1k
Activity
Jan ’23
Maps color
Hi do you have any idea if there was something to do to costume the maps in grey at different color not the standard black and white tnks
Replies
0
Boosts
0
Views
855
Activity
Jan ’23
Apple Maps Styling Configuration (Label Density)
Hi all, I'm wondering if it is possible to make any adjustments for the label density of road signage and points of interest on the map. I am creating a custom map with markers and the additional signage and road markings are really distracting from what I want to display. Can't seem to find anything in the documentation that refers to density only being able to customise the specific styling of icons or marker shapes for example. Thanks!
Replies
0
Boosts
0
Views
898
Activity
Jan ’23
How to become authorized Apple maps guides provider?
How to become authorized Apple maps guides provider? Our application have audio tours in 40 countries so we want to add some of them in Apple Maps and create our branded page there. Is there any API to export guides from application to Apple maps?
Replies
0
Boosts
1
Views
1k
Activity
Dec ’22
【MKUserLocation】tap! and change image! with blueball
hello im a beginner developer to use UIkit. and i want to make product with map. i could learn MKAnottationView( custom pin) but MKUserLocation has no call out!! i want to make MKUserLocation to being tap to display half modal screen. And changing "NO NAME" image to other image. (however i like blueball) Please Tell me how to solve it....!!! thank you for reading my bad english sentence.
Replies
1
Boosts
0
Views
1k
Activity
Dec ’22
Javascrpt alert is not displayed in webview.
I cannot see the javascrpt alert in webview. I would like to solve this in info.plist or something. I don't want to use delegate to display alerts on the swift side. Can anyone help me solve this? Or do I need to wait for Apple's response?
Replies
0
Boosts
0
Views
643
Activity
Dec ’22
Can I use Mapkit JS for map functionalities in a native app?
Hi. We are developing a native mobile app using a React Native, and we are wondering if Apple's Mapkit JS can be used for this native mobile app. We once thought about using Apple's Mapkit (not Mapkit JS), but it seems like this is only compatible with iOS and not with Android (please correct me if I am wrong). Please let me know. :)
Replies
0
Boosts
0
Views
815
Activity
Nov ’22
Annotation appears next to the road instead of the middle of it
I’m currently working on a taxi aggregator application (PWA). Within this application, users can order rides from multiple providers like Uber, Bolt or Freenow for instance. Using Mapkit js, I’m implementing a feature that consists of “showing the movement, the direction and the path of the driver” after a user has ordered a ride and the driver is coming to pick him up. I have access to the position of the driver (latitude and longitude) via the APIs from taxi providers, but when I place the coordinate on Mapkit js, it appears next to the road instead of the middle of it (please find attached some screenshots). Example I have this position from an API : latitude: 48.844837, longitude: 2.371858. On Google Maps, it shows well on the middle, but it appears next to the road on Mapkit js. How do you explain this behaviour and do you know how to fix this issue ? How to get (calculate) the direction of the driver since he doesn't use our application ? Thank you very much ! Looking forward to hearing from you soon!
Replies
0
Boosts
0
Views
1.4k
Activity
Nov ’22
Using MapkitJS in golang
So my question is regarding mapkitJS and if there is any way that i can use it in my backend just for it's directions API. The URL it makes requests on is https://api.apple-mapkit.com/v1/directions Generating a signed JWT token for authorisation is fine, but the part where that token needs to be used to initialise mapkitJS is where i am having difficulty Can you please let me know if there is a way i can make requests on that url above and how to go on about the initialization using that bearer token?
Replies
0
Boosts
0
Views
966
Activity
Nov ’22
xcode quit unexpectedly
I want to read almost a million addresses in foor loop using CLGeocoder and save their coordinates. I have also put a 2 second pause in each loop, but every time I want to run the program in Xcode, after 200 or 300 iterations, the program closes suddenly. Does anyone know the reason? Is there a problem with the code? here is my code : func createCSV(from recArray:[Dictionary<String, AnyObject>]) {     var csvString = "\("Adresse");\("latitute ");\("longitude")\n\n"     for dct in recArray {       csvString = csvString.appending("\(String(describing:dct["Adresse"]!));\(String(describing: dct["latitute"]!));\(String(describing: dct["longitude"]!))\n")     }     let fileManager = FileManager.default     do {       let path = try fileManager.url(for: .documentDirectory, in: .allDomainsMask, appropriateFor: nil, create: false)       let fileURL = path.appendingPathComponent("CSVRec.csv")       try csvString.write(to: fileURL, atomically: true, encoding: .utf8)     } catch {       print("error creating file")     }   } func getLocation(for address: String) async throws -> CLLocationCoordinate2D {       guard let coordinate = try? await CLGeocoder().geocodeAddressString(address) else {     throw getLocationError.unableToGetLocation   }       return coordinate.first!.location!.coordinate      } var Coordinates:[Dictionary<String, AnyObject>] = Array() var address: String for row in result.rows {   address = "\(row["LABE"] ?? "") \(row["HAUS"] ?? ""), \(row["Gemeindename"] ?? "")"   var coordinate = try await getLocation(for: address)   var dct = Dictionary<String, AnyObject>()   dct.updateValue(address as AnyObject, forKey: "Adresse")   dct.updateValue(coordinate.latitude as AnyObject, forKey: "latitute")   dct.updateValue(coordinate.longitude as AnyObject, forKey: "longitude")   Coordinates.append(dct)   sleep(2) } createCSV(from: Coordinates) Does anyone have an idea what to do?
Replies
1
Boosts
0
Views
1k
Activity
Nov ’22
MapKit JS Sample Code
Hello! MapKit JS sample code is now available at https://maps.developer.apple.com/sample-code. Here's a list of the samples that are currently available: Embedded Map Demonstrates simply displaying a map with minimal code. Annotations & Reverse Geocoding Demonstrates adding/removing annotations, using the Reverse Geocoding API to find place data. Annotations with a Custom Callout Demonstrates how to add custom styles to annotation callouts. US Population By State Overlays Demonstrates displaying, transforming, and interacting with GeoJSON-based map overlays. Callout Accessory Views Demonstrates displaying additional customized elements within a callout. Region and Zoom Limits Demonstrates limiting a map's viewport's zoom levels and latitude/longitude constraints. Animated Polyline Overlays Demonstrates animating an overlay property in a request animation frame loop.
Replies
1
Boosts
1
Views
4.8k
Activity
Nov ’22
Map doesn't pop up require user location, and it doesn't show my current location. It just appears as a map
import SwiftUI struct MapView: View {   @State var showHome = false   @StateObject private var viewModel = MapViewModel()           var body: some View {     ZStack {       Map(coordinateRegion: $viewModel.region, showsUserLocation: true)           .ignoresSafeArea()           .accentColor(Color(.systemPink))           .onAppear{             viewModel.checkLocationAuthorization()         } //      VStack { //        Image("Back") //          .padding([.leading, .top]) //          .frame(maxWidth: .infinity,alignment: .leading) //          .onTapGesture{ //            showHome.toggle() //        } //        Spacer() //      }               }.overlay(RootView()) //    if showHome{ //      HomeView() //    }   } } struct MapView_Previews: PreviewProvider {   static var previews: some View {     MapView()   } } final class MapViewModel: NSObject, ObservableObject, CLLocationManagerDelegate {       @Published var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 33.748997, longitude: -84.387985), span: MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01))       var locationManager: CLLocationManager?       private func checkLocationServiceEnable() {     if CLLocationManager.locationServicesEnabled() {       locationManager = CLLocationManager()       locationManager?.desiredAccuracy = kCLLocationAccuracyBest       locationManager!.delegate = self                     }else{       print("Your location service is off")     }   }       func checkLocationAuthorization() {     guard let locationManager = locationManager else {return}           switch locationManager.authorizationStatus {             case .notDetermined:       locationManager.requestWhenInUseAuthorization()     case .restricted:       print("Location is restricted")     case .denied:       print("You have denied location permission, go to settings to change it")     case .authorizedAlways, .authorizedWhenInUse:       region = MKCoordinateRegion(center: locationManager.location!.coordinate, span: MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01))     @unknown default:       break     }   }       func locationManagerDidChangeAuthorization(_ manager: CLLocationManager) {     checkLocationAuthorization()   } }
Replies
0
Boosts
1
Views
909
Activity
Oct ’22
Update data Maps Connect via API
Does Maps Connect support an API (Send and Receive data) for adding, update content like location, Description, videos and images ?
Replies
0
Boosts
0
Views
859
Activity
Sep ’22
Box UIElements Preview not displaying files in iOS App (only)
Details: We have integrated Box UIElements into our Salesforce community application. Box UIElements Explorer and Preview are integrated as Static resources in the Salesforce org and are loaded and called by Aura components. We are using Explorer 14.0.0 and Preview 2.42.0, with core-js 2.5.3 (polyfills). Salesforce Mobile Publisher is used to generate an iOS app and an Android app. The Box components work fine in Desktop Browsers, Mobile Browsers and the Android app, but (only) in the iOS app, the Box Preview hangs while trying to load a file. Is there anyone out there who has iOS app w/ Box integrated experience who has come across this issue or can offer some ideas as to why Preview is not loading, or knows how something about how this can be resolved? Thank you!
Replies
0
Boosts
0
Views
706
Activity
Sep ’22