Shape Layer
The shape layer provides binding to GeoJSON data and renders the specified geospatial objects.
Telerik Map supports all Geometry and Feature Objects, as well as the Geometry and Feature Collections from the GeoJSON Specification (which could be found at https://geojson.org).
To configure a Map Layer of type Shape:
- Add the
TelerikMap
tag. - Set the
Type
parameter of theMapLayer
toShape
. - Set the
Data
parameter. - Add the
MapLayerShapeSettingsStyle
tag insideMapLayerShapeSettings
.
The following example demonstrates how to configure the Map Shape Layer.
The Map Shape Layer configuration.
@* This code snippet showcases an example of a Shape Layer configuration. *@
@using System.Net
<TelerikMap Center="@Center"
Zoom="3">
<MapLayers>
<MapLayer Type="@MapLayersType.Shape"
Data="@WorldData">
<MapLayerShapeSettings>
<MapLayerShapeSettingsStyle>
<MapLayerShapeSettingsStyleFill Color="#0000ff" Opacity="0.5"></MapLayerShapeSettingsStyleFill>
<MapLayerShapeSettingsStyleStroke Color="#ffffff"></MapLayerShapeSettingsStyleStroke>
</MapLayerShapeSettingsStyle>
</MapLayerShapeSettings>
</MapLayer>
<MapLayer Type="@MapLayersType.Marker"
Data="@MarkerData1"
LocationField="@nameof(MarkerModel.LatLng)"
TitleField="@nameof(MarkerModel.Title)">
</MapLayer>
</MapLayers>
</TelerikMap>
@code {
public double[] Center { get; set; } = new double[] { 30.268107, -97.744821 };
public string WorldData { get; set; } = new WebClient().DownloadString("https://raw.githubusercontent.com/telerik/blazor-ui/master/map/world-data.json");
public List<MarkerModel> MarkerData1 { get; set; } = new List<MarkerModel>()
{
new MarkerModel()
{
LatLng = new double[] { 30.268107, -97.744821 },
Title = "Austin, TX"
}
};
public class MarkerModel
{
public double[] LatLng { get; set; }
public string Title { get; set; }
}
}
The result from the above code snippet.