зеркало из https://github.com/telerik/blazor-docs.git
docs(map): Revamp Overview, Tile and Marker examples and provide CSP information (#2491)
* docs(map): Revamp Overview, Tile and Marker examples and provide CSP information * Minor code refactoring * Update components/map/layers/marker.md Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com> * Update components/map/layers/marker.md Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com> * Update components/map/layers/marker.md * Update components/map/layers/marker.md * Update components/map/layers/marker.md Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com> * Update components/map/layers/marker.md Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com> * Update troubleshooting/csp.md Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com> * Update components/map/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com> * Update components/map/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com> * Update components/map/overview.md --------- Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>
This commit is contained in:
Dimo Dimov
GitHub
Родитель
0c7f01eda9
Коммит
bebae22cc1
|
|
@ -0,0 +1,3 @@
|
|||
#urltemplate-csp
|
||||
> The Map component provides two ways to define the `UrlTemplate` of tile layers and the `MapLayerMarkerSettings` `Template` of marker layers. See [Map Content Security Policy]({%slug components/map/overview%}#content-security-policy) for more information and comparison.
|
||||
#end
|
||||
|
|
@ -556,6 +556,8 @@ The `OnPanEnd` event fires when the user has finished moving (panning) the Map.
|
|||
}
|
||||
````
|
||||
|
||||
@[template](/_contentTemplates/map/general.md#urltemplate-csp)
|
||||
|
||||
## See Also
|
||||
|
||||
* [Live Demo: Map Events](https://demos.telerik.com/blazor-ui/map/events)
|
||||
|
|
|
|||
Двоичные данные
components/map/images/bubble-layer.png
Двоичные данные
components/map/images/bubble-layer.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 60 KiB |
Двоичные данные
components/map/images/map-basics.png
Двоичные данные
components/map/images/map-basics.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 112 KiB |
Двоичные данные
components/map/images/marker-layer.png
Двоичные данные
components/map/images/marker-layer.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 62 KiB |
Двоичные данные
components/map/images/marker-shapes.png
Двоичные данные
components/map/images/marker-shapes.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 83 KiB |
Двоичные данные
components/map/images/marker-tooltip-settings.png
Двоичные данные
components/map/images/marker-tooltip-settings.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 59 KiB |
Двоичные данные
components/map/images/shape-layer.png
Двоичные данные
components/map/images/shape-layer.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 38 KiB |
Двоичные данные
components/map/images/tile-layer.png
Двоичные данные
components/map/images/tile-layer.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 59 KiB |
|
|
@ -112,7 +112,3 @@ The following example demonstrates how to configure the Map Bubble Layer.
|
|||
}
|
||||
}
|
||||
````
|
||||
|
||||
>caption The result from the above code snippet.
|
||||
|
||||
|
||||
|
|
@ -10,141 +10,61 @@ position: 5
|
|||
|
||||
# Marker Layer
|
||||
|
||||
The marker functionality allows you to add points to the Map. These points are defined by the geographical position in the map and can show useful information to the user in a tooltip.
|
||||
The marker functionality allows you to add points of interest to the Map. These points are defined by the geographical position on the map and can show useful information to the user in a tooltip.
|
||||
|
||||
Sections in this article:
|
||||
This article describes how to:
|
||||
|
||||
* [Creating the Marker layer](#creating-the-marker-map-layer)
|
||||
* [Customizing the Marker appearance](#customizing-the-marker-appearance)
|
||||
* [Defining the Marker shapes](#defining-the-marker-shapes)
|
||||
* [Setting the Marker tooltip](#setting-the-marker-tooltip)
|
||||
* [Create Marker layers](#creating-marker-layers)
|
||||
* [Customize the Marker appearance](#customizing-marker-appearances)
|
||||
* [Define Marker shapes](#defining-marker-shapes)
|
||||
* [Set Marker tooltips](#setting-marker-tooltips)
|
||||
|
||||
## Creating the Marker Map Layer
|
||||
## Creating Marker Layers
|
||||
|
||||
To configure a Map layer of the Marker type:
|
||||
To define a Marker layer in the Map:
|
||||
|
||||
1. Add the `TelerikMap` tag to the Map.
|
||||
2. Set the `Type` parameter of the `MapLayer` to `Marker`.
|
||||
1. Add a `<MapLayer>` tag to `<MapLayers>`.
|
||||
2. Set the `Type` parameter of the `MapLayer` to `MapLayersType.Marker`.
|
||||
3. Set the `Data` parameter.
|
||||
4. Set the `LocationField` and `TitleField` parameters.
|
||||
5. (Optional) Provide the [tooltip settings](#marker-tooltip-settings) and choose the [Marker shape](#marker-shapes).
|
||||
4. Set the `LocationField` and `TitleField` parameters to the respective property names of the model class.
|
||||
5. (optional) Provide the [tooltip settings](#marker-tooltip-settings) or choose the [Marker shape](#marker-shapes).
|
||||
|
||||
The following example demonstrates how to configure the Marker layer of the Map.
|
||||
|
||||
>caption The Marker Map layer configuration.
|
||||
>caption The Marker Map layer configuration
|
||||
|
||||
````CSHTML
|
||||
@* This code snippet showcases an example of a Marker layer configuration. *@
|
||||
|
||||
<TelerikMap Center="@Center" Zoom="3">
|
||||
<MapLayers>
|
||||
<MapLayer Type="@MapLayersType.Marker"
|
||||
Data="@MarkerData1"
|
||||
LocationField="@nameof(MarkerModel.LatLng)"
|
||||
TitleField="@nameof(MarkerModel.Title)">
|
||||
</MapLayer>
|
||||
|
||||
<MapLayer Type="@MapLayersType.Tile"
|
||||
Attribution="@Attribution"
|
||||
Subdomains="@Subdomains"
|
||||
UrlTemplate="@UrlTemplate">
|
||||
</MapLayer>
|
||||
|
||||
<MapLayer Type="@MapLayersType.Marker"
|
||||
Data="@MarkerData2"
|
||||
LocationField="@nameof(MarkerModel.LatLng)"
|
||||
TitleField="@nameof(MarkerModel.Title)">
|
||||
</MapLayer>
|
||||
</MapLayers>
|
||||
</TelerikMap>
|
||||
|
||||
@code {
|
||||
public string[] Subdomains { get; set; } = new string[] { "a", "b", "c" };
|
||||
public string UrlTemplate { get; set; } = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png";
|
||||
public string Attribution { get; set; } = "© <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
|
||||
public double[] Center { get; set; } = new double[] { 30.268107, -97.744821 };
|
||||
|
||||
public List<MarkerModel> MarkerData1 { get; set; } = new List<MarkerModel>()
|
||||
{
|
||||
new MarkerModel()
|
||||
{
|
||||
LatLng = new double[] { 30.268107, -97.744821 },
|
||||
Title = "Austin, TX"
|
||||
}
|
||||
};
|
||||
|
||||
public List<MarkerModel> MarkerData2 { get; set; } = new List<MarkerModel>()
|
||||
{
|
||||
new MarkerModel()
|
||||
{
|
||||
LatLng = new double[] { 37.7749, -122.4194 },
|
||||
Title = "San Francisco, CA"
|
||||
}
|
||||
};
|
||||
|
||||
public class MarkerModel
|
||||
{
|
||||
public double[] LatLng { get; set; }
|
||||
public string Title { get; set; }
|
||||
}
|
||||
}
|
||||
````
|
||||
|
||||
## Customizing the Marker Appearance
|
||||
|
||||
To customize the marker appearance, set the string `Template` parameter in the corresponding `MapLayerMarkerSettings` inner tag of the marker.
|
||||
|
||||
The general syntax of the Marker template is based on the [Kendo UI templates](https://docs.telerik.com/kendo-ui/framework/templates/overview).
|
||||
|
||||
>caption Custom markers.
|
||||
|
||||
````CSHTML
|
||||
@* This code snippet showcases an example of customizing the Marker appearance. *@
|
||||
|
||||
<TelerikMap Center="@Center"
|
||||
<TelerikMap Center="@MapCenter"
|
||||
Zoom="3">
|
||||
<MapLayers>
|
||||
<MapLayer Type="@MapLayersType.Marker"
|
||||
Data="@MarkerData1"
|
||||
LocationField="@nameof(MarkerModel.LatLng)"
|
||||
TitleField="@nameof(MarkerModel.Title)">
|
||||
<MapLayerMarkerSettings Template="<span class='custom-marker-class'>#= dataItem.Title #</span>">
|
||||
</MapLayerMarkerSettings>
|
||||
</MapLayer>
|
||||
|
||||
<MapLayer Type="@MapLayersType.Tile"
|
||||
Attribution="@Attribution"
|
||||
Subdomains="@Subdomains"
|
||||
UrlTemplate="@UrlTemplate">
|
||||
Attribution="@LayerAttribution"
|
||||
Subdomains="@LayerSubdomains"
|
||||
UrlTemplate="@LayerUrlTemplate">
|
||||
</MapLayer>
|
||||
|
||||
<MapLayer Type="@MapLayersType.Marker"
|
||||
Data="@MarkerData2"
|
||||
Data="@MarkerData"
|
||||
LocationField="@nameof(MarkerModel.LatLng)"
|
||||
TitleField="@nameof(MarkerModel.Title)">
|
||||
<MapLayerMarkerSettings Template="#= dataItem.LatLng #">
|
||||
</MapLayerMarkerSettings>
|
||||
</MapLayer>
|
||||
|
||||
</MapLayers>
|
||||
</TelerikMap>
|
||||
|
||||
@code {
|
||||
public string[] Subdomains { get; set; } = new string[] { "a", "b", "c" };
|
||||
public string UrlTemplate { get; set; } = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png";
|
||||
public string Attribution { get; set; } = "© <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
|
||||
public double[] Center { get; set; } = new double[] { 30.268107, -97.744821 };
|
||||
private double[] MapCenter { get; set; } = new double[] { 30.268107, -97.744821 };
|
||||
|
||||
public List<MarkerModel> MarkerData1 { get; set; } = new List<MarkerModel>()
|
||||
{
|
||||
private readonly string[] LayerSubdomains = new string[] { "a", "b", "c" };
|
||||
private const string LayerUrlTemplate = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png";
|
||||
private const string LayerAttribution = "© <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
|
||||
|
||||
private List<MarkerModel> MarkerData { get; set; } = new List<MarkerModel>() {
|
||||
new MarkerModel()
|
||||
{
|
||||
LatLng = new double[] { 30.268107, -97.744821 },
|
||||
Title = "Austin, TX"
|
||||
},
|
||||
};
|
||||
|
||||
public List<MarkerModel> MarkerData2 { get; set; } = new List<MarkerModel>()
|
||||
{
|
||||
new MarkerModel()
|
||||
{
|
||||
LatLng = new double[] { 37.7749, -122.4194 },
|
||||
|
|
@ -154,74 +74,172 @@ The general syntax of the Marker template is based on the [Kendo UI templates](h
|
|||
|
||||
public class MarkerModel
|
||||
{
|
||||
public double[] LatLng { get; set; }
|
||||
public string Title { get; set; }
|
||||
public double[]? LatLng { get; set; }
|
||||
public string Title { get; set; } = string.Empty;
|
||||
}
|
||||
}
|
||||
|
||||
<style>
|
||||
.custom-marker-class {
|
||||
background-image: url(https://demos.telerik.com/kendo-ui/content/shared/icons/16/star.png);
|
||||
background-color: palegoldenrod;
|
||||
color: blue;
|
||||
background-size: 9px;
|
||||
width: 62px;
|
||||
background-repeat: no-repeat;
|
||||
display: inline-table;
|
||||
font-size: 14px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
</style>
|
||||
````
|
||||
|
||||
## Defining the Marker Shapes
|
||||
## Customizing Marker Appearance
|
||||
|
||||
To customize the marker appearance, set the `Template` parameter in the `<MapLayerMarkerSettings>` child tag of the corresponding `MapLayer`.
|
||||
|
||||
The `Template` parameter must point to the name of a JavaScript function, which is defined in the global scope. This function must return plain text or HTML markup as a string. The template function argument is a JavaScript object with properties that match the Marker layer's model class.
|
||||
|
||||
The following example uses two Marker layers with different templates. One renders custom HTML markup. The other one shows how to render the built-in Map marker with custom colors.
|
||||
|
||||
>caption Using Map marker template
|
||||
|
||||
````CSHTML
|
||||
<TelerikMap Center="@MapCenter"
|
||||
Zoom="3">
|
||||
<MapLayers>
|
||||
<MapLayer Type="@MapLayersType.Tile"
|
||||
Attribution="@LayerAttribution"
|
||||
Subdomains="@LayerSubdomains"
|
||||
UrlTemplate="mapLayerUrlTemplate">
|
||||
</MapLayer>
|
||||
|
||||
<MapLayer Type="@MapLayersType.Marker"
|
||||
Data="@MarkerData1"
|
||||
LocationField="@nameof(MarkerModel.LatLng)"
|
||||
TitleField="@nameof(MarkerModel.Title)">
|
||||
<MapLayerMarkerSettings Template="mapLayerMarkerTemplate" />
|
||||
</MapLayer>
|
||||
|
||||
<MapLayer Type="@MapLayersType.Marker"
|
||||
Data="@MarkerData2"
|
||||
LocationField="@nameof(MarkerModel.LatLng)"
|
||||
TitleField="@nameof(MarkerModel.Title)">
|
||||
<MapLayerMarkerSettings Template="mapLayerSvgMarkerTemplate" />
|
||||
</MapLayer>
|
||||
|
||||
</MapLayers>
|
||||
</TelerikMap>
|
||||
|
||||
@* Move the JavaScript code to a separate JS file. *@
|
||||
<script suppress-error="BL9992">
|
||||
function mapLayerMarkerTemplate(context) {
|
||||
return `<span class="marker-star">${context.State}</span>`;
|
||||
}
|
||||
|
||||
function mapLayerSvgMarkerTemplate(context) {
|
||||
return `<span style="color:${context.Color};" class="k-svg-icon k-icon-xxl" aria-hidden="true"><svg viewBox="0 0 512 512" focusable="false"><path d="M256 0C158.8 0 80 78.8 80 176s176 336 176 336 176-238.8 176-336S353.2 0 256 0m0 288c-61.9 0-112-50.1-112-112S194.1 64 256 64s112 50.1 112 112-50.1 112-112 112m48-112c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48"></path></svg></span>`;
|
||||
}
|
||||
|
||||
function mapLayerUrlTemplate(context) {
|
||||
return `https://${context.subdomain}.tile.openstreetmap.org/${context.zoom}/${context.x}/${context.y}.png`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.marker-star {
|
||||
background: palegoldenrod url(https://demos.telerik.com/kendo-ui/content/shared/icons/16/star.png) 0 center no-repeat;
|
||||
padding: .2em .2em .2em 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
private double[] MapCenter { get; set; } = new double[] { 30.268107, -97.744821 };
|
||||
|
||||
private readonly string[] LayerSubdomains = new string[] { "a", "b", "c" };
|
||||
private const string LayerAttribution = "© <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
|
||||
|
||||
private List<MarkerModel> MarkerData1 { get; set; } = new List<MarkerModel>() {
|
||||
new MarkerModel()
|
||||
{
|
||||
LatLng = new double[] { 30.268107, -97.744821 },
|
||||
Title = "Austin",
|
||||
State = "TX"
|
||||
}
|
||||
};
|
||||
|
||||
private List<MarkerModel> MarkerData2 { get; set; } = new List<MarkerModel>() {
|
||||
new MarkerModel()
|
||||
{
|
||||
LatLng = new double[] { 37.7749, -122.4194 },
|
||||
Title = "San Francisco",
|
||||
State = "CA",
|
||||
Color = "orange"
|
||||
},
|
||||
new MarkerModel()
|
||||
{
|
||||
LatLng = new double[] { 36.188110, -115.176468 },
|
||||
Title = "Las Vegas",
|
||||
State = "NV"
|
||||
},
|
||||
new MarkerModel()
|
||||
{
|
||||
LatLng = new double[] { 40.7166638, -74.0 },
|
||||
Title = "New York",
|
||||
State = "NY",
|
||||
Color = "blue"
|
||||
}
|
||||
};
|
||||
|
||||
public class MarkerModel
|
||||
{
|
||||
public double[]? LatLng { get; set; }
|
||||
public string Title { get; set; } = string.Empty;
|
||||
public string State { get; set; } = string.Empty;
|
||||
public string Color { get; set; } = "--kendo-color-primary";
|
||||
}
|
||||
}
|
||||
````
|
||||
|
||||
@[template](/_contentTemplates/map/general.md#urltemplate-csp)
|
||||
|
||||
## Defining Marker Shapes
|
||||
|
||||
The Map supports the `Pin` and `PinTarget` Marker types. To define the Marker type, use the `Shape` parameter of the `MapLayer` tag. By default, the visual appearance of the Marker is `PinTarget`.
|
||||
|
||||
>caption Different Marker shapes.
|
||||
>caption Different Marker shapes
|
||||
|
||||
````CSHTML
|
||||
@* This code snippet showcases an example of the different Marker shapes. *@
|
||||
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
|
||||
<ButtonGroupToggleButton Selected="@( MarkerShape == MapMarkersShape.PinTarget )"
|
||||
OnClick="@( () => MarkerShape = MapMarkersShape.PinTarget )">
|
||||
Use Pin Target Markers
|
||||
</ButtonGroupToggleButton>
|
||||
<ButtonGroupToggleButton Selected="@( MarkerShape == MapMarkersShape.Pin )"
|
||||
OnClick="@( () => MarkerShape = MapMarkersShape.Pin )">
|
||||
Use Pin Markers
|
||||
</ButtonGroupToggleButton>
|
||||
</TelerikButtonGroup>
|
||||
|
||||
<TelerikMap Center="@Center" Zoom="3">
|
||||
<TelerikMap Center="@MapCenter"
|
||||
Zoom="3">
|
||||
<MapLayers>
|
||||
<MapLayer Type="@MapLayersType.Marker"
|
||||
Data="@MarkerData1"
|
||||
LocationField="@nameof(MarkerModel.LatLng)"
|
||||
TitleField="@nameof(MarkerModel.Title)" Shape="MapMarkersShape.Pin">
|
||||
</MapLayer>
|
||||
|
||||
<MapLayer Type="@MapLayersType.Tile"
|
||||
Attribution="@Attribution"
|
||||
Subdomains="@Subdomains"
|
||||
UrlTemplate="@UrlTemplate">
|
||||
Attribution="@LayerAttribution"
|
||||
Subdomains="@LayerSubdomains"
|
||||
UrlTemplate="@LayerUrlTemplate">
|
||||
</MapLayer>
|
||||
|
||||
<MapLayer Type="@MapLayersType.Marker"
|
||||
Data="@MarkerData2"
|
||||
Data="@MarkerData"
|
||||
LocationField="@nameof(MarkerModel.LatLng)"
|
||||
TitleField="@nameof(MarkerModel.Title)" Shape="MapMarkersShape.PinTarget">
|
||||
TitleField="@nameof(MarkerModel.Title)"
|
||||
Shape="@MarkerShape">
|
||||
</MapLayer>
|
||||
</MapLayers>
|
||||
</TelerikMap>
|
||||
|
||||
@code {
|
||||
public string[] Subdomains { get; set; } = new string[] { "a", "b", "c" };
|
||||
public string UrlTemplate { get; set; } = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png";
|
||||
public string Attribution { get; set; } = "© <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
|
||||
public double[] Center { get; set; } = new double[] { 30.268107, -97.744821 };
|
||||
private double[] MapCenter { get; set; } = new double[] { 30.268107, -97.744821 };
|
||||
|
||||
public List<MarkerModel> MarkerData1 { get; set; } = new List<MarkerModel>()
|
||||
{
|
||||
private MapMarkersShape MarkerShape { get; set; } = MapMarkersShape.Pin;
|
||||
|
||||
private readonly string[] LayerSubdomains = new string[] { "a", "b", "c" };
|
||||
private const string LayerUrlTemplate = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png";
|
||||
private const string LayerAttribution = "© <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
|
||||
|
||||
public List<MarkerModel> MarkerData { get; set; } = new List<MarkerModel>() {
|
||||
new MarkerModel()
|
||||
{
|
||||
LatLng = new double[] { 30.268107, -97.744821 },
|
||||
Title = "Austin, TX"
|
||||
}
|
||||
};
|
||||
|
||||
public List<MarkerModel> MarkerData2 { get; set; } = new List<MarkerModel>()
|
||||
{
|
||||
},
|
||||
new MarkerModel()
|
||||
{
|
||||
LatLng = new double[] { 37.7749, -122.4194 },
|
||||
|
|
@ -231,72 +249,57 @@ The Map supports the `Pin` and `PinTarget` Marker types. To define the Marker ty
|
|||
|
||||
public class MarkerModel
|
||||
{
|
||||
public double[] LatLng { get; set; }
|
||||
public string Title { get; set; }
|
||||
public double[]? LatLng { get; set; }
|
||||
public string Title { get; set; } = string.Empty;
|
||||
}
|
||||
}
|
||||
````
|
||||
|
||||
## Setting the Marker Tooltip
|
||||
## Setting Marker Tooltips
|
||||
|
||||
The `MapLayerMarkerSettingsTooltip` tag allows you to fine-tune the content, appearance, and options of the tooltip, as well as fully customize its HTML content.
|
||||
|
||||
>caption Marker tooltip template.
|
||||
>caption Marker tooltip template
|
||||
|
||||
````CSHTML
|
||||
@* This code snippet showcases an example of the Marker tooltip settings. *@
|
||||
|
||||
<TelerikMap Center="@Center"
|
||||
<TelerikMap Center="@MapCenter"
|
||||
Zoom="3">
|
||||
<MapLayers>
|
||||
<MapLayer Type="@MapLayersType.Tile"
|
||||
Attribution="@LayerAttribution"
|
||||
Subdomains="@LayerSubdomains"
|
||||
UrlTemplate="@LayerUrlTemplate">
|
||||
</MapLayer>
|
||||
|
||||
<MapLayer Type="@MapLayersType.Marker"
|
||||
Data="@MarkerData1"
|
||||
LocationField="@nameof(MarkerModel.LatLng)"
|
||||
TitleField="@nameof(MarkerModel.Title)">
|
||||
<MapLayerMarkerSettings>
|
||||
<MapLayerMarkerSettingsTooltip>
|
||||
<Template>
|
||||
@{
|
||||
var dataItem = context.DataItem as MarkerModel;
|
||||
}
|
||||
|
||||
<div>marker for: @dataItem.Title</div>
|
||||
</Template>
|
||||
</MapLayerMarkerSettingsTooltip>
|
||||
</MapLayerMarkerSettings>
|
||||
<MapLayerMarkerSettings>
|
||||
<MapLayerMarkerSettingsTooltip>
|
||||
<Template>
|
||||
@{ var dataItem = (MarkerModel)context.DataItem; }
|
||||
<div>Marker Tooltip for: @dataItem.Title</div>
|
||||
</Template>
|
||||
</MapLayerMarkerSettingsTooltip>
|
||||
</MapLayerMarkerSettings>
|
||||
</MapLayer>
|
||||
|
||||
<MapLayer Type="@MapLayersType.Tile"
|
||||
Attribution="@Attribution"
|
||||
Subdomains="@Subdomains"
|
||||
UrlTemplate="@UrlTemplate">
|
||||
</MapLayer>
|
||||
|
||||
<MapLayer Type="@MapLayersType.Marker"
|
||||
Data="@MarkerData2"
|
||||
LocationField="@nameof(MarkerModel.LatLng)"
|
||||
TitleField="@nameof(MarkerModel.Title)">
|
||||
</MapLayer>
|
||||
</MapLayers>
|
||||
</TelerikMap>
|
||||
|
||||
@code {
|
||||
public string[] Subdomains { get; set; } = new string[] { "a", "b", "c" };
|
||||
public string UrlTemplate { get; set; } = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png";
|
||||
public string Attribution { get; set; } = "© <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
|
||||
public double[] Center { get; set; } = new double[] { 30.268107, -97.744821 };
|
||||
private double[] MapCenter { get; set; } = new double[] { 30.268107, -97.744821 };
|
||||
|
||||
public List<MarkerModel> MarkerData1 { get; set; } = new List<MarkerModel>()
|
||||
{
|
||||
private readonly string[] LayerSubdomains = new string[] { "a", "b", "c" };
|
||||
private const string LayerUrlTemplate = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png";
|
||||
private string LayerAttribution { get; set; } = "© <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
|
||||
|
||||
private List<MarkerModel> MarkerData1 { get; set; } = new List<MarkerModel>() {
|
||||
new MarkerModel()
|
||||
{
|
||||
LatLng = new double[] { 30.268107, -97.744821 },
|
||||
Title = "Austin, TX"
|
||||
}
|
||||
};
|
||||
|
||||
public List<MarkerModel> MarkerData2 { get; set; } = new List<MarkerModel>()
|
||||
{
|
||||
},
|
||||
new MarkerModel()
|
||||
{
|
||||
LatLng = new double[] { 37.7749, -122.4194 },
|
||||
|
|
@ -306,8 +309,8 @@ The `MapLayerMarkerSettingsTooltip` tag allows you to fine-tune the content, app
|
|||
|
||||
public class MarkerModel
|
||||
{
|
||||
public double[] LatLng { get; set; }
|
||||
public string Title { get; set; }
|
||||
public double[]? LatLng { get; set; }
|
||||
public string Title { get; set; } = string.Empty;
|
||||
}
|
||||
}
|
||||
````
|
||||
|
|
|
|||
|
|
@ -21,46 +21,48 @@ The layers in the Map are:
|
|||
* [Shape]({%slug components/map/layers/shape%})
|
||||
* [Bubble]({%slug components/map/layers/bubble%})
|
||||
|
||||
## MapLayers Parameters
|
||||
## MapLayer Parameters
|
||||
|
||||
The following parameters enable you to customize the appearance of the Blazor Map Layers:
|
||||
|
||||
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
|
||||
|
||||
| Parameter | Type | Description |
|
||||
| ----------- | ----------- | ----------- |
|
||||
| `Type` | `MapLayersType (enum)` | The type of the layer. |
|
||||
| --- | --- | --- |
|
||||
| `Attribution` | `string` | The attribution for the layer. |
|
||||
| `Subdomains` | `string[]` | A list of subdomains to use for loading tiles. Alternating between different subdomains allows more requests to be executed in parallel. |
|
||||
| `UrlTemplate` | `string` | The URL template for tile layers. Template variables: x - X coordinate of the tile; y - Y coordinate of the tile; zoom - zoom level or subdomain - Subdomain for this tile. See subdomains. |
|
||||
| `Shape` | `MapMarkersShape (enum)` | The marker shape for marker layers. |
|
||||
| `Symbol` | `MapLayersSymbol (enum)` | The default symbol for bubble layers. |
|
||||
| `ZIndex` | `double` | The zIndex for this layer. Layers are normally stacked in declaration order (last one is on top). |
|
||||
| `ValueField` | `string` | The value field for bubble layer symbols. The data item field should be a number. |
|
||||
| `Extent` | `double[]` | Specifies the extent of the region covered by this layer. The layer will be hidden when the specified area is out of view. Accepts a four-element array that specifies the extent covered by this layer: North-West latitude, longitude, South-East latitude, longitude. |
|
||||
| `Data` | `object` | The data for the layer. |
|
||||
| `Extent` | `double[]` | Specifies the extent of the region covered by this layer. The layer will be hidden when the specified area is out of view. Accepts a four-element array that specifies the extent covered by this layer: North-West latitude, longitude, South-East latitude, longitude. |
|
||||
| `LocationField` | `string` | The data item field which contains the marker (symbol) location. The field should be an array with two numbers - latitude and longitude in decimal degrees. |
|
||||
| `TileSize` | `double` | The size of the image tile in pixels. |
|
||||
| `TitleField` | `string` | The data item field which contains the marker title. |
|
||||
| `MaxSize` | `double` | The maximum symbol size for bubble layer symbols. |
|
||||
| `MinSize` | `double` | The minimum symbol size for bubble layer symbols. |
|
||||
| `MaxZoom` | `double` | The maximum zoom level at which to show this layer. |
|
||||
| `MinSize` | `double` | The minimum symbol size for bubble layer symbols. |
|
||||
| `MinZoom` | `double` | The minimum zoom level at which to show this layer. |
|
||||
| `Opacity` | `double` | The opacity for the layer. |
|
||||
| `Shape` | `MapMarkersShape` enum | The marker shape for marker layers. |
|
||||
| `Subdomains` | `string[]` | A list of subdomains to use for loading tiles. Using multiple subdomains allows more requests to be executed in parallel. Also see `UrlTemplate`. |
|
||||
| `Symbol` | `MapLayersSymbol` enum | The default symbol for bubble layers. |
|
||||
| `TileSize` | `double` | The size of the image tile in pixels. |
|
||||
| `TitleField` | `string` | The data item field which contains the marker title. |
|
||||
| `Type` | `MapLayersType` enum | The type of the layer. |
|
||||
| `UrlTemplate` | `string` | The URL template for tile layers. The available variables are: <ul><li>`x`—the X coordinate of the tile;</li><li>`y`—the Y coordinate of the tile</li><li>`zoom`—the zoom level</li><li>`subdomain`—the subdomain for this tile. Also see `Subdomains`. <br />There are [two possible ways to define the `UrlTemplate`]({%slug components/map/overview%}#content-security-policy). |
|
||||
| `ValueField` | `string` | The value field for bubble layer symbols. The data item field should be a number. |
|
||||
| `ZIndex` | `double` | The zIndex for this layer. Layers are normally stacked in declaration order (last one is on top). |
|
||||
|
||||
### MapLayersMarkerSettings parameters
|
||||
|
||||
The following parameters enable you to customize the appearance of the Blazor Map Marker Layers:
|
||||
|
||||
| Parameter | Type | Description |
|
||||
| ----------- | ----------- | ----------- |
|
||||
| `Tooltip` | `object` | The configuration of the marker tooltip. |
|
||||
| --- | --- | --- |
|
||||
| `Template` | `RenderFragment` | Specifies the tooltip template. |
|
||||
| `Tooltip` | `object` | The configuration of the marker tooltip. |
|
||||
|
||||
### MapLayersBubbleSettingsStyleFill parameters
|
||||
|
||||
The following parameters enable you to customize the appearance of the Blazor Map Bubble Layers:
|
||||
|
||||
| Parameter | Type | Description |
|
||||
| ----------- | ----------- | ----------- |
|
||||
| --- | --- | --- |
|
||||
| `Color` | `string` | The default fill color for layer bubbles. Accepts a valid CSS color string, including hex and rgb. |
|
||||
| `Opacity` | `double` | The default fill opacity (0 to 1) for layer bubbles. |
|
||||
|
||||
|
|
@ -69,9 +71,8 @@ The following parameters enable you to customize the appearance of the Blazor Ma
|
|||
The following parameters enable you to customize the appearance of the Blazor Map Bubble Layers:
|
||||
|
||||
| Parameter | Type | Description |
|
||||
| ----------- | ----------- | ----------- |
|
||||
| --- | --- | --- |
|
||||
| `Color` | `string` | The default stroke color for layer bubbles. Accepts a valid CSS color string, including hex and rgb. |
|
||||
| `Opacity` | `double` | The default fill opacity (0 to 1) for layer bubbles. |
|
||||
| `DashType` | `DashType (enum)` | The default dash type for layer bubbles. |
|
||||
| `Opacity` | `double` | The default stroke opacity (0 to 1) for layer bubbles. |
|
||||
| `Width` | `double` | The default stroke width for layer bubbles. |
|
||||
|
|
@ -81,7 +82,7 @@ The following parameters enable you to customize the appearance of the Blazor Ma
|
|||
The following parameters enable you to customize the appearance of the Blazor Map Shape Layers:
|
||||
|
||||
| Parameter | Type | Description |
|
||||
| ----------- | ----------- | ----------- |
|
||||
| --- | --- | --- |
|
||||
| `Color` | `string` | The default fill color for layer shapes. Accepts a valid CSS color string, including hex and rgb. |
|
||||
| `Opacity` | `double` | The fill opacity of the shape. |
|
||||
|
||||
|
|
@ -90,9 +91,8 @@ The following parameters enable you to customize the appearance of the Blazor Ma
|
|||
The following parameters enable you to customize the appearance of the Blazor Map Shape Layers:
|
||||
|
||||
| Parameter | Type | Description |
|
||||
| ----------- | ----------- | ----------- |
|
||||
| --- | --- | --- |
|
||||
| `Color` | `string` | The stroke color of the shape. |
|
||||
| `Opacity` | `double` | The default stroke opacity (0 to 1) for layer shapes. |
|
||||
| `DashType` | `double` | The default dash type for layer shapes. The following dash types are supported: "dash" - a line consisting of dashes; "dashDot" - a line consisting of a repeating pattern of dash-dot; "dot" - a line consisting of dots; "longDash" - a line consisting of a repeating pattern of long-dash; "longDashDot" - a line consisting of a repeating pattern of long-dash-dot; "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot or "solid" - a solid line. |
|
||||
| `Opacity` | `double` | The default stroke opacity (0 to 1) for layer bubbles. |
|
||||
| `Width` | `double` | The default stroke width for layer shapes. |
|
||||
| `Opacity` | `double` | The default stroke opacity (0 to 1) for layer shapes. |
|
||||
| `Width` | `double` | The default stroke width for layer shapes. |
|
||||
|
|
|
|||
|
|
@ -76,7 +76,3 @@ The following example demonstrates how to configure the Map Shape Layer.
|
|||
}
|
||||
}
|
||||
````
|
||||
|
||||
>caption The result from the above code snippet.
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -28,26 +28,25 @@ The following example demonstrates how to configure the Map Tile Layer.
|
|||
>caption The Map Tile Layer configuration.
|
||||
|
||||
````CSHTML
|
||||
@* This code snippet showcases an example of a Tile Layer configuration. *@
|
||||
|
||||
<TelerikMap Center="@Center" Zoom="3">
|
||||
<TelerikMap Center="@MapCenter"
|
||||
Zoom="3">
|
||||
<MapLayers>
|
||||
<MapLayer Type="@MapLayersType.Tile"
|
||||
Attribution="@Attribution"
|
||||
Subdomains="@Subdomains"
|
||||
UrlTemplate="@UrlTemplate">
|
||||
Attribution="@LayerAttribution"
|
||||
Subdomains="@LayerSubdomains"
|
||||
UrlTemplate="@LayerUrlTemplate">
|
||||
</MapLayer>
|
||||
</MapLayers>
|
||||
</TelerikMap>
|
||||
|
||||
@code {
|
||||
public string[] Subdomains { get; set; } = new string[] { "a", "b", "c" };
|
||||
public string UrlTemplate { get; set; } = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png";
|
||||
public string Attribution { get; set; } = "© <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
|
||||
public double[] Center { get; set; } = new double[] { 30.268107, -97.744821 };
|
||||
private double[] MapCenter { get; set; } = new double[] { 30.268107, -97.744821 };
|
||||
|
||||
public readonly string[] LayerSubdomains = new string[] { "a", "b", "c" };
|
||||
public const string LayerUrlTemplate = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png";
|
||||
public const string LayerAttribution = "© <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
|
||||
|
||||
}
|
||||
````
|
||||
|
||||
>caption The result from the above code snippet.
|
||||
|
||||
|
||||
@[template](/_contentTemplates/map/general.md#urltemplate-csp)
|
||||
|
|
|
|||
|
|
@ -10,41 +10,32 @@ position: 0
|
|||
|
||||
# Blazor Map Overview
|
||||
|
||||
The <a href="https://www.telerik.com/blazor-ui/map" target="_blank">Blazor Map component</a> displays geospatial information organized in layers.
|
||||
|
||||
The component provides [tile layers]({%slug components/map/layers/tile%}), [shape (vector) layers]({%slug components/map/layers/shape%}), [bubble layers]({%slug components/map/layers/bubble%}), and [marker layers]({%slug components/map/layers/marker%}).
|
||||
The <a href="https://www.telerik.com/blazor-ui/map" target="_blank">Blazor Map component</a> displays geospatial information organized in layers. The component provides [tile layers]({%slug components/map/layers/tile%}), [vector shape layers]({%slug components/map/layers/shape%}), [bubble layers]({%slug components/map/layers/bubble%}), and [marker layers]({%slug components/map/layers/marker%}).
|
||||
|
||||
## Creating Blazor Map
|
||||
|
||||
1. Use the `TelerikMap` tag to add the component to your razor page.
|
||||
1. Use the `TelerikMap` tag to add the component to a Razor file.
|
||||
1. Add a `<MapLayer>` tag nested inside `<MapLayers>`. Set its `Type` to `MapLayersType.Tile`.
|
||||
1. Set the [`UrlTemplate` parameter]({%slug components/map/layers%}#maplayer-parameters) of the tile layer. Check the [required syntax that complies with Content Security Policy](#content-security-policy).
|
||||
1. (optional) Set the Map `Attribution` and `Subdomains` parameters, depending on the specific tile provider.
|
||||
|
||||
2. Add the `MapLayer` tag nested inside `MapLayers`.
|
||||
|
||||
3. Set the `Type` property.
|
||||
|
||||
4. Set the `Attribution` and `Subdomains` properties.
|
||||
|
||||
5. Provide the [`UrlTemplate` property]({%slug components/map/layers%}#maplayers-parameters).
|
||||
|
||||
>caption A basic configuration of the Telerik Map.
|
||||
>caption Basic Telerik Map for Blazor
|
||||
|
||||
````CSHTML
|
||||
@* This code snippet showcases an example of a basic Map configuration. *@
|
||||
|
||||
<TelerikMap>
|
||||
<MapLayers>
|
||||
<MapLayer Type="@MapLayersType.Tile"
|
||||
Attribution="@Attribution"
|
||||
Subdomains="@Subdomains"
|
||||
UrlTemplate="@UrlTemplate">
|
||||
Attribution="@LayerAttribution"
|
||||
Subdomains="@LayerSubdomains"
|
||||
UrlTemplate="@LayerUrlTemplate">
|
||||
</MapLayer>
|
||||
</MapLayers>
|
||||
</TelerikMap>
|
||||
|
||||
@code {
|
||||
public string[] Subdomains { get; set; } = new string[] { "a", "b", "c" };
|
||||
public string UrlTemplate { get; set; } = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png";
|
||||
public string Attribution { get; set; } = "© <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
|
||||
private readonly string[] LayerSubdomains = new string[] { "a", "b", "c" };
|
||||
private string LayerUrlTemplate { get; set; } = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png";
|
||||
private const string LayerAttribution = "© <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
|
||||
}
|
||||
````
|
||||
|
||||
|
|
@ -70,54 +61,49 @@ Blazor Map also incorporates a navigation tool allowing the end user to easily z
|
|||
|
||||
The Blazor Map generates events that you can handle and further customize its behavior. [Read more about the Blazor Map events...]({%slug components/map/events%}).
|
||||
|
||||
## Methods
|
||||
## Content Security Policy
|
||||
|
||||
The Map methods are accessible through its reference.
|
||||
The Map renders with the help of a JavaScript-based rendering engine. This engine uses a templating mechanism that supports two kinds of syntax:
|
||||
|
||||
* `Refresh` - redraws the component.
|
||||
* [Legacy inline syntax](#creating-blazor-map). In this case, the template parameter is a string that consumes dynamic values <a href="https://docs.telerik.com/kendo-ui/framework/templates/essentials" target="_blank">through `#= ... #` expressions</a>, for example, `UrlTemplate="https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"`;
|
||||
* JavaScript functions that obtain dynamic values from the function arguments, for example, `UrlTemplate="jsFunctionName"`. This feature was introduced in version **4.5.0** of Telerik UI for Blazor.
|
||||
|
||||
>caption Get a reference to the Map and use its methods.
|
||||
Both syntax options provide the same capabilities. The legacy inline syntax depends on JavaScript code evaluation, which is not [compliant with strict Content Security Policy (CSP)]({%slug troubleshooting-csp%}). The function-based approach is CSP-compliant and can be more readable and convenient in complex scenarios.
|
||||
|
||||
>caption CSP-compliant Map
|
||||
|
||||
````CSHTML
|
||||
@* This code snippet showcases an example usage of the Refresh() method. *@
|
||||
|
||||
<TelerikButton OnClick="@( () => ChangeZoom() )">Change Size!</TelerikButton>
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<TelerikMap @ref="MapRef" Zoom="@Zoom">
|
||||
<TelerikMap>
|
||||
<MapLayers>
|
||||
<MapLayer Type="@MapLayersType.Tile"
|
||||
Attribution="@Attribution"
|
||||
Subdomains="@Subdomains"
|
||||
UrlTemplate="@UrlTemplate">
|
||||
Attribution="@LayerAttribution"
|
||||
Subdomains="@LayerSubdomains"
|
||||
UrlTemplate="urlTemplateFunction">
|
||||
</MapLayer>
|
||||
</MapLayers>
|
||||
</TelerikMap>
|
||||
|
||||
@code {
|
||||
TelerikMap MapRef { get; set; }
|
||||
|
||||
public double Zoom { get; set; } = 4;
|
||||
|
||||
public void ChangeZoom()
|
||||
{
|
||||
Zoom = 1;
|
||||
MapRef.Refresh();
|
||||
@* Move the JavaScript to a separate JS file. *@
|
||||
<script suppress-error="BL9992" nonce="BL9992">//
|
||||
function urlTemplateFunction(context) {
|
||||
return `https://${context.subdomain}.tile.openstreetmap.org/${context.zoom}/${context.x}/${context.y}.png`;
|
||||
}
|
||||
//</script>
|
||||
|
||||
public string[] Subdomains { get; set; } = new string[] { "a", "b", "c" };
|
||||
public string UrlTemplate { get; set; } = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png";
|
||||
public string Attribution { get; set; } = "© <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
|
||||
@code {
|
||||
private readonly string[] LayerSubdomains = new string[] { "a", "b", "c" };
|
||||
private const string LayerAttribution = "© <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
|
||||
}
|
||||
````
|
||||
|
||||
## Parameters
|
||||
## Map Parameters
|
||||
|
||||
The Blazor Map provides various parameters that allow you to configure the component:
|
||||
|
||||
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
|
||||
|
||||
| Parameter | Type | Description |
|
||||
| ----------- | ----------- | ----------- |
|
||||
| --- | --- | --- |
|
||||
| `Center` | `double[]` | The map center. Coordinates are listed as [Latitude, Longitude]. |
|
||||
| `MinZoom` | `double` | The minimum zoom level. Typical web maps use zoom levels from 0 (the whole world) to 19 (sub-meter features). |
|
||||
| `MaxZoom` | `double` | The maximum zoom level. Typical web maps use zoom levels from 0 (the whole world) to 19 (sub-meter features). |
|
||||
|
|
@ -135,27 +121,64 @@ The Blazor Map provides various parameters that allow you to configure the compo
|
|||
The following `MapControlsAttribution` parameters enable you to customize the appearance of the Blazor Map Controls:
|
||||
|
||||
| Parameter | Type | Description |
|
||||
| ----------- | ----------- | ----------- |
|
||||
| --- | --- | --- |
|
||||
| `Position` | `MapControlsPosition (enum)` | Specifies the position of the attribtion control. |
|
||||
|
||||
The following `MapControlsNavigator` parameters enable you to customize the appearance of the Blazor Map Controls:
|
||||
|
||||
| Parameter | Type | Description |
|
||||
| ----------- | ----------- | ----------- |
|
||||
| --- | --- | --- |
|
||||
| `Position` | `MapControlsPosition (enum)` | Specifies the position of the navigation control. |
|
||||
|
||||
The following `MapControlsZoom` parameters enable you to customize the appearance of the Blazor Map Controls:
|
||||
|
||||
| Parameter | Type | Description |
|
||||
| ----------- | ----------- | ----------- |
|
||||
| --- | --- | --- |
|
||||
| `Position` | `string` | Specifies the position of the zoom control. |
|
||||
|
||||
## Map Reference and Methods
|
||||
|
||||
The Map exposes a `Refresh` method. Use it to redraw the component after making programmatic changes that do not apply automatically.
|
||||
|
||||
>caption Get the Map reference and use its methods
|
||||
|
||||
````CSHTML
|
||||
<TelerikButton OnClick="@ChangeMapZoom">Change Map Zoom</TelerikButton>
|
||||
|
||||
<TelerikMap @ref="MapRef"
|
||||
Zoom="@MapZoom">
|
||||
<MapLayers>
|
||||
<MapLayer Type="@MapLayersType.Tile"
|
||||
Attribution="@LayerAttribution"
|
||||
Subdomains="@LayerSubdomains"
|
||||
UrlTemplate="@LayerUrlTemplate">
|
||||
</MapLayer>
|
||||
</MapLayers>
|
||||
</TelerikMap>
|
||||
|
||||
@code {
|
||||
private TelerikMap? MapRef { get; set; }
|
||||
|
||||
private double MapZoom { get; set; } = 4;
|
||||
|
||||
private readonly string[] LayerSubdomains = new string[] { "a", "b", "c" };
|
||||
private const string LayerUrlTemplate = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png";
|
||||
private const string LayerAttribution = "© <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
|
||||
|
||||
private void ChangeMapZoom()
|
||||
{
|
||||
MapZoom = 1;
|
||||
|
||||
MapRef?.Refresh();
|
||||
}
|
||||
}
|
||||
````
|
||||
|
||||
## Next Steps
|
||||
|
||||
[Configure the Tile Layer]({%slug components/map/layers/tile%})
|
||||
|
||||
[Using the Map Events]({%slug components/map/events%})
|
||||
* [Configure Map Layers]({%slug components/map/layers%})
|
||||
* [Handle Map Events]({%slug components/map/events%})
|
||||
|
||||
## See Also
|
||||
|
||||
* [Live Demo: Map](https://demos.telerik.com/blazor-ui/map/overview)
|
||||
* [Live Demo: Map](https://demos.telerik.com/blazor-ui/map/overview)
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ The following items concern older product versions:
|
|||
|
||||
* *(for versions 6.x)* Allow script evaluation (`'unsafe-eval'`), which is required by the [Spreadsheet]({%slug spreadsheet-overview%}) for cell validation and formula compilation. If you don't use the Spreadsheet component in your Blazor app, you can [build a CSP compliant `telerik-blazor.js` file without the Spreadsheet]({%slug common-kb-remove-components-from-telerik-blazor-js%}).
|
||||
* *(up to version 4.6.0)* Allow `data:` URIs for `font-src` to use [font icons]({%slug common-features-icons%}). Later versions use a separate file for the `WebComponentsIcons` icon font. This font file is referenced by the [font icon stylesheet]({%slug common-features-icons%}#font-icon-stylesheet).
|
||||
* *(up to version 4.4.0)* Allow `unsafe-eval` to use [Chart label templates]({%slug components/chart/label-template-format%}). These templates used to rely on `eval()`. Since version 4.5.0, the Chart labels support a different template mechanism, which doesn't require `unsafe-eval`.
|
||||
* *(up to version 4.4.0)* Allow `unsafe-eval` to use [Chart label templates]({%slug components/chart/label-template-format%}) and [Map templates]({%slug components/map/overview%}#content-security-policy). These templates used to rely on `eval()`. Starting with version 4.5.0, the Chart and Map templates support a different template mechanism, which doesn't require `unsafe-eval`.
|
||||
|
||||
## Examples
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче