Destaque regiões em mapas com Xamarin.Forms

Olá, neste post irei demonstrar como destacar uma determinada região do mapa através de coordenadas (Latitude X Longitude) em aplicações Xamarin.Forms.

As regiões destacadas terão o formato de polígonos, e as coordenadas serão os pontos do polígono. Dessa forma, o tipo do polígono será definido de acordo com a quantidade de pontos adicionados.

Para o exemplo a seguir será utilizado o Nuget Package “Xamarin.Forms.Maps”, irei assumir que você já instalou o package e adicionou as permissões necessárias de acordo com cada plataforma. Caso contrário recomendo ler o post  Maps – Xamarin.Forms, antes de proseguir.

CustomMap.cs

Em seu projeto portable adicione a classe CustomMap, como demonstrado a seguir.

using System.Collections.Generic;
using Xamarin.Forms.Maps;
namespace App
{
public class CustomMap : Map
{
public List<Position> ShapeCoordinates { get; set; }
public CustomMap()
{
ShapeCoordinates = new List<Position>();
}
}
}

view raw
CustomMap.cs
hosted with ❤ by GitHub

Xaml

No arquivo Xaml crie uma referência para o namespace local e crie um CustomMap.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App"
x:Class="App.Square">
<local:CustomMap x:Name="Mapa" MapType="Street"
VerticalOptions="FillAndExpand"
IsShowingUser="true" />
</ContentPage>

view raw
Square.xaml
hosted with ❤ by GitHub

CODE-BEHIND

Defina a área que será demonstrada no mapa através de Latitude X Longitude e também a proximidade em milhas.

Em seguida, adicione os pontos necessários para definir a região que será destacada, também utilize Latitude X Longitude, lembrando que a quantidade de pontos será determinante para definir qual o polígono será utilizado para destacar a região.

Observações: Os pontos precisam estar próximos da Latitude X Longitude usada para definir a área que será demonstrada no mapa.

using Xamarin.Forms;
using Xamarin.Forms.Maps;
using Xamarin.Forms.Xaml;
namespace App
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Square : ContentPage
{
public Square()
{
InitializeComponent();
/*Define área que será demonstrada no mapa*/
Mapa.MoveToRegion(MapSpan.FromCenterAndRadius(new Position(23.4862658, 47.4443345), Distance.FromMiles(0.2)));
/*Define os pontos da região que será destacada*/
Mapa.ShapeCoordinates.Add(new Position(23.486265, 47.444334));
Mapa.ShapeCoordinates.Add(new Position(23.486836, 47.443764));
Mapa.ShapeCoordinates.Add(new Position(23.487302, 47.444504));
Mapa.ShapeCoordinates.Add(new Position(23.486667, 47.444994));
}
}
}

view raw
Square.xaml.cs
hosted with ❤ by GitHub

Android

Em seu projeto .android adicione uma classe chamada CustomMapRenderer, essa classe irá realizar a marcação da região de acordo com os pontos informados.
No método “OnElementPropertyChanged” você pode customizar o polígono editando as propriedades da variável polygonOptions.

using System.Collections.Generic;
using Android.Views;
using App.Droid;
using App;
using Xamarin.Forms;
using Xamarin.Forms.Maps.Android;
using Xamarin.Forms.Maps;
using Android.Gms.Maps.Model;
[assembly: ExportRenderer(typeof(CustomMap), typeof(CustomMapRenderer))]
namespace App.Droid
{
public class CustomMapRenderer : MapRenderer
{
List<Position> shapeCoordinates;
bool isDrawn;
protected override void OnElementChanged(Xamarin.Forms.Platform.Android.ElementChangedEventArgs<Map> e)
{
base.OnElementChanged(e);
if (e.OldElement != null)
{
// Unsubscribe
}
if (e.NewElement != null)
{
var formsMap = (CustomMap)e.NewElement;
shapeCoordinates = formsMap.ShapeCoordinates;
Control.GetMapAsync(this);
}
}
protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (e.PropertyName.Equals("VisibleRegion") && !isDrawn)
{
var polygonOptions = new PolygonOptions();
polygonOptions.InvokeFillColor(0x66FF0000);
polygonOptions.InvokeStrokeColor(0x660000FF);
polygonOptions.InvokeStrokeWidth(30.0f);
foreach (var position in shapeCoordinates)
{
polygonOptions.Add(new LatLng(position.Latitude, position.Longitude));
}
NativeMap.AddPolygon(polygonOptions);
isDrawn = true;
}
}
}
}

view raw
CustomMapRenderer.cs
hosted with ❤ by GitHub

iOS

Em seu projeto .iOS adicione uma classe chamada CustomMapRenderer, essa classe irá realizar a marcação da região de acordo com os pontos informados.
No método “GetOverlayRenderer” você pode customizar o polígono editando as propriedades da variável polygonRenderer.

using UIKit;
using Xamarin.Forms;
using App.iOS;
using Xamarin.Forms.Maps.iOS;
using MapKit;
using Xamarin.Forms.Platform.iOS;
using CoreLocation;
using ObjCRuntime;
[assembly: ExportRenderer(typeof(global::App.CustomMap), typeof(CustomMapRenderer))]
namespace App.iOS
{
public class CustomMapRenderer : MapRenderer
{
MKPolygonRenderer polygonRenderer;
protected override void OnElementChanged(ElementChangedEventArgs<View> e)
{
base.OnElementChanged(e);
if (e.OldElement != null)
{
var nativeMap = Control as MKMapView;
if (nativeMap != null)
{
nativeMap.RemoveOverlays(nativeMap.Overlays);
nativeMap.OverlayRenderer = null;
polygonRenderer = null;
}
}
if (e.NewElement != null)
{
var formsMap = (global::App.CustomMap)e.NewElement;
var nativeMap = Control as MKMapView;
nativeMap.OverlayRenderer = GetOverlayRenderer;
CLLocationCoordinate2D[] coords = new CLLocationCoordinate2D[formsMap.ShapeCoordinates.Count];
int index = 0;
foreach (var position in formsMap.ShapeCoordinates)
{
coords[index] = new CLLocationCoordinate2D(position.Latitude, position.Longitude);
index++;
}
var blockOverlay = MKPolygon.FromCoordinates(coords);
nativeMap.AddOverlay(blockOverlay);
}
}
MKOverlayRenderer GetOverlayRenderer(MKMapView mapView, IMKOverlay overlayWrapper)
{
if (polygonRenderer == null && !Equals(overlayWrapper, null))
{
var overlay = Runtime.GetNSObject(overlayWrapper.Handle) as IMKOverlay;
polygonRenderer = new MKPolygonRenderer(overlay as MKPolygon)
{
FillColor = UIColor.Red,
StrokeColor = UIColor.Blue,
Alpha = 0.4f,
LineWidth = 9
};
}
return polygonRenderer;
}
}
}

Resultados

 

Adicionando 3 pontos – Triângulo

screenshot-1507736229785

 

 

Adicionando 4 pontos – Quadrado

screenshot-1507736245315

 

 

Adicionando 5 pontos – Pentágono

screenshot-1507736272054

 

Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.

icongithub

2 comentários em “Destaque regiões em mapas com Xamarin.Forms

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s