diff --git a/_contentTemplates/map/general.md b/_contentTemplates/map/general.md new file mode 100644 index 0000000000..6fdc791ffe --- /dev/null +++ b/_contentTemplates/map/general.md @@ -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 diff --git a/components/map/events.md b/components/map/events.md index 1ce97f7ee1..73650c0bdb 100644 --- a/components/map/events.md +++ b/components/map/events.md @@ -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) diff --git a/components/map/images/bubble-layer.png b/components/map/images/bubble-layer.png deleted file mode 100644 index f8047a022a..0000000000 Binary files a/components/map/images/bubble-layer.png and /dev/null differ diff --git a/components/map/images/map-basics.png b/components/map/images/map-basics.png deleted file mode 100644 index d436d4385b..0000000000 Binary files a/components/map/images/map-basics.png and /dev/null differ diff --git a/components/map/images/marker-layer.png b/components/map/images/marker-layer.png deleted file mode 100644 index 7338ddbd75..0000000000 Binary files a/components/map/images/marker-layer.png and /dev/null differ diff --git a/components/map/images/marker-shapes.png b/components/map/images/marker-shapes.png deleted file mode 100644 index 241595f80a..0000000000 Binary files a/components/map/images/marker-shapes.png and /dev/null differ diff --git a/components/map/images/marker-tooltip-settings.png b/components/map/images/marker-tooltip-settings.png deleted file mode 100644 index 390276d661..0000000000 Binary files a/components/map/images/marker-tooltip-settings.png and /dev/null differ diff --git a/components/map/images/shape-layer.png b/components/map/images/shape-layer.png deleted file mode 100644 index 1008aa4727..0000000000 Binary files a/components/map/images/shape-layer.png and /dev/null differ diff --git a/components/map/images/tile-layer.png b/components/map/images/tile-layer.png deleted file mode 100644 index c6d01d07f0..0000000000 Binary files a/components/map/images/tile-layer.png and /dev/null differ diff --git a/components/map/layers/bubble.md b/components/map/layers/bubble.md index a9679c64e8..dfff2e5841 100644 --- a/components/map/layers/bubble.md +++ b/components/map/layers/bubble.md @@ -112,7 +112,3 @@ The following example demonstrates how to configure the Map Bubble Layer. } } ```` - ->caption The result from the above code snippet. - -![Blazor Map Bubble Layer](../images/bubble-layer.png) \ No newline at end of file diff --git a/components/map/layers/marker.md b/components/map/layers/marker.md index a522323882..9987d94d18 100644 --- a/components/map/layers/marker.md +++ b/components/map/layers/marker.md @@ -10,71 +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 `` tag to ``. +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. *@ - - + - - - + Attribution="@LayerAttribution" + Subdomains="@LayerSubdomains" + UrlTemplate="@LayerUrlTemplate"> + @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; } = "© OpenStreetMap contributors"; - public double[] Center { get; set; } = new double[] { 30.268107, -97.744821 }; + private double[] MapCenter { get; set; } = new double[] { 30.268107, -97.744821 }; - public List MarkerData1 { get; set; } = new List() - { + 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 = "© OpenStreetMap contributors"; + + private List MarkerData { get; set; } = new List() { new MarkerModel() { LatLng = new double[] { 30.268107, -97.744821 }, Title = "Austin, TX" - } - }; - - public List MarkerData2 { get; set; } = new List() - { + }, new MarkerModel() { LatLng = new double[] { 37.7749, -122.4194 }, @@ -84,144 +74,172 @@ The following example demonstrates how to configure the Marker layer of the Map. 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; } } ```` -## Customizing the Marker Appearance +## Customizing Marker Appearance -To customize the marker appearance, set the string `Template` parameter in the corresponding `MapLayerMarkerSettings` inner tag of the marker. +To customize the marker appearance, set the `Template` parameter in the `` child tag of the corresponding `MapLayer`. -The general syntax of the Marker template is based on the [Kendo UI templates](https://docs.telerik.com/kendo-ui/framework/templates/overview). +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. ->caption Custom markers. +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. -````CSHTML -@* This code snippet showcases an example of customizing the Marker appearance. *@ +>caption Using Map marker template - + + + - - - - - + - - + + +@* Move the JavaScript code to a separate JS file. *@ + + + + @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; } = "© OpenStreetMap contributors"; - public double[] Center { get; set; } = new double[] { 30.268107, -97.744821 }; + private double[] MapCenter { get; set; } = new double[] { 30.268107, -97.744821 }; - public List MarkerData1 { get; set; } = new List() - { + private readonly string[] LayerSubdomains = new string[] { "a", "b", "c" }; + private const string LayerAttribution = "© OpenStreetMap contributors"; + + private List MarkerData1 { get; set; } = new List() { new MarkerModel() { LatLng = new double[] { 30.268107, -97.744821 }, - Title = "Austin, TX" - }, + Title = "Austin", + State = "TX" + } }; - public List MarkerData2 { get; set; } = new List() - { + private List MarkerData2 { get; set; } = new List() { new MarkerModel() { LatLng = new double[] { 37.7749, -122.4194 }, - Title = "San Francisco, CA" + 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; } + 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"; } } - - ```` -## Defining the Marker Shapes +@[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. *@ - - + + + Use Pin Target Markers + + + Use Pin Markers + + + + - - - + Attribution="@LayerAttribution" + Subdomains="@LayerSubdomains" + UrlTemplate="@LayerUrlTemplate"> + TitleField="@nameof(MarkerModel.Title)" + Shape="@MarkerShape"> @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; } = "© OpenStreetMap contributors"; - public double[] Center { get; set; } = new double[] { 30.268107, -97.744821 }; + private double[] MapCenter { get; set; } = new double[] { 30.268107, -97.744821 }; - public List MarkerData1 { get; set; } = new List() - { + 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 = "© OpenStreetMap contributors"; + + public List MarkerData { get; set; } = new List() { new MarkerModel() { LatLng = new double[] { 30.268107, -97.744821 }, Title = "Austin, TX" - } - }; - - public List MarkerData2 { get; set; } = new List() - { + }, 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. *@ - - - - - - - - - - + Attribution="@LayerAttribution" + Subdomains="@LayerSubdomains" + UrlTemplate="@LayerUrlTemplate"> - + + + + + + @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; } = "© OpenStreetMap contributors"; - public double[] Center { get; set; } = new double[] { 30.268107, -97.744821 }; + private double[] MapCenter { get; set; } = new double[] { 30.268107, -97.744821 }; - public List MarkerData1 { get; set; } = new List() - { + 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; } = "© OpenStreetMap contributors"; + + private List MarkerData1 { get; set; } = new List() { new MarkerModel() { LatLng = new double[] { 30.268107, -97.744821 }, Title = "Austin, TX" - } - }; - - public List MarkerData2 { get; set; } = new List() - { + }, 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; } } ```` diff --git a/components/map/layers/overview.md b/components/map/layers/overview.md index ab9062ef7e..05fc4c25b7 100644 --- a/components/map/layers/overview.md +++ b/components/map/layers/overview.md @@ -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:
  • `x`—the X coordinate of the tile;
  • `y`—the Y coordinate of the tile
  • `zoom`—the zoom level
  • `subdomain`—the subdomain for this tile. Also see `Subdomains`.
    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. | \ No newline at end of file +| `Opacity` | `double` | The default stroke opacity (0 to 1) for layer shapes. | +| `Width` | `double` | The default stroke width for layer shapes. | diff --git a/components/map/layers/shape.md b/components/map/layers/shape.md index 0b346a8f0f..32969086d6 100644 --- a/components/map/layers/shape.md +++ b/components/map/layers/shape.md @@ -76,7 +76,3 @@ The following example demonstrates how to configure the Map Shape Layer. } } ```` - ->caption The result from the above code snippet. - -![Blazor Map Shape Layer](../images/shape-layer.png) diff --git a/components/map/layers/tile.md b/components/map/layers/tile.md index 9b099b9557..115c641299 100644 --- a/components/map/layers/tile.md +++ b/components/map/layers/tile.md @@ -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. *@ - - + + Attribution="@LayerAttribution" + Subdomains="@LayerSubdomains" + UrlTemplate="@LayerUrlTemplate"> @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; } = "© OpenStreetMap contributors"; - 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 = "© OpenStreetMap contributors"; + } ```` ->caption The result from the above code snippet. - -![Blazor Tile Layer](../images/tile-layer.png) \ No newline at end of file +@[template](/_contentTemplates/map/general.md#urltemplate-csp) diff --git a/components/map/overview.md b/components/map/overview.md index be911bd8a8..856d55208a 100644 --- a/components/map/overview.md +++ b/components/map/overview.md @@ -10,41 +10,32 @@ position: 0 # Blazor Map Overview -The Blazor Map component 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 Blazor Map component 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. - -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). +1. Use the `TelerikMap` tag to add the component to a Razor file. +1. Add a `` tag nested inside ``. 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. ->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. *@ - + Attribution="@LayerAttribution" + Subdomains="@LayerSubdomains" + UrlTemplate="@LayerUrlTemplate"> @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; } = "© OpenStreetMap contributors"; + 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 = "© OpenStreetMap contributors"; } ```` @@ -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 - -The Map methods are accessible through its reference. +## Content Security Policy -* `Refresh` - redraws the component. +The Map renders with the help of a JavaScript-based rendering engine. This engine uses a templating mechanism that supports two kinds of syntax: ->caption Get a reference to the Map and use its methods. +* [Legacy inline syntax](#creating-blazor-map). In this case, the template parameter is a string that consumes dynamic values through `#= ... #` expressions, 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. -````CSHTML -@* This code snippet showcases an example usage of the Refresh() method. *@ +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. -Change Size! -
    -
    +>caption CSP-compliant Map - +````CSHTML + + Attribution="@LayerAttribution" + Subdomains="@LayerSubdomains" + UrlTemplate="urlTemplateFunction"> -@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. *@ + - 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; } = "© OpenStreetMap contributors"; +@code { + private readonly string[] LayerSubdomains = new string[] { "a", "b", "c" }; + private const string LayerAttribution = "© OpenStreetMap contributors"; } ```` -## 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. | -## Next Steps +## 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 -[Configure the Tile Layer]({%slug components/map/layers/tile%}) +````CSHTML +Change Map Zoom + + + + + + + + +@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 = "© OpenStreetMap contributors"; + + private void ChangeMapZoom() + { + MapZoom = 1; + + MapRef?.Refresh(); + } +} +```` + +## Next Steps -[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) \ No newline at end of file +* [Live Demo: Map](https://demos.telerik.com/blazor-ui/map/overview) diff --git a/troubleshooting/csp.md b/troubleshooting/csp.md index 12d189fb8b..5f2e1bc162 100644 --- a/troubleshooting/csp.md +++ b/troubleshooting/csp.md @@ -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