HERE map won't open with Geolocator method - Flutter - ios

My app is loading a HERE map, and works fine with a set of manually entered coordinates as the centre point.
I have implemented Geolocator in another part of the app to produce the users location which is then implemented into a function to find places near their current location & display on map.
I have now taken the Geolocator position finder and want to use it to open the map on the users location. The code uses async and await to get users coordinates.
The map open function does not want to accept async/ await, yet I have tried building it within its own class and pulling the coords, without success.
I am relatively new and any advice is greatly appreciated
Async & Await are currently red underlined in the 'function to open map', and when I change MapMarkerExample to mapMarkerExample at the top of 'function to open map', _mapMarkerExample = MapMarkerExample (_showDialog, hereMapController); is red underlined on `command to open map'
Command to open map
void _onMapCreated(HereMapController hereMapController) {
hereMapController.mapScene.loadSceneForMapScheme(MapScheme.normalDay, (MapError error) {
if (error == null) {
_mapMarkerExample = MapMarkerExample (_showDialog, hereMapController);
} else {
print("Map scene not loaded. MapError: " + error.toString());
}
});
}
Function to open map
MapMarkerExample(ShowDialogFunction showDialogCallback, HereMapController hereMapController) async {
_showDialog = showDialogCallback;
_hereMapController = hereMapController;
Position position = await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high);
var lat = position.latitude;
var long = position.longitude;
double distanceToEarthInMeters = 8000;
_hereMapController.camera.lookAtPointWithDistance(
GeoCoordinates(lat, long), distanceToEarthInMeters);
_setTapGestureHandler();
_showDialog("Note", "Tap markers for more.");
}

The problem is that MapMarkerExample() is a constructor and constructors cannot be executed asynchronously.
One possible way to solve this is to not set the coords in the MapMarkerExample() constructor. Just call it to create the instance. And then in a second method _setMapTarget() you can set the center coords of the map.
_setMapTarget() is marked async, so it will be executed immediately and it will not block _onMapCreated(). But it will do the magic a little bit later, fetch the position and once it has the position, it will update the camera.
If fetching the position takes to long, then you would see for that time a default camera position of the map.
void _onMapCreated(HereMapController hereMapController) {
hereMapController.mapScene.loadSceneForMapScheme(MapScheme.normalDay, (MapError? error) {
if (error == null) {
_mapMarkerExample = MapMarkerExample(_showDialog, hereMapController);
_setMapTarget(hereMapController);
} else {
print("Map scene not loaded. MapError: " + error.toString());
}
});
}
Future<void> _setMapTarget(HereMapController hereMapController) async {
Position position = await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high);
var lat = position.latitude;
var long = position.longitude;
double distanceToEarthInMeters = 8000;
hereMapController.camera.lookAtPointWithDistance(GeoCoordinates(lat, long), distanceToEarthInMeters);
}

Related

Sceneform ARCore Android studio

I am developing an AR app that allow you to move a ball by swiping the screen. I am able to detect the swipe but I am unsure how I can move the ball. so I want the ball to move from one position to another based on how long the screen is swipe. so when you swipe the ball is moved like been thrown.
Can any one help me out with this. thanks
To move a renderable, you can delete it at the old position and place it at the new one. Here is an example - this is button driven rather than swipe driven, but the movement can be used similarly. The code below works on the currently selected anchorNode - i.e. the user can select different nodes to move.
//Add a listener for the left button
FloatingActionButton leftButtom = findViewById(R.id.left_button);
leftButtom.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
//Move the anchor left
Log.d(TAG,"Moving anchor left");
if (currentSelectedAnchorNode != null) {
//Get the current Pose and transform it then set a new anchor at the new pose
Session session = arFragment.getArSceneView().getSession();
Anchor currentAnchor = currentSelectedAnchorNode.getAnchor();
Pose oldPose = currentAnchor.getPose();
Pose newPose = oldPose.compose(Pose.makeTranslation(-0.05f,0,0));
currentSelectedAnchorNode = moveRenderable(currentSelectedAnchorNode, newPose);
}
}
});
private AnchorNode moveRenderable(AnchorNode markAnchorNodeToMove, Pose newPoseToMoveTo) {
//Move a renderable to a new pose
if (markAnchorNodeToMove != null) {
arFragment.getArSceneView().getScene().removeChild(markAnchorNodeToMove);
anchorNodeList.remove(markAnchorNodeToMove);
} else {
Log.d(TAG,"moveRenderable - markAnchorNode was null");
return null;
}
Frame frame = arFragment.getArSceneView().getArFrame();
Session session = arFragment.getArSceneView().getSession();
Anchor markAnchor = session.createAnchor(newPoseToMoveTo.extractTranslation());
AnchorNode newMarkAnchorNode = new AnchorNode(markAnchor);
newMarkAnchorNode.setRenderable(andyRenderable);
newMarkAnchorNode.setParent(arFragment.getArSceneView().getScene());
anchorNodeList.add(newMarkAnchorNode);
return newMarkAnchorNode;
}

Codename One Map Container - Place marker on tapped point of the screen

I'm developing a Codename One app for iOS.
I'm using a MapContainer (https://github.com/codenameone/codenameone-google-maps) and I set a tap listener for it, in order to draw a marker in the point of the screen pressed by the user.
This is the code snippet:
map.addTapListener(new ActionListener() {
#Override
public void actionPerformed(ActionEvent evt) {
//Point of the screen where the user pressed
int x = evt.getX();
int y = evt.getY();
//I get the coordinates from the point of the screen
Coord coord = map.getCoordAtPosition(x, y);
//I create the marker, with a style
Style s = new Style();
s.setFgColor(0xff0000);
s.setBgTransparency(0);
FontImage markerImg = FontImage.createMaterial(FontImage.MATERIAL_PLACE, s);
EncodedImage icon = EncodedImage.createFromImage(markerImg, false);
map.addMarker(icon, coord, "My position", null, null);
map.zoom(coord, 15);
}
});
This code does not correctly place the marker in the point tapped by the user: it lacks in accuracy.
According to this question (How to get my MapContainer bounding box in Codename One), I also tried to get the North-East latitude and longitude:
map.addTapListener(new ActionListener() {
#Override
public void actionPerformed(ActionEvent evt) {
//I get the coordinates of the NE point
Coord neCoords = map.getBoundingBox().getNorthEast();
ToastBar.showMessage("NE coords: (" + neCoords.getLatitude() + ";" + neCoords.getLongitude() + ")", FontImage.MATERIAL_PLACE);
}
});
The following picture is a screenshot from an iPhone:
As you can see, the North-East corner corresponds to via Ignazio Silone ("Silone" is missing in the picture). The coordinates the snippet gave are: 44.539829,11.367906.
I put that coordinates on Google Maps and I compared that place with the NE point shown in my app: they differ, as you can see in the following picture (the marker is placed in the coordinates 44.539829,11.367906, while the arrow represents the NE point shown in my app).
How can I solve it? Can I place the marker in the position tapped by the user, with more accuracy?

Very slow hover interactions in OpenLayers 3 with any browser except Chrome

I have two styles of interactions, one highlights the feature, the second places a tooltop with the feature name. Commenting both out, they're very fast, leave either in, the map application slows in IE and Firefox (but not Chrome).
map.addInteraction(new ol.interaction.Select({
condition: ol.events.condition.pointerMove,
layers: [stationLayer],
style: null // this is actually a style function but even as null it slows
}));
$(map.getViewport()).on('mousemove', function(evt) {
if(!dragging) {
var pixel = map.getEventPixel(evt.originalEvent);
var feature = null;
// this block directly below is the offending function, comment it out and it works fine
map.forEachFeatureAtPixel(pixel, function(f, l) {
if(f.get("type") === "station") {
feature = f;
}
});
// commenting out just below (getting the feature but doing nothing with it, still slow
if(feature) {
target.css("cursor", "pointer");
$("#FeatureTooltip").html(feature.get("name"))
.css({
top: pixel[1]-10,
left: pixel[0]+15
}).show();
} else {
target.css("cursor", "");
$("#FeatureTooltip").hide();
}
}
});
I mean this seems like an issue with OpenLayers-3 but I just wanted to be sure I wasn't overlooking something else here.
Oh yeah, there's roughly 600+ points. Which is a lot, but not unreasonably so I would think. Zooming-in to limit the features in view definitely helps. So I guess this is a # of features issue.
This is a known bug and needs more investigation. You can track progress here: https://github.com/openlayers/ol3/issues/4232.
However, there is one thing you can do to make things faster: return a truthy value from map.forEachFeatureAtPixel to stop checking for features once one was found:
var feature = map.forEachFeatureAtPixel(pixel, function(f) {
if (f.get('type') == 'station') {
return feature;
}
});
i had same issue, solved a problem by setInterval, about this later
1) every mouse move to 1 pixel fires event, and you will have a quee of event till you stop moving, and the quee will run in calback function, and freezes
2) if you have an objects with difficult styles, all element shown in canvas will take time to calculate for if they hit the cursor
resolve:
1. use setInterval
2. check for pixels moved size from preview, if less than N, return
3. for layers where multiple styles, try to simplify them by dividing into multiple ones, and let only one layer by interactive for cursor move
function mouseMove(evt) {
clearTimeout(mm.sheduled);
function squareDist(coord1, coord2) {
var dx = coord1[0] - coord2[0];
var dy = coord1[1] - coord2[1];
return dx * dx + dy * dy;
}
if (mm.isActive === false) {
map.unByKey(mm.listener);
return;
}
//shedules FIFO, last pixel processed after 200msec last process
const elapsed = (performance.now() - mm.finishTime);
const pixel = evt.pixel;
const distance = squareDist(mm.lastP, pixel);
if (distance > 0) {
mm.lastP = pixel;
mm.finishTime = performance.now();
mm.sheduled = setTimeout(function () {
mouseMove(evt);
}, MIN_ELAPSE_MSEC);
return;
} else if (elapsed < MIN_ELAPSE_MSEC || mm.working === true) {
// console.log(`distance = ${distance} and elapsed = ${elapsed} mesc , it never should happen`);
mm.sheduled = setTimeout(function () {
mouseMove(evt);
}, MIN_ELAPSE_MSEC);
return;
}
//while multithreading is not working on browsers, this flag is unusable
mm.working = true;
let t = performance.now();
//region drag map
const vStyle = map.getViewport().style;
vStyle.cursor = 'default';
if (evt.dragging) {
vStyle.cursor = 'grabbing';
}//endregion
else {
//todo replace calback with cursor=wait,cursor=busy
UtGeo.doInCallback(function () {
checkPixel(pixel);
});
}
mm.finishTime = performance.now();
mm.working = false;
console.log('mm finished', performance.now() - t);
}
In addition to #ahocevar's answer, a possible optimization for you is to utilize the select interaction's select event.
It appears that both the select interaction and your mousemove listener are both checking for hits on the same layers, doing double work. The select interaction will trigger select events whenever the set of selected features changes. You could listen to it, and show the popup whenever some feature is selected and hide it when not.
This should reduce the work by half, assuming that forEachFeatureAtPixel is what's hogging the system.

Stupid mouse move coordinates in dart

I am learning Dart and I was trying to make a very simple drageable HTML element. I followed patterns I'm used to from javascript but it doesn't work as expected.
When making drageable object from scratch you usually do the following:
Listen on mouse down event on that object
Upon mouse down, remember mouse coordinates relative to the object's top-left corner
Listen for any mouse movement. For every move operation, move the object to cursor location minus the coordinates you remembered earlier.
Upon any mouse up event, stop following mouse movement.
So I produced this code:
class DrageableControl {
DivElement _elm;
DrageableControl(String txt, int x, int y) {
//Create element and set up styles
var elm = this.setupElement(x, y);
//Append element to document, add some text and start listeners
document.body.append(elm);
elm.text = txt;
setupEvents();
}
//This function creates all event necessary for drag operations
setupEvents() {
Point relativeMouseOffset = null;
_elm.onMouseDown.listen((MouseEvent e) {
Rectangle myPos = _elm.getBoundingClientRect();
relativeMouseOffset = new Point(e.offset.x-myPos.left, e.offset.y-myPos.top);
e.preventDefault();
return false;
});
//Of course this is completely wrong, the listener should only be added for the duration of dragging
document.onMouseMove.listen((MouseEvent e) {
if(relativeMouseOffset!=null) {
print("Clicked at: ${relativeMouseOffset}\nCurrent mouse position:${e.offset}");
_elm.style.top = "${(e.offset.y/*-relativeMouseOffset.y*/)}px";
_elm.style.left = "${(e.offset.x/*-relativeMouseOffset.x*/)}px";
}
});
document.onMouseUp.listen((MouseEvent e){
relativeMouseOffset = null;
});
}
setupElement(int x, int y) {
var elm = this._elm = new DivElement();
//TODO: Use css?
elm.style.position = "absolute";
elm.style.top = "${y}px";
elm.style.left = "${x}px";
elm.style.border = "1px solid red";
elm.style.backgroundColor = "#FFAAAA";
elm.style.cursor = "default";
//elm.style.transition = "top 1s";
return elm;
}
}
Problem is, that some coordinates delivered by MouseMove are complete nonsense. See the console:
Clicked at: Point(-76.0, -143.0)
Current mouse position:Point(1, 1)
Clicked at: Point(-76.0, -143.0)
Current mouse position:Point(374, 272)
Clicked at: Point(-76.0, -143.0)
Current mouse position:Point(1, 0)
Clicked at: Point(-76.0, -143.0)
Current mouse position:Point(376, 273)
Clicked at: Point(-76.0, -143.0)
Current mouse position:Point(0, 1)
As you can see every second mouse move event delivers broken data - coordinates right around [0, 0]. So how can I filter out this invalid data? Why does it happen?
So far I'm probably fixing this by adding:
if(e.offset.x+e.offset.y<5)
return;
Use e.client.x/e.client.y instead.

Actionscript 3, rotate object on drag

I have an object I need to rotate by clicking and dragging. Following some AS2 code I got the object to rotate a bit every time the mouse is clicked, but can't get it to work with drag.
needle.addEventListener(MouseEvent.MOUSE_DOWN, fl_ClickToDrag_2);
stage.addEventListener(MouseEvent.MOUSE_UP, fl_ReleaseToDrop_2);
function fl_ClickToDrag_2(event:MouseEvent):void
{
var angle = Math.atan2(mouseY-needle.y,mouseX-needle.x);
// apply rotation to handle by converting angle into degrees
needle.rotation = angle*180/Math.PI;
// rotate the grip opposite the handle so it won't rotate along with it
//this.grip._rotation = -this._rotation;
}
function fl_ReleaseToDrop_2(event:MouseEvent):void
{
needle.stopDrag();
}
Well the problem I see is that the MOUSE_DOWN event only fires once per click, so you only run the code in the handler once.
There could be a better way than this but this is how I'd consider doing it:
EDITED FOR DETAIL:
public class Test extends MovieClip {
private var n:Needle;
public function Test() {
// constructor code
n = new Needle();
stage.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownF,false,0,true);
stage.addEventListener(MouseEvent.MOUSE_UP,mouseUpF,false,0,true);
n.x = stage.stageWidth/2; //center needle on stage
n.y = stage.stageHeight/2;
addChild(n); //add needle to stage
}
public function mouseDownF(e:MouseEvent):void {
stage.addEventListener(MouseEvent.MOUSE_MOVE,rotate,false,0,true);
}
public function rotate(e:MouseEvent):void {
var angle:Number = Math.atan2(mouseY - n.y,mouseX - n.x); //get angle in radians (pythagoras)
angle = angle * 180/Math.PI -90; //convert to degrees , the 90 is to have it point to the mouse
n.rotation = angle; //rotate
}
public function mouseUpF(e:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE,rotate);
}
}
So when the user clicks down (mouseDown) it activates an event listener that fires the rotate handler every time the mouse moves. When the user lets go of the click the event listener is destroyed. The false,0,true); when adding the event listener is to make it a weakly referenced listener so that it gets collected by the garbage collector and doesn't just sit in memory taking up space forever.

Resources