How to add a dynamic PushPin to map in WP8.1 - windows-phone-8.1

I'm currently trying to develop an simple application that allows user to add new pushpins. I'm currently using following code to add new pushpins,
Pushpin pushpin1 = new Pushpin();
pushpin1.GeoCoordinate = MyGeoPosition;
pushpin1.Content = "My car";
MapOverlay overlay1 = new MapOverlay();
overlay1.Content = pushpin1;
overlay1.GeoCoordinate = MyGeoPosition;
layer1.Add(overlay1);
myMap.Layers.Add(layer1);
But, to use this code, I need the latitude and longitude of the location that user has selected. So how can I get the latitude and longitude of the location that user has selected. (Simply geo-coordinate) I know I need to write a event handler, But I don't know the way that it has to be implemented... Thank you...

Try This
MapA = new Map();
MapA.Tap += MapA_Tap;
void MapA_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
GeoCoordinate location = MapA.ConvertViewportPointToGeoCoordinate(e.GetPosition(MapA));
//display pushpin by using location.latitude and location.longitude
}

There are multiple map events like
CenterChaged, MapTapped
you can handle those events to add your push pin. here is MapTapped example
async private void map_MapTapped(MapControl sender, MapInputEventArgs args)
{
var MyGeoPosition = args.Location;
//....
}

Related

Google Maps in Xamarin for Android fails to center on location

