I have an app with Bing Maps and I need to draw the route of the user dinamically.
Now I can only trace the user position with a pushpin. Is there some method to draw route?
UPDATE 1:
I'm using this handler assigned to geolocator.positionChanged:
private void geolocator_DrawRoute(Geolocator sender, PositionChangedEventArgs args)
{
// Need to get back onto UI thread before updating location information
this.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, new DispatchedHandler(
() =>
{
//Get the current location
Location location = new Location(args.Position.Coordinate.Point.Position.Latitude,
args.Position.Coordinate.Point.Position.Longitude);
_rotta.Add(location);
if (_rotta.Count > 1)
{
var polyline = new MapPolyline { Locations = _rotta, Color = Colors.Blue, Width = 3 };
_shapeLayer.Shapes.Add(polyline);
}
//Update the position of the GPS pushpin
MapLayer.SetPosition(GpsPushpin, location);
//Update the map view to the current GPS location
MyMap.SetView(location, 18);
}));
}
UPDATE 2:
private void geolocator_DrawRoute(Geolocator sender, PositionChangedEventArgs args)
{
// Need to get back onto UI thread before updating location information
Dispatcher.RunAsync(CoreDispatcherPriority.Normal, new DispatchedHandler(
() =>
{
//Get the current location
var location = new Location(args.Position.Coordinate.Point.Position.Latitude, args.Position.Coordinate.Point.Position.Longitude);
_rottaLoc.Add(location);
if (_rotta == null)
{
_rotta = new MapPolyline { Locations = _rottaLoc, Color = Colors.Blue, Width = 4 };
}
else
{
_rotta.Locations = _rottaLoc;
}
_shapeLayer.Shapes.Add(_rotta);
//Update the position of the GPS pushpin
MapLayer.SetPosition(GpsPushpin, location);
//Update the map view to the current GPS location
MyMap.SetView(location, 18);
}));
}
To do this the first step would be to get the users position. If you are using JavaScript you can use the Geolocation API to get the users location and to monitor them as they move. Here is some documentation on how to do this: http://www.html5rocks.com/en/tutorials/geolocation/trip_meter/
Once you have this done you can show the users location fairly easily. If you want to draw a polyline to should their path then what you can do is the first time users position is grabbed you can create a polyline object where the first and second coordinate are this first coordinate. You can then add the polyline to the map. The next time the users location is grabbed you can simply add this new location to the polyline's array of locations.
Related
I have a route that includes vehicle and pedestrian mode together. When HERE is creating this, I want to show the pedestrian parts with dashed lines or different color for users to understand.
I parsed routes sections for sectionTransportMode like that
_routeCalculator.calculatePedestrianRoute(waypoints, (HERE.RoutingError? routingError, List<HERE.Route>? routeList) async {
if (routingError == null) {
HERE.Route _calculatedRoute = routeList!.first;
_calculatedRoute.sections.forEach((element) {
print('TransportMode: ' + element.sectionTransportMode.toString());
});
_showRouteOnMap(_calculatedRoute);
_startNavigationOnRoute(isSimulated, _calculatedRoute);
} else {
final error = routingError.toString();
_showDialog('Error', 'Error while calculating a pedestrian route: $error');
}
});
But how can i do that after this code snippet.
A MapPolyline consists of three elements:
A list of two or more geographic coordinates that define where to place the polyline on the map.
A GeoPolyline that contains this list of coordinates.
Style parameters such as DashPattern or LineCap to define how to visualize the polyline.
https://developer.here.com/documentation/android-sdk-navigate/4.8.3.0/dev_guide/topics/map-items.html#add-map-polylines
When calling the showRouteOnMap, you can create the MapPolyline with dashed lines as shown below in the example.
Here is an example:
private void showRouteOnMap(Route route) {
// Show route as polyline.
GeoPolyline routeGeoPolyline;
try {
routeGeoPolyline = new GeoPolyline(route.getPolyline());
} catch (InstantiationErrorException e) {
// It should never happen that a route polyline contains less than two vertices.
return;
}
float widthInPixels = 20;
//Blue Color
//Color lineColor = Color.valueOf(0, 0f, 0f, 139f);
MapPolyline routeMapPolyline = new MapPolyline(routeGeoPolyline,
widthInPixels,
Color.valueOf(0, 0.56f, 0.54f, 0.63f)); // RGBA
//Setting polyline to DashPattern
routeMapPolyline.setDashPattern(new DashPattern(10));
// routeMapPolyline.setDashFillColor(lineColor);
mapView.getMapScene().addMapPolyline(routeMapPolyline);
mapPolylines.add(routeMapPolyline);
// Draw a circle to indicate starting point and destination.
addCircleMapMarker(startGeoCoordinates, R.drawable.green_dot);
addCircleMapMarker(destinationGeoCoordinates, R.drawable.green_dot);
// Log maneuver instructions per route section.
List<Section> sections = route.getSections();
for (Section section : sections) {
logManeuverInstructions(section);
}
}
Please refer to this example available in git:
https://github.com/heremaps/here-sdk-examples/tree/master/examples/latest/navigate/flutter/routing_hybrid_app
I'm using the Flutter SDK Version 4.3.1.0.
I get my location updates from the geolocator plugin and want to show the location on the HERE map. It correctly centers the map to the current location but there is no location indicator.
I currently use the following code. What else do I need?
void _showPosition(final GeoCoordinates coordinates) {
_mapView.mapScene.loadSceneForMapScheme(MapScheme.greyDay, (MapError error) {
if (error != null) {
print("Map scene not loaded. MapError: " + error.toString());
return;
}
_mapView.camera.lookAtPointWithDistance(coordinates, 1000);
});
}
I'm using the Flutter Channel beta, v1.17.0-3.4.pre
The HERE SDK for Flutter does not contain a pre-configured location indicator. You can easily create one by adding a circle item onto the map:
For this I would recommend using a MapPolygon that contains a GeoCircle shape. You can then also update the radius of the GeoCircle on the fly to indicate the current horizontal accuracy of the geolocator plugin.
I´ve been following this post about using an image overlay for bing maps:
http://blogs.msdn.com/b/bingdevcenter/archive/2014/04/04/image-overlays-with-bing-maps-native.aspx
What I want to now is to be able to add polygons/polylines on top of this image. Lets say for example that we use the following code:
(From here: http://blogs.bing.com/maps/2014/01/23/make-clickable-shapes-in-the-native-bing-maps-control/)
private void MyMapLoaded(object sender, RoutedEventArgs e)
{
//Add a shape layer to the map
shapeLayer = new MapShapeLayer();
MyMap.ShapeLayers.Add(shapeLayer);
//Create mock data points
var locs = new LocationCollection();
locs.Add(new Location(coordinates that are over the image));
locs.Add(new Location(coordinates that are over the image));
locs.Add(new Location(coordinates that are over the image));
//Create test polygon
var polygon = new MapPolygon();
polygon.Locations = locs;
polygon.FillColor = Colors.Red;
shapeLayer.Shapes.Add(polygon);
var locs2 = new LocationCollection();
locs2.Add(new Location(20, 20));
locs2.Add(new Location(40, 40));
locs2.Add(new Location(50, 20));
//Create test polyline
var polyline = new MapPolyline();
polyline.Locations = locs2;
polyline.Width = 5;
polyline.Color = Colors.Blue;
//Add the shape to the map
shapeLayer.Shapes.Add(polyline);
}
The problem is that the polygon/polyline will always appear beneath the image.
ShapeLayer has a property for z-index but it does not help. Is there a way for my polygons to always be on top?
Not sure why you want to do this, but you won't be able to show a MapPolygon above a user control that is added as a child of the map. That said, you can create WPF Polygons and added them. What you could do is create a custom user control that combines the image overlay functionality with something like this: http://blogs.msdn.com/b/bingdevcenter/archive/2014/03/25/custom-shapes-in-windows-store-apps-c.aspx
Im trying to place a marker on the position i am, this way:
googleMap = ((MapFragment) getFragmentManager().findFragmentById(R.id.map_container)).getMap();
googleMap.setMyLocationEnabled(true);
My question is, how to get coordinates from myLocation, i tried, googleMap.getMyLocation().getLatitude() and googleMap.getMyLocation().getAltitude() right after googleMap.setMyLocationEnabled(true), but app crashes, another thing i did was Location loc=lm.getLastKnownLocation(provider) but are not the same coordinates and the marker is placed in the wrong place.
How can you people help me?
SupportMapFragment mf =(SupportMapFragment)getSupportFragmentManager().findFragmentById(R.id.map);
mMap = mf.getMap();
mMap.setMyLocationEnabled(true);
mMap.setMapType(mMap.MAP_TYPE_NORMAL);
Just add these two lines of code to get current location on Maps
googleMap.setMyLocationEnabled(true);
googleMap.getUiSettings().setMyLocationButtonEnabled(true);
and when you long press on any location on map add this code to get its location
googleMap.setOnMapLongClickListener(new OnMapLongClickListener() {
#Override
public void onMapLongClick(LatLng arg0) {
double alt = arg0.latitude;
double alo = arg0.longitude;
MarkerOptions marker1 = new MarkerOptions().position(new LatLng(alt, alo)).title("Lat ="+alt+" Lang="+alo);
googleMap.addMarker(marker1);
}
});
I just starting coding with Google Earth using the GEPlugin control for .Net and still got a lot to learn.
What has got me puzzled is when I try to drag a polygon.
The method below is called whenever the mousemove event fires and should be moving each point of the polygon while retaining the orginal shape of the polygon. The lat / long for each point is changed but the polygon does not move position on the map.
Will moving a point in a polygon cause it to redraw, do I need to call a method to force a redraw or perhaps do something else entirely?
Thanks!
private void DoMouseMove(IKmlMouseEvent mouseEvent)
{
if (isDragging)
{
mouseEvent.preventDefault();
var placemark = mouseEvent.getTarget() as IKmlPlacemark;
if (placemark == null)
{
return;
}
IKmlPolygon polygon = placemark.getGeometry() as IKmlPolygon;
if (polygon != null)
{
float latOffset = startLatLong.Latitude - mouseEvent.getLatitude();
float longOffset = startLatLong.Longitude - mouseEvent.getLongitude();
KmlLinearRingCoClass outer = polygon.getOuterBoundary();
KmlCoordArrayCoClass coordsArray = outer.getCoordinates();
for(int i = 0; i < coordsArray.getLength(); i++)
{
KmlCoordCoClass currentPoint = coordsArray.get(i);
currentPoint.setLatLngAlt(currentPoint.getLatitude() + latOffset,
currentPoint.getLongitude() + longOffset, 0);
}
}
}
}
Consider voting for these issues to be resolved
http://code.google.com/p/earth-api-utility-library/issues/detail?id=33
http://code.google.com/p/earth-api-samples/issues/detail?id=167
You may find some hints at the following link:
http://earth-api-utility-library.googlecode.com/svn/trunk/extensions/examples/ruler.html
UPDATE:
I've released the extension library: https://bitbucket.org/mutopia/earth
See https://bitbucket.org/mutopia/earth/src/master/sample/index.html to run it.
See the drag() method in the sample code class, which calls setDragMode() and addDragEvent() to enable dragging of the KmlPolygon.
I successfully implemented this using takeOverCamera in the earth-api-utility-library and three events:
setDragMode: function (mode) {
// summary:
// Sets dragging mode on and off
if (mode == this.dragMode) {
Log.info('Drag mode is already', mode);
} else {
this.dragMode = mode;
Log.info('Drag mode set', mode);
if (mode) {
this.addEvent(this.ge.getGlobe(), 'mousemove', this.dragMouseMoveCallback);
this.addEvent(this.ge.getGlobe(), 'mouseup', this.dragMouseUpCallback);
this.addEvent(this.ge.getView(), 'viewchange', this.dragViewChange, false);
} else {
this.removeEvent(this.ge.getGlobe(), 'mousemove', this.dragMouseMoveCallback);
this.removeEvent(this.ge.getGlobe(), 'mouseup', this.dragMouseUpCallback);
this.removeEvent(this.ge.getView(), 'viewchange', this.dragViewChange, false);
}
}
},
This is in a utility library within a much larger project. dragMode is a boolean which adds and removes events. These three events control what happens when you drag. addEvent and removeEvent are my own wrapper functions:
addEvent: function (targetObject, eventID, listenerCallback, capture) {
// summary:
// Convenience method for google.earth.addEventListener
capture = setDefault(capture, true);
google.earth.addEventListener(targetObject, eventID, listenerCallback, capture);
},
removeEvent: function (targetObject, eventID, listenerCallback, capture) {
// summary:
// Convenience method for google.earth.removeEventListener
capture = setDefault(capture, true);
google.earth.removeEventListener(targetObject, eventID, listenerCallback, capture);
},
Ignoring the minor details, all the important stuff is in the callbacks to those events. The mousedown event locks the camera and sets the polygon I'm dragging as the dragObject (it's just a variable I'm using). It saves the original lat long coordinates.
this.dragMouseDownCallback = lang.hitch(this, function (event) {
var obj = event.getTarget();
this.lockCamera(true);
this.setSelected(obj);
this.dragObject = obj;
this.dragLatOrigin = this.dragLatLast = event.getLatitude();
this.dragLngOrigin = this.dragLngLast = event.getLongitude();
}
The mousemove callback updates to the latest lat long coordinates:
this.dragMouseMoveCallback = lang.hitch(this, function (event) {
if (this.dragObject) {
var lat = event.getLatitude();
var lng = event.getLongitude();
var latDiff = lat - this.dragLatLast;
var lngDiff = lng - this.dragLngLast;
if (Math.abs(latDiff) > this.dragSensitivity || Math.abs(lngDiff > this.dragSensitivity)) {
this.addPolyCoords(this.dragObject, [latDiff, lngDiff]);
this.dragLatLast = lat;
this.dragLngLast = lng;
}
}
});
Here I'm using some fancy sensitivity values to prevent updating this too often. Finally, addPolyCoords is also my own function which adds lat long values to the existing coordinates of the polygon - effectively moving it across the globe. I do this with the built in setLatitude() and setLongitude() functions for each coordinate. You can get the coordinates like so, where polygon is a KmlPolyon object:
polygon.getGeometry().getOuterBoundary().getCoordinates()
And of course, the mousedown callback turns off the drag mode so that moving the mouse doesn't continue to drag the polygon:
this.dragMouseUpCallback = lang.hitch(this, function (event) {
if (this.dragObject) {
Log.info('Stop drag', this.dragObject.getType());
setTimeout(lang.hitch(this, function () {
this.lockCamera(false);
this.setSelected(null);
}), 100);
this._dragEvent(event);
this.dragObject = this.dragLatOrigin = this.dragLngOrigin = this.dragLatLast = this.dragLngLast = null;
}
});
And finally, _dragEvent is called to ensure that the final coordinates are the actual coordinates the mouse event finished with (and not the latest mousemove call):
_dragEvent: function (event) {
// summary:
// Helper function for moving drag object
var latDiff = event.getLatitude() - this.dragLatLast;
var lngDiff = event.getLongitude() - this.dragLngLast;
if (!(latDiff == 0 && lngDiff == 0)) {
this.addPolyCoords(this.dragObject, [latDiff, lngDiff]);
Log.info('Moved ' + latDiff + ', ' + lngDiff);
}
},
The mousemove callback isn't too important and can actually be ignored - the only reason I use it is to show the polygon moving as the user moves their mouse. Removing it will result in the object being moved when they lift their mouse up.
Hopefully this incredibly long answer gives you some insights into how to implement dragging in the Google Earth API. And I also plan to release my library in the future when I've ironed out the kinks :)