Posts

Post not yet marked as solved
0 Replies
680 Views
Hi,I am building an application with PyQt5 and MapKit JS. I am able to center a map at a particular location, change the zoom and display it with all the controls.When I try to rotate it, however, the map is rotated (e.g., the map is rotated 90 degrees and the arrow of the compass points to the right) but just for a brief period of time. After this short time, the map automatically rotates back to the "original" or "default" position (the map is shown with the north at the top and the compass arrow points upwards).If I run the application and I change the rotation of the map by clicking and dragging the mouse over the compass control inside the map, then the map correctly retains its new position (e.g, if I rotate the map 180 degrees then the map stays oriented with the south on top and the compass arrow pointing downwards).In a separate application for the iPhone, I used the following to control the camera view:let camera = MKMapCamera(lookingAtCenter: coordinate , fromDistance: 1000, pitch: 0 , heading: heading) mapView.setCamera(camera, animated: false)Is there a similar functionality also present in MapKit JS, or is it only for MapKit (I could not find the MKCameraView in MapKit JS)?Am I making a mistake with the initialization of the map?This is the HTML I am using at the moment for rotating the map.<!DOCTYPE html> <html> <head> <script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script> <script src="qrc:///qtwebchannel/qwebchannel.js"></script> <title>Navigation Assistant</title> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8"> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script> mapkit.init({ authorizationCallback: function(done) { done("MyToKEN");}, language: "en" }); // All attributes of the map https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/apple-mapkit-js/index.d.ts var map = new mapkit.Map("map"); map.isRotationEnabled = true; var camera = new mapkit.MKMapCamera(lookingAtCenter: coordinate , fromDistance: 1000, pitch: 0 , heading: heading) // 100; 80 map.setCamera(camera, false); // Show the compass only when rotation is actively changing. map.showsCompass = mapkit.FeatureVisibility.INVISIBLE; // Hide the zoom controls. map.showsZoomControl = false; map.showsScale = mapkit.FeatureVisibility.INVISIBLE; map.showsUserLocation = true; map.showsPointsOfInterest = false; map.isZoomEnabled = true; map.rotation = 90; // Adjust Zoom Level: https://stackoverflow.com/questions/56457065/zoom-and-position-management-in-mapkit-js function set_zoom(latitude, longitude, span_lat, span_lon) { var newCenter = new mapkit.Coordinate(latitude, longitude); var span = new mapkit.CoordinateSpan(span_lat, span_lat); // span_lat, span_long var region = new mapkit.CoordinateRegion(newCenter, span); var zoomRange = new mapkit.CameraZoomRange(250, 1000); map.setRegionAnimated(region); // map.cameraZoomRange = zoomRange; // map.setRotationAnimated(180); map.rotation = 90; } </script> </body> </html>Thanks a lot for your supportKind regards
Posted Last updated
.
Post marked as solved
4 Replies
854 Views
Hi,I've bulit an app for iOS and I can show, zoom and rotate the maps in it. Now, I am trying to do the same with PyQt5. I am able to show the maps, change location, zoom into a region, and enable / disable the view of the compass. I just cannot rotate the map: I receive the error message "js: [MapKit] Rotation is not available."The mapkit js documentation refers to the property "isRotationAvailable" and the method "setRotationAnimated" (https://developer.apple.com/documentation/mapkitjs/mapkit/map/2991323-setrotationanimated)Here is the html code I am using:<script> mapkit.init({ authorizationCallback: function(done) { done(".myToken");}, language: "en" }); var map = new mapkit.Map("map"); // Hide the zoom controls. map.showsZoomControl = true; map.isZoomEnabled = true; map.isRotationAvailabe = true; function set_zoom(latitude, longitude, span_lat, span_lon) { var newCenter = new mapkit.Coordinate(latitude, longitude); var span = new mapkit.CoordinateSpan(span_lat, span_lat); var region = new mapkit.CoordinateRegion(newCenter, span); var zoomRange = new mapkit.CameraZoomRange(250, 2000); map.setRegionAnimated(region); map.cameraZoomRange = zoomRange; // Either two of these lines raise the warning message map.rotation = 90; map.setRotationAnimated(90); } </script>Am I missing something really basic here or is this feature still not supported for mapkits js?Thanks a lot
Posted Last updated
.