var _locator = CrossGeolocator.Current;
var mapPosition = await _locator.GetPositionAsync();
var mapSpan = MapSpan.FromCenterAndRadius(
new Xamarin.Forms.Maps.Position(mapPosition.Latitude, mapPosition.Longitude),
Distance.FromMiles(2)
);
Map.MoveToRegion(mapSpan);
Using Xamarin.Forms.Maps.Postion() the correct lat and lon coordinates are calculated.
However, when I add it to MapSpan, the coordinates change to somewhere in the middle of the Atlantic ocean. Not sure what is causing this?
UPDATE:
So the problem is definitely in the Android project. For some reason, GoogleMaps is not recognizing the location passed by the Map Renderer in the shared project. OnMapReady is just using the default lat/lon.
SUCCESS!!!
async Task<Plugin.Geolocator.Abstractions.Position> GetPositionAsync()
{
var _locator = CrossGeolocator.Current;
Plugin.Geolocator.Abstractions.Position myPosition = await _locator.GetPositionAsync();
return myPosition;
}
public void OnMapReady(GoogleMap googleMap)
{
Plugin.Geolocator.Abstractions.Position myPosition = Task.Run(GetPositionAsync).Result;
map = googleMap;
map.MoveCamera(
CameraUpdateFactory.NewLatLng(
new LatLng(myPosition.Latitude, myPosition.Longitude)));
map.AnimateCamera(
CameraUpdateFactory.ZoomTo(10));
The MapSpan properties LatitudeDegree and LongitudeDegrees refer to the degrees of latitude and longitude that are spanned (i.e. the number of degrees of the map that are shown within its view.)
If you are looking for the lat/lng of the center of the map in your span, refer to the Center properties which is a Maps.Postion object.
Re: https://developer.xamarin.com/api/type/Xamarin.Forms.Maps.MapSpan/
Example:
var mapPosition = new Position(38.29, -77.45);
var mapSpan = MapSpan.FromCenterAndRadius(mapPosition, Distance.FromMiles(2));
map.MoveToRegion(mapSpan);

Xamarin Android Google Map - Add marker where user clicks

In Xamarin Forms, I am using a custom renderer in Android for a map I have implemented using Android.Gms.Maps I want to write functionality that adds a marker in the area a user clicked on the map.
public async void OnMapReady(GoogleMap googleMap)
{
map.MapClick+= HandleMapClick;
}
In my HandleMapClick() function, how do I use the addMarker() function to add a marker to the area which a user clicked on the map?
The GoogleMap.MapClickEventArgs contains a "Point" that contains the lat/long of the user' click. Create a MarkerOption, assign it that point and add it to your map.
googleMap.MapClick += (object sender, GoogleMap.MapClickEventArgs e) =>
{
using (var markerOption = new MarkerOptions())
{
markerOption.SetPosition(e.Point);
markerOption.SetTitle("StackOverflow");
// save the "marker" variable returned if you need move, delete, update it, etc...
var marker = googleMap.AddMarker(markerOption);
}
};

Drawing path between two markers Google Maps V2

I have two markers, namely startLocation and the other is stopLocation. startLocation will detect the user's current location, and then the user will walk, and when they stop they'll press stop and stopLocation will be captured as their new current location. I want to draw a polyline as the user is moving from the startLocation to stopLocation.
Alternatively, the polyline can also be drawn after both markers for start and stop location has been created - whichever is more implementable.
How can this be done? Most of the answers refer to retrieving routes and then drawing the polylines, but that's not what I want - I want to get the user's personalized route. In short, I want to record the route the user has taken. I've managed to create both markers already:
btnStart = (Button) findViewById(R.id.btnStart);
btnStart.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
// Create Start Marker
// get current location
LocationManager locManager;
String context = Context.LOCATION_SERVICE;
locManager = (LocationManager) getSystemService(context);
Criteria c = new Criteria();
c.setAccuracy(Criteria.ACCURACY_FINE);
c.setAltitudeRequired(false);
c.setBearingRequired(false);
c.setCostAllowed(true);
c.setPowerRequirement(Criteria.POWER_LOW);
String provider = locManager.getBestProvider(c, true);
Location loc = locManager.getLastKnownLocation(provider);
LatLng currentPosition = updateWithNewLocation(loc);
Marker startLocation = map.addMarker(new MarkerOptions()
.position(currentPosition)
.title("Start Location")
.icon(BitmapDescriptorFactory
.defaultMarker(BitmapDescriptorFactory.HUE_AZURE)));
map.moveCamera(CameraUpdateFactory.newLatLngZoom(currentPosition, 17));
}
});
btnStop = (Button) findViewById(R.id.btnStop);
btnStop.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
// Create Stop
// get current location
LocationManager locManager;
String context = Context.LOCATION_SERVICE;
locManager = (LocationManager) getSystemService(context);
Criteria c = new Criteria();
c.setAccuracy(Criteria.ACCURACY_FINE);
c.setAltitudeRequired(false);
c.setBearingRequired(false);
c.setCostAllowed(true);
c.setPowerRequirement(Criteria.POWER_LOW);
String provider = locManager.getBestProvider(c, true);
Location loc = locManager.getLastKnownLocation(provider);
LatLng currentPosition = updateWithNewLocation(loc);
Marker stopLocation = map.addMarker(new MarkerOptions()
.position(currentPosition)
.title("Stop Location")
.icon(BitmapDescriptorFactory
.defaultMarker(BitmapDescriptorFactory.HUE_ORANGE)));
map.moveCamera(CameraUpdateFactory.newLatLngZoom(currentPosition, 17));
// Draw dynamic line
}
});
Now all I need is to draw the line between the two markers. Thanks!
There is no way to do this without tracking the user's location. You should use the requestLocationUpdates function to listen and get the update of your user's location. Refer to the developer guide for more information on listening to the GPS location.
String locationProvider = LocationManager.NETWORK_PROVIDER;
// Or, use GPS location data:
// String locationProvider = LocationManager.GPS_PROVIDER;
locationManager.requestLocationUpdates(locationProvider, 0, 0, locationListener);
You might also want to use the snap to road function in the newly released Google Maps Road API, to fix your raw lat/lng from GPS, and get a smoother path on the road. It does not currently have Android APIs, so you might need to use the Web API to access the snap to road service.
https://roads.googleapis.com/v1/snapToRoads?path=-35.27801,149.12958|-35.28032,149.12907|-35.28099,149.12929|-35.28144,149.12984|-35.28194,149.13003|-35.28282,149.12956|-35.28302,149.12881|-35.28473,149.12836
&interpolate=true
&key=API_KEY
After users stopped tracking or reached the end point, you can create a polyline based on their path.
// Instantiates a new Polyline object and adds points to define a rectangle
PolylineOptions rectOptions = new PolylineOptions()
.add(new LatLng(37.35, -122.0))
.add(new LatLng(37.45, -122.0)) // North of the previous point, but at the same longitude
.add(new LatLng(37.45, -122.2)) // Same latitude, and 30km to the west
.add(new LatLng(37.35, -122.2)) // Same longitude, and 16km to the south
.add(new LatLng(37.35, -122.0)); // Closes the polyline.
// Get back the mutable Polyline
Polyline polyline = myMap.addPolyline(rectOptions);
Let me know if it is not clear, and hope it helps.

