Hi
Are popups available in the ArcGIS Runtime SDK for .NET 100.0?
If popups are available, how we can use them?
Thank you
You can override the Callout style like this:
<esri:MapView>
<esri:MapView.Resources>
<Style TargetType="esri:Callout">
<Setter Property="BorderBrush" Value="Red" />
<Setter Property="BorderThickness" Value="5" />
</Style>
</esri:MapView.Resources>
</esri:MapView>
There's a lot of properties to override, but you might have to adapt your layout to the callout's style (ie make the background the same blue color, and remove your own border, reduce padding/margins etc.
For reference here's the full callout style defined:
<Style TargetType="{x:Type local:Callout}">
<Setter Property="MinWidth" Value="75" />
<Setter Property="Padding" Value="10" />
<Setter Property="Background" Value="#E6FFFFFF" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="BorderBrush" Value="LightGray" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Callout}">
<Grid x:Name="RootElement">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="EntranceTransitions">
<VisualState x:Name="Show">
<Storyboard>
<DoubleAnimation Duration="0:0:0.1" From="0" To="1" Storyboard.TargetName="RootElement" Storyboard.TargetProperty="Opacity" >
<DoubleAnimation.EasingFunction>
<CubicEase />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>
<VisualState x:Name="Hide">
<Storyboard>
<DoubleAnimation Duration="0:0:0" To="0" Storyboard.TargetName="RootElement" Storyboard.TargetProperty="Opacity" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="Visibility">
<VisualState x:Name="Visible">
<Storyboard>
<DoubleAnimation Duration="0:0:0.25" To="1" Storyboard.TargetName="RootElement" Storyboard.TargetProperty="Opacity" />
</Storyboard>
</VisualState>
<VisualState x:Name="HiddenByElevation">
<Storyboard>
<DoubleAnimation Duration="0:0:0.25" To=".3" Storyboard.TargetName="RootElement" Storyboard.TargetProperty="Opacity" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Path x:Name="PART_Border" Fill="{TemplateBinding Background}" Stretch="None" Stroke="{TemplateBinding BorderBrush}"
DataContext="{TemplateBinding BorderThickness}" StrokeThickness="{Binding Left}" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Grid x:Name="PART_ContentArea" HorizontalAlignment="Left" VerticalAlignment="Top">
<ContentPresenter Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Thank you
Hi,
Can you please share the whole code, to get similar kind of output, I also want to create a callout with Table like GUI and close button at the top of the callout.
Thanks.
On a side note I'd really recommend against this pattern of creating huge popups with lots and lots of contents, as they block the view of the map. A better design approach is to keep the popup small with just a title and an 'edit' or 'info' button. Clicking that brings out a side-panel with the full information. That way part of the map you're looking stays mostly unblocked, and the detailed data you get to work with next to, instead of over the map.
thanks Nielsen,
this is actually what I thought of. I am here kind of confused and stucked. I am developing Cross platform app. which works on both Droid and iOS, with single code base. for that I am working on Xamarin.Form Components.
in ArcGIS runtime SDK 100.1.0 for .NET There are two Namespaces e.g.
Esri.ArcGISRuntime.UI.Controls -->Esri.ArcGISRuntime.UI.Controls.MapView.
This above one has the property - as CalloutStyle.
Esri.ArcGISRuntime.Xamarin.Forms. --> From here I am using, Esri.ArcGISRuntime.Xamarin.Forms.MapView
But this doesn't have it.
Can you please suggest here, or share some sample code to set the Button inside the Callout on Esri.ArcGISRuntime.Xamarin.Forms.MapView's Tap Event.
Best Regards,
Ravindra
Hi,
I have found the solution of my Issue.
Sharing the code here, hope, it may help someone.
using System;
using System.Diagnostics;
using Esri.ArcGISRuntime.Geometry;
using Xamarin.Forms;
using Esri.ArcGISRuntime.Xamarin.Forms;
using Esri.ArcGISRuntime.Data;
using Esri.ArcGISRuntime.Mapping;
using Esri.ArcGISRuntime.Mapping.Popups;
using Esri.ArcGISRuntime.UI;
namespace GitTrial_Sample
{
public partial class IndexMapPage : ContentPage
{
public IndexMapPage()
{
InitializeComponent();
Title = "Show callout";
Initialize();
}
private void Initialize()
{
// Create a new basemap using the streets base layer
Basemap myBasemap = Basemap.CreateStreets();
// Create a new map based on the streets basemap
Map myMap = new Map(myBasemap);
// Assign the map to the MapView
MyMapView.Map = myMap;
// Wire up the MapView GeoVewTapped event
MyMapView.GeoViewTapped += MyMapView_GeoViewTapped;
}
private void MyMapView_GeoViewTapped(object sender, GeoViewInputEventArgs e)
{
// Get the user-tapped location
MapPoint mapLocation = e.Location;
// Project the user-tapped map point location to a geometry
Geometry myGeometry = GeometryEngine.Project(mapLocation, SpatialReferences.Wgs84);
// Convert to geometry to a traditional Lat/Long map point
MapPoint projectedLocation = (MapPoint)myGeometry;
// Format the display callout string based upon the projected map point (example: "Lat: 100.123, Long: 100.234")
string mapLocationDescription = string.Format("Lat: {0:F3} Long:{1:F3}", projectedLocation.Y, projectedLocation.X);
// Create a new callout definition using the formatted string
CalloutDefinition myCalloutDefinition = new CalloutDefinition("Location:", mapLocationDescription);
//myCalloutDefinition.DetailText = "This is Detailed text";
myCalloutDefinition.Text = "Header Line Text";
RuntimeImage rtImg = new RuntimeImage(new Uri("https://cdn0.iconfinder.com/data/icons/business-finance-vol-14-2/512/69-128.png"));
// Here URI can be any location of the image. I just referred randomly this img.
rtImg.LoadAsync();
//myCalloutDefinition.Icon = rtImg;
myCalloutDefinition.ButtonImage = rtImg;
Action<object> infoWindowButtonClick_Process = infoWindowBtn_Click_Event;
myCalloutDefinition.OnButtonClick = infoWindowButtonClick_Process;
// Display the callout
MyMapView.ShowCalloutAt(mapLocation, myCalloutDefinition);
}
private async void infoWindowBtn_Click_Event(object message)
{
Debug.Print("Info window Button Clicked......");
//var selectedAction = await DisplayActionSheet("Came from Infor Window", "OK", null, "You Clicked on Info window Button"); // This also Working
await DisplayAlert("Y=Infor window button clicked", "You came from Info Window on Map","OK"); // This also working
}
}
}
------- XAML File-------
<?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:esri="clr-namespace:Esri.ArcGISRuntime.Xamarin.Forms;assembly=Esri.ArcGISRuntime.Xamarin.Forms"
xmlns:mapping="clr-namespace:Esri.ArcGISRuntime.Mapping;assembly=Esri.ArcGISRuntime"
xmlns:esriUI="clr-namespace:Esri.ArcGISRuntime.UI;assembly=Esri.ArcGISRuntime"
xmlns:local="clr-namespace:GitTrial_Sample" x:Class="GitTrial_Sample.IndexMapPage"
Title="Welcome to Index Map Page">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness" iOS="0,40,0,0" />
</ContentPage.Padding>
<esri:MapView x:Name="MyMapView">
</esri:MapView>
</ContentPage>
... I prefer to share full code, so that there is no confusion for newbies to free it.
find the is the sc
reenshot..
Novice Question: Can you provide any instruction on creating a side-panel and displaying attribute information?
Hello Joe,
How did you ended up showing all the attribute information.
Coming from Javascript API world, I am finding out working with runtime sdk very challenging.
I would love to display more than just one line of attribute info. I would like to display attributes in tabular format like yours.
Can you please share your code?
thanks
Don
We haven't gotten around to using the new parts of the API. But we have the control that is shown above and display using the Overlays collection and call SetAnchorPoint to locate the pin. Our users want a popup that displays more than just a couple attributes, and this seems to be working. I do plan to try to integrate it into the Callout API stuff, but it is a low priority
I also want same grid view as map callout in xamrin.forms .How it is possibile to customize the web map callout as grid