I'm trying to display graphics within a GraphicsOverlay and I can't seem to get my label to appear off of the symbol. I have read that the xoffset doesn't work within an attribute label class; however, how is one to display a multi-line label next to a "pin" symbol. Below is a picture example of how it currently looks and I have added a section of code showing the construction of the layer and label.
**************Code Example**************
var pictureUri = new Uri("http://static.arcgis.com/images/Symbols/Shapes/RedPin1LargeB.png");
await matchSym.SetSourceAsync(pictureUri);
//create a simple top level renderer
var simpleRenderer = new SimpleRenderer { Symbol = matchSym };
_inspectionResultsLayer = new GraphicsOverlay
{
ID = GraphicLayerName,
Labeling = { IsEnabled = true },
Renderer = simpleRenderer
};
// create a new TextSymbol for displaying graphic labels
var labelSym = new TextSymbol
{
Font = new SymbolFont
("Arial",
12.0,
SymbolFontStyle.Normal,
SymbolTextDecoration.None,
SymbolFontWeight.Bold),
Color = Colors.Black,
BorderLineColor = Colors.LightGray,
BorderLineSize = 1,
AngleAlignment = MarkerAngleAlignment.Map,
HorizontalTextAlignment = HorizontalTextAlignment.Left,
};
// create a new LabelClass
var attributeLabelClass = new AttributeLabelClass
{
Symbol = labelSym,
TextExpression = "[Title] CONCAT NEWLINE CONCAT [Address]",
LabelPlacement = LabelPlacement.PointAboveRight,
};
_inspectionResultsLayer.Labeling.LabelClasses.Add(attributeLabelClass);
MainMapMapView.GraphicsOverlays.Add(_inspectionResultsLayer);
Accepted Solutions
Morning Mike
I always appreciate the speed in which I get a response on this forum!!
After re-reading what you wrote a few times, I tried a few different things and what I found best is assigning the symbol when the graphic gets added. This helps deal with the font layout issue. The first thing I did attempt was setting the width and height of the picturemarkersymbol when creating the renderer. I was missing that; however this did not seem to resolve my issue. Below is minor edits to my code in case others are needing to do something similar.
It would be nice to have a padding property on labels or even better a callout box like what is offered in Google Maps. As you can see from my TextExpression, I'm adding spaces before and after the values to create the desired padding within my "box".
*********************CODE EXAMPLE*********************
private GraphicsOverlay _inspectionResultsLayer;
private PictureMarkerSymbol _pictureMarkerSymbol;
private async Task CreateGraphicsLayer()
{
//create the symbol and store privately to use later
_pictureMarkerSymbol = new PictureMarkerSymbol
{
Width = 50,
Height = 50
};
var pictureUri = new Uri("http://static.arcgis.com/images/Symbols/Shapes/RedPin1LargeB.png");
await _pictureMarkerSymbol.SetSourceAsync(pictureUri);
_inspectionResultsLayer = new GraphicsOverlay
{
ID = GraphicLayerName,
Labeling = { IsEnabled = true },
};
// create a new TextSymbol for displaying graphic labels
var labelSym = new TextSymbol
{
Font = new SymbolFont
("Segoe UI",
12.0,
SymbolFontStyle.Normal,
SymbolTextDecoration.None,
SymbolFontWeight.Normal),
Color = Colors.DarkBlue,
//create a colour with some transparency
BackgroundColor = Color.FromArgb(150,245,245,245 ),
BorderLineSize = 1,
AngleAlignment = MarkerAngleAlignment.Map,
};
// create a new LabelClass
var attributeLabelClass = new AttributeLabelClass
{
Symbol = labelSym,
TextExpression = "\" \" CONCAT [Title] CONCAT \" \" CONCAT NEWLINE CONCAT \" \" CONCAT [Address] CONCAT \" \"",
LabelPlacement = LabelPlacement.PointCenterRight,
};
_inspectionResultsLayer.Labeling.LabelClasses.Add(attributeLabelClass);
MainMapMapView.GraphicsOverlays.Add(_inspectionResultsLayer);
}
private void AddMarkerSymbol(Marker marker)
{
var geometry = ProjectedGeometry(marker.Coordinates.X, marker.Coordinates.Y);
var myGraphic = new Graphic(geometry, _pictureMarkerSymbol);
// Add attributes to the Graphic from various information in the geocode match.
myGraphic.Attributes["Title"] = marker.Title;
myGraphic.Attributes["Address"] = marker.Address;
// add text and marker graphics
_inspectionResultsLayer.Graphics.Add(myGraphic);
SetMapView(geometry as Esri.ArcGISRuntime.Geometry.MapPoint);
}
*********************DESIRED LOOK*********************