Get marker position before dragging primefaces

I want to store the previous location before dragging a marker using PrimeFaces GMap - Draggable Markers
How to do it ?
showcase : GMap - Draggable Markers :
http://www.primefaces.org/showcase/ui/gmapDraggableMarkers.jsf
You could store copies of the original Marker objects and then, in the onMarkerDrag handler, you could find the original Marker that corresponds to the one passed by the MarkerDragEvent.
I say "copies" because it is possible that Primefaces modifies the LatLng of original Marker instead of creating a new one (most likely). You can use the "data" or "title" attributes to give them IDs and correctly match the copied Markers.
I can probably explain this with code, let me know if you need help.
Edit:
To meet your requirement, I would adapt the Primefaces showcase example as follows (notice that it requires the Marker's title to be unique. If this is not possible, implement this using the data attribute of the Marker class.):
package org.primefaces.examples.view;
//...
public class MapBean implements Serializable {
private MapModel draggableModel;
private Map<String, LatLng> positions = new HashMap<String, LatLng>(); // new
public MapBean() {
draggableModel = new DefaultMapModel();
positions.put("Konyaalti", new LatLng(36.879466, 30.667648));
positions.put("Ataturk Parki", new LatLng(36.883707, 30.689216));
positions.put("Karaalioglu Parki", new LatLng(36.879703, 30.706707));
positions.put("Kaleici", new LatLng(36.885233, 30.702323));
for (Map.Entry<String, LatLng> e : positions.entrySet()) {
Marker m = new Marker(e.getValue(), e.getKey());
m.setDraggable(true);
draggableModel.addOverlay(m);
}
}
public void onMarkerDrag(MarkerDragEvent event) {
marker = event.getMarker();
addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Dragged", "Lat:" + marker.getLatlng().getLat() + ", Lng:" + marker.getLatlng().getLng()));
// update position and get the old one
LatLng oldPosition = positions.put(marker.getTitle(), marker.getLatlng());
// ...
}
// ...
}

Draw route on Windows Phone 8 map as position changes?

Scenario:
I want a user to see a map and their current position. Then, if they click "start", navigation will begin and they'll see their "route" drawn onto the map as their position changes, similar to how some fitness apps work that map out your run/walk. The goal is to do this in real-time as the user's position changes.
Options:
The way I see it, there are two options: 1) use a RouteQuery and Map.AddRoute from the starting position, to the next position (when the position changes), keeping track of the last position, and always drawing a new MapRoute from that position to the new, or 2) displaying the user's current position as a dot that moves as their position changes, and then maybe when they press "stop", draw a MapRoute for each of their positions in order to show their full route.
I'd really prefer option #1 because the user can see their route progression, etc., as they go.
Here is the code that I'm using:
XAML:
<maps:Map x:Name="MainMap" />
<Button x:Name="btnStart" Content="Start"/>
<Button x:Name="btnStop" Content="Stop" IsEnabled="False"/>
Code-behind:
Global Variables:
GeoCoordinateWatcher watcher;
List<GeoCoordinate> listCoordinates;
GeoCoordinate lastCoordinate;
btnStart.Tap():
private void btnStart_Tap(object sender, GestureEventArgs e)
{
if (watcher == null)
{
watcher = new GeoCoordinateWatcher(GeoPositionAccuracy.High);
watcher.MovementThreshold = 20;
watcher.StatusChanged += watcher_StatusChanged;
watcher.PositionChanged += watcher_PositionChanged;
}
watcher.Start();
}
watcher.StatusChanged():
private void watcher_StatusChanged(object sender, GeoPositionStatusChangedEventArgs e)
{
switch (e.Status)
{
case GeoPositionStatus.Initializing:
btnStart.IsEnabled = false;
btnStop.IsEnabled = true;
break;
case GeoPositionStatus.NoData:
lblStatus.Text = "location data is not available.";
break;
case GeoPositionStatus.Ready:
lblStatus.Text = "location data is available.";
break;
}
}
watcher.PositionChanged():
void watcher_PositionChanged(object sender, GeoPositionChangedEventArgs<GeoCoordinate> e)
{
if (listCoordinates == null)
{
// first time through:
listCoordinates = new List<GeoCoordinate>();
listCoordinates.Add(e.Position.Location);
lastCoordinate = e.Position.Location;
return;
}
else
{
listCoordinates.Add(e.Position.Location);
DrawRoute(e.Position.Location);
lastCoordinate = e.Position.Location;
}
}
DrawRoute function:
private void DrawRoute(GeoCoordinate newPosition)//
{
RouteQuery query = new RouteQuery()
{
TravelMode = TravelMode.Driving,
Waypoints = new List<GeoCoordinate>() { MainMap.Center, newPosition }
};
query.QueryCompleted += RouteQueryCompleted;
query.QueryAsync();
MainMap.Center = newPosition;
lastCoordinate = newPosition;
}
And finally, RouteQueryCompleted():
void RouteQueryCompleted(object sender, QueryCompletedEventArgs<Route> e)
{
mapRoute = new MapRoute(e.Result);
MainMap.AddRoute(mapRoute);
}
What happens:
It appears to work for a second as I begin driving, a short line is drawn where my start position is, but then about 10 second in, a line is randomly drawn down a nearby street (probably equivalent to 3 or 4 blocks long) and then down another block on a side road (while the whole time I haven't even driven ONE block, let alone make any turns!). It's very bizarre and definitely not accurate. I can upload a screenshot to better illustrate it if need be.
Can anyone see what I'm doing wrong in my code or is there a better way to accomplish this? I wasn't sure if this was the best way but I wasn't able to find any examples suggesting otherwise.
I ended up using MapPolyLine to draw a line between the last GeoCoordinate and the new one.
MapPolyline line = new MapPolyline();
line.StrokeColor = Colors.Blue;
line.StrokeThickness = 15;
line.Path.Add(lastCoordinate);
line.Path.Add(pos);
MainMap.MapElements.Add(line);
I am not sure why you are using RouteQuery for your task. Generally, you use this when you want the map sdk to determine a route for you given a set of coordinates. In your case however, you always know where you are through PositionChanged event. It will be easier to plot directly on the map as you move.
Something like this
void watcher_PositionChanged(object sender, GeoPositionChangedEventArgs<GeoCoordinate> e) {
Plot(e.Position.Location);
}
void Plot(GeoCoordinate pos) {
var ellipse = new Ellipse();
ellipse.Fill = new SolidColorBrush(System.Windows.Media.Colors.Blue);
ellipse.Height = 15;
ellipse.Width = 15;
ellipse.Opacity = 25;
var mapOverlay = new MapOverlay();
mapOverlay.Content = ellipse;
mapOverlay.PositionOrigin = new System.Windows.Point(0.5, 0.5);
mapOverlay.GeoCoordinate = pos;
var mapLayer = new MapLayer();
mapLayer.Add(mapOverlay);
MainMap.Layers.Add(mapLayer);
}