I have a flashing icon on a Mapbox GLJS map that shows the location of my software.
I would now like to indicate the direction of travel, similar to how google maps shows it. See image.
Once this is implemented, I would also like to adjust the width of the heading indicator based on the current FOV of my real-world camera. Ie Current camera FOV at 20 degrees would be shown as a 20-degree cone on the map.
Id have thought this is quite a common need, so is there any styling that can simply be plugged in? If not, any pointers of how to go about this would be welcome. Cheers
icon image
Related
I posted this on gamedev but got no answers so I`m trying here as well.
https://gamedev.stackexchange.com/questions/200115/rotating-an-icon-on-minimap
I'm creating a minimap for my game. There is a mission where the player has to escort an NPC to an area. The minimap shows the player, the NPC and the location. The NPC icon sends an arrow from it's icon on the minimap to the destination location.
The minimap is zoomed in around the player and the location may be farther away then the minimap area, in this case, I put it on the edge of the minimap to make it still visible.
I'm using the dot product to calculate the angle between the NPC and the destination location, using a up vector (0,1). This works until the NPC is on the edge of the minimap. The angle is slightly off and the arrow icon is turned to the side.
I've confirmed both positions on the minimap are correct and the angle between them should be relatively small, but the calculation is too large. I'm unable to post a picture of the minimap here for NDA reasons, but I included a picture of the blueprint.
The arrow icon is facing down, which means it needs to be offset by some degrees depending on the quadrant, thus the addition at the end of the blueprint.
Any tips how to do nice camera animation with the here SDK for flutter I can take examples from IOS or Android SDK.
The issue I’m facing is that in the example it shows animation with pre known camera zoom/distance to earth source and target.
In my example it’s difficult to find the right distance to earth given a bounding box and also find the center of a bounding box finally find the right bounding box to be able to comfortably see a set of GeoCoordinates.
Any tips much appreciated
There's nice bow-type animation example for Flutter. It's using custom Tweens.
If you want to zoom to a set of coordinates, use the MapCamera's calculateEnclosingCameraUpdate() method. It allows to zoom to a bounding box you can get from a route with route.getBoundingBox(). This way you can ignore the distance or center as the camera will automatically find the right value.
I’m building a small web-based game that uses the computer’s built-in or attached camera. I’m using Machine Learning to recognize the user’s face and then have an avatar on the screen mimic the user’s movement (i.e. when the user’s face gets closer to the camera, the avatar gets bigger since the user’s face is closer to the camera; when the user moves right, the avatar moves right too).
One of my friends has a large monitor in front of him and then the laptop sits to his right. Hence, when he moves closer to the bigger monitor, the avatar shows him moving left, since the camera is to his right. This makes sense but I was wondering, from a mathematical point of view, given a set of (x, y) coordinates for the user’s nose, eyes and ears, how could I possibly rotate this set of coordinates around the y axis. We can assume that the camera sits 45 degrees to the right of my friend.
I’m hoping that with this rotation, when he moves closer to the screen he’s facing, the avatar will become bigger, mimicking his exact movements, despite the fact that the camera is to his right. One particular problem I’m struggling with is the size of the avatar - when the camera is to the right and the user moves left, the avatar becomes smaller since the face is moving away from the camera, but this shouldn’t be the case.
I’ve added the option to ask the user where the camera is positioned, but I need help with finding a plane rotation that will solve the issue above.
Thanks in advance.
I'm trying to display property boundaries on top of a Google Map by using KineticJS and a Google Maps OverviewLayer.
It works great (1000 parcels being shown at a time. Much faster than Google.Maps.Polygon())
When I drag the Google Map down, then zoom in/out, the top shapes get cut off and don't re-draw when I zoom back out.
I'm guessing its a setX, setY thing but I don't understand the underlying concepts enough.
Any help would be appreciated.
Here is my app:
KineticJS and Google Maps OverlayView test site
I added a light-green background to the KineticJS canvas to see what it happening when you zoom in.
The canvas seems to stay locked in place and the same width/height but when you zoom in I'm guessing the canvas should grow proportionally.
I can't figure out how to do that though....
Any help would be appreciated!
I would like draw a filled polygon on iPhone with Google map (Version 1.1.1, the last one).
Anyone knows how to do like that on ios :
(My code on Android)
mMap.addPolygon(new PolygonOptions()
.addAll(latLngList)
.fillColor(Color.BLUE)
.strokeColor(Color.RED)
.strokeWidth(3));
Regards,
PS : If you have many solutions, keep in mind that I have many Polygon to draw.
The SDK currently doesn't support filled polygons, however there is a feature request to add them here:
https://code.google.com/p/gmaps-api-issues/issues/detail?id=5070
In the meantime, one option could be to draw your polygons into an image, and then add them as a ground overlay. This would be very limiting, but might work as a temporary workaround.
Another option is to add another view over the top of the map view and draw the polygons into it, and then update them whenever the map view moves. It isn't possible to perfectly synchronize another view with the map view, so your polygons will lag behind a bit as you pan/zoom around, but this might also be okay for you as a temporary workaround.
UPDATE
These are just some random ideas to try for the ground overlay approach, I'm not sure if they would work, but they might get you started:
I would suggest converting the lat/lon corners of the rectangle into MKMapPoint (using MKMapPointForCoordinate). These are equivalent to Google's coordinate system at zoom level 20.
You can then use the aspect ratio of the width/height of the rectangle in MKMapPoint coordinates to determine the aspect ratio of your ground overlay UIImage. Once you have the aspect ratio, you'll just need to experiment with actual sizes (ie guess a width, calculate the height from the aspect ratio) to find one which looks okay. The bigger it is, the finer the detail of your rectangle will be, but the more memory it will use, and probably the slower the performance will be. Also you might hit a hard limit at some size - I'm guessing the UIImage gets converted by the Google Maps SDK into a texture, and textures have a max size of 2048x2048 on iPhone 3GS+.
Then, use something similar to How to setRegion with google maps sdk for iOS? to calculate a zoom level and centre lat/lon. Instead of the map view width/height you would use your UIImage width/height, and you'd use the bounds of your rectangle instead of the bounds of the desired view. You also wouldn't need to calculate the scale from both the width and height (as the scale should be the same) - so just use one of them. Instead of creating a camera with the zoom level and centre lat/lon, set them on the GMSGroundOverlayOptions. Also set the ground overlay's anchor to the centre of the image (ie 0.5, 0.5).
The above describes how to add one GroundOverlay per rectangle. If you have lots of overlapping or nearby rectangles you could probably combine them into a single UIImage, but that would be a bit more complicated.