Last active
December 11, 2017 21:31
-
-
Save jgold6/0ac42b5db4a66e36c25a to your computer and use it in GitHub Desktop.
Xamarin Forms Custom Map renderer to draw Polylines
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
using System; | |
using Xamarin.Forms; | |
using Xamarin.Forms.Maps; | |
namespace YourNameSpace | |
{ | |
public class App : Application | |
{ | |
public App() | |
{ | |
MainPage = new MapPage(); | |
} | |
} | |
public class MapPage : ContentPage { | |
public MapPage() { | |
var map = new MyMap( | |
MapSpan.FromCenterAndRadius( | |
new Position(37,-122), Distance.FromMiles(0.3))) { | |
IsShowingUser = true, // iOS asks for permission if this is set to true, but not if not set or set to false. | |
HeightRequest = 100, | |
WidthRequest = 960, | |
VerticalOptions = LayoutOptions.FillAndExpand | |
}; | |
var stack = new StackLayout { Spacing = 0 }; | |
stack.Children.Add(map); | |
Content = stack; | |
} | |
} | |
public class MyMap : Map { | |
public MyMap(MapSpan region) : base(region) | |
{ | |
} | |
} | |
} | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
using System; | |
using Xamarin.Forms; | |
using YourNameSpace; | |
using YourNameSpace.iOS; | |
using Xamarin.Forms.Maps.iOS; | |
using MapKit; | |
using UIKit; | |
using CoreLocation; | |
[assembly: ExportRenderer (typeof (MyMap), typeof (MyMapRenderer))] | |
namespace YourNameSpace.iOS | |
{ | |
public class MyMapRenderer : MapRenderer | |
{ | |
MKMapView mapView; | |
MyMap myMap; | |
MKPolyline lineOverlay; | |
MKPolylineRenderer lineRenderer; | |
protected override void OnElementChanged(Xamarin.Forms.Platform.iOS.ElementChangedEventArgs<View> e) | |
{ | |
base.OnElementChanged(e); | |
if (e.OldElement == null) { | |
mapView = Control as MKMapView; | |
myMap = e.NewElement as MyMap; | |
mapView.OverlayRenderer = (m, o) => { | |
if(lineRenderer == null) { | |
lineRenderer = new MKPolylineRenderer(o as MKPolyline); | |
lineRenderer.StrokeColor = UIColor.Red; | |
lineRenderer.FillColor = UIColor.Red; | |
} | |
return lineRenderer; | |
}; | |
var point1 = new CLLocationCoordinate2D(37,-122); | |
var point2 = new CLLocationCoordinate2D(37,-122.001); | |
var point3 = new CLLocationCoordinate2D(37.001,-122.002); | |
lineOverlay = MKPolyline.FromCoordinates(new CLLocationCoordinate2D[] {point1, point2, point3}); | |
mapView.AddOverlay (lineOverlay); | |
} | |
} | |
} | |
} | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
using System; | |
using Xamarin.Forms; | |
using YourNameSpace; | |
using YourNameSpace.Android; | |
using Xamarin.Forms.Maps.Android; | |
using Android.Gms.Maps; | |
using Android.Gms.Maps.Model; | |
[assembly: ExportRenderer (typeof (MyMap), typeof (MyMapRenderer))] | |
namespace YourNameSpace.Android | |
{ | |
public class MyMapRenderer : MapRenderer | |
{ | |
MapView mapView; | |
GoogleMap map; | |
MyMap myMap; | |
protected override void OnElementChanged(Xamarin.Forms.Platform.Android.ElementChangedEventArgs<Xamarin.Forms.View> e) | |
{ | |
base.OnElementChanged(e); | |
if (e.OldElement == null) { | |
mapView = Control as MapView; | |
map = mapView.Map; | |
myMap = e.NewElement as MyMap; | |
PolylineOptions line = new PolylineOptions(); | |
line.InvokeColor(global::Android.Graphics.Color.Red); | |
// Add the points of the polyline | |
LatLng latLng = new LatLng(37,-122); | |
line.Add(latLng); | |
latLng = new LatLng(37,-122.001); | |
line.Add(latLng); | |
latLng = new LatLng(37.001,-122.002); | |
line.Add(latLng); | |
// Add the polyline to the map | |
map.AddPolyline(line); | |
} | |
} | |
} | |
} | |
Hello,
Your example really helps.
Can you explain me how can i modify this code to add a polyline when maps was already created and also an event (marker clicked) ?
Thank you.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
myMap = e.NewElement as MyMap; is never used.