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 support
Kind regards
