diff --git a/_config.yml b/_config.yml index e8851b8f7b..a336373c0e 100644 --- a/_config.yml +++ b/_config.yml @@ -326,6 +326,9 @@ navigation: title: "LoaderContainer" "*map": title: "Map" + "*layers": + title: "Layers" + position: 10 "*maskedtextbox": title: "MaskedTextBox" "*mediaplayer": diff --git a/components/map/events.md b/components/map/events.md new file mode 100644 index 0000000000..ae3db603c7 --- /dev/null +++ b/components/map/events.md @@ -0,0 +1,324 @@ +--- +title: Events +page_title: Map - Events +description: Discover the Blazor Map events and explore the examples. +slug: components/map/events +tags: telerik,blazor,map,events,event +published: true +position: 11 +--- + +# Map Events + +This article explains the available events for the Telerik Map for Blazor: + +* [OnClick](#onclick) +* [OnMarkerClick](#onmarkerclick) +* [OnShapeClick](#onshapeclick) + +## OnClick + +The `OnClick` event fires when the user clicks on the map. Its `EventCallback` gives: +* `MapClickEventArgs.EventArgs` - provides the native DOM event (browser event). +* `MapClickEventArgs.Location` - provides the location of the click on the map (`MapLocation` has `Latitude` and `Longitude` props). + +>caption Handle OnClick. + +````CSHTML +@* This code snippet showcases an example of how to handle the OnClick event. *@ + + + + + + + + + + + + + + + + + + + + +@EventResult + +@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 }; + public string EventResult { get; set; } + + public List MarkerData1 { get; set; } = new List() + { + new MarkerModel() + { + LatLng = new double[] { 30.268107, -97.744821 }, + Title = "Austin, TX" + } + }; + + public List BubbleData { get; set; } = new List() + { + new BubbleModel() + { + LatLng = new double[] { 37.7749, -122.4194 }, + Revenue = 1000 + }, + new BubbleModel() + { + LatLng = new double[] { 41.8781, -87.6298 }, + Revenue = 200 + } + }; + + public void OnMapClick(MapClickEventArgs args) + { + var location = args.Location; + var eventArgs = args.EventArgs as MouseEventArgs; + + LogToConsole( + $"map click: location = [{location.Latitude}, {location.Longitude}]," + + $"clientX = {eventArgs.ClientX}, clientY = {eventArgs.ClientY}"); + } + + public void LogToConsole(string text) + { + EventResult = text; + } + + public class MarkerModel + { + public double[] LatLng { get; set; } + public string Title { get; set; } + } + + public class BubbleModel + { + public double[] LatLng { get; set; } + public int Revenue { get; set; } + } +} +```` + +## OnMarkerClick + +The `OnMarkerClick` event fires when the user clicks on a marker. Its `EventCallback` gives: +* `MapMarkerClickEventArgs.DataItem` - provides the data item (object) of the bound marker. +* `MapMarkerClickEventArgs.EventArgs` - provides the native DOM event (browser event). + +>caption Handle OnMarkerClick. + +````CSHTML +@* This code snippet showcases an example of how to handle the OnMarkerClick event. *@ + + + + + + + + + + + + + + + + + + + + +@EventResult + +@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 }; + public string EventResult { get; set; } + + public List MarkerData1 { get; set; } = new List() + { + new MarkerModel() + { + LatLng = new double[] { 30.268107, -97.744821 }, + Title = "Austin, TX" + } + }; + + public List BubbleData { get; set; } = new List() + { + new BubbleModel() + { + LatLng = new double[] { 37.7749, -122.4194 }, + Revenue = 1000 + }, + new BubbleModel() + { + LatLng = new double[] { 41.8781, -87.6298 }, + Revenue = 200 + } + }; + + public void OnMarkerClick(MapMarkerClickEventArgs args) + { + var dataItem = args.DataItem as MarkerModel; + var eventArgs = args.EventArgs as MouseEventArgs; + + LogToConsole( + $"marker click: title = {dataItem.Title}, location = [{string.Join(",", dataItem.LatLng)}]," + + $"clientX = {eventArgs.ClientX}, clientY = {eventArgs.ClientY}"); + } + + public void LogToConsole(string text) + { + EventResult = text; + } + + public class MarkerModel + { + public double[] LatLng { get; set; } + public string Title { get; set; } + } + + public class BubbleModel + { + public double[] LatLng { get; set; } + public int Revenue { get; set; } + } +} +```` + +## OnShapeClick + +The `OnShapeClick` event fires when the user clicks on a shape. Its `EventCallback` gives: +* `MapShapeClickEventArgs.DataItem` - provides the data item when the shape is coming from a bubble layer (null for shape layer). +* `MapShapeClickEventArgs.GeoJsonDataItem` - provides the data item in the form of GeoJSON (dictionary) when the layer is a shape layer (null for bubble layer). +* `MapShapeClickEventArgs.EventArgs` - provides the native DOM event (browser event). + +>caption Handle OnShapeClick. + +````CSHTML +@* This code snippet showcases an example of how to handle the OnShapeClick event. *@ + + + + + + + + + + + + + + + + + + + + +@EventResult + +@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 }; + public string EventResult { get; set; } + + public List MarkerData1 { get; set; } = new List() + { + new MarkerModel() + { + LatLng = new double[] { 30.268107, -97.744821 }, + Title = "Austin, TX" + } + }; + + public List BubbleData { get; set; } = new List() + { + new BubbleModel() + { + LatLng = new double[] { 37.7749, -122.4194 }, + Revenue = 1000 + }, + new BubbleModel() + { + LatLng = new double[] { 41.8781, -87.6298 }, + Revenue = 200 + } + }; + + public void OnShapeClick(MapShapeClickEventArgs args) + { + var dataItem = args.DataItem as BubbleModel; + var eventArgs = args.EventArgs as MouseEventArgs; + + LogToConsole( + $"shape click: revenue = {dataItem.Revenue}, location = [{string.Join(",", dataItem.LatLng)}]," + + $"clientX = {eventArgs.ClientX}, clientY = {eventArgs.ClientY}"); + } + + public void LogToConsole(string text) + { + EventResult = text; + } + + public class MarkerModel + { + public double[] LatLng { get; set; } + public string Title { get; set; } + } + + public class BubbleModel + { + public double[] LatLng { get; set; } + public int Revenue { get; set; } + } +} +```` \ No newline at end of file diff --git a/components/map/images/bubble-layer.png b/components/map/images/bubble-layer.png new file mode 100644 index 0000000000..f8047a022a Binary files /dev/null and b/components/map/images/bubble-layer.png differ diff --git a/components/map/images/map-basics.png b/components/map/images/map-basics.png new file mode 100644 index 0000000000..d436d4385b Binary files /dev/null and b/components/map/images/map-basics.png differ diff --git a/components/map/images/marker-layer.png b/components/map/images/marker-layer.png new file mode 100644 index 0000000000..7338ddbd75 Binary files /dev/null and b/components/map/images/marker-layer.png differ diff --git a/components/map/images/marker-shapes.png b/components/map/images/marker-shapes.png new file mode 100644 index 0000000000..241595f80a Binary files /dev/null and b/components/map/images/marker-shapes.png differ diff --git a/components/map/images/marker-tooltip-settings.png b/components/map/images/marker-tooltip-settings.png new file mode 100644 index 0000000000..390276d661 Binary files /dev/null and b/components/map/images/marker-tooltip-settings.png differ diff --git a/components/map/images/shape-layer.png b/components/map/images/shape-layer.png new file mode 100644 index 0000000000..1008aa4727 Binary files /dev/null and b/components/map/images/shape-layer.png differ diff --git a/components/map/images/tile-layer.png b/components/map/images/tile-layer.png new file mode 100644 index 0000000000..c6d01d07f0 Binary files /dev/null and b/components/map/images/tile-layer.png differ diff --git a/components/map/layers/bubble.md b/components/map/layers/bubble.md new file mode 100644 index 0000000000..f5f8a4a49a --- /dev/null +++ b/components/map/layers/bubble.md @@ -0,0 +1,118 @@ +--- +title: Bubble +page_title: Map Layers - Bubble +description: Discover the Blazor Map Bubble Layer and explore the examples. +slug: components/map/layers/bubble +tags: telerik,blazor,map,layers,bubble +published: True +position: 9 +--- + +# Bubble Layer + +The **Bubble** layer lets you create shapes of different type on a geographic position with a radius that is calculated via the value associated with the shape. + +The radiuses of the bubbles are automatically calculated by the map component, based on the maximum and minimum values available in the data source. + +The data source fields that represent the location and the value of the shapes can be defined via the **LocationField** and **ValueField** properties of the `MapLayer` tag. + +Optionally, the bubbles can also be styled by using the `MapLayerBubbleSettings` inner tag - `MapLayerBubbleSettingsStyle`. + +**To configure a Map Layer of type Bubble:** + +1. Add the `TelerikMap` tag. +2. Set the `Type` parameter of the `MapLayer` to `Bubble`. +3. Set the `Data` parameter. +4. Set the `LocationField` and `ValueField` parameters. + +The following example demonstrates how to configure the Map Bubble Layer. + +>caption The Map Bubble Layer configuration. + +````CSHTML +@* This code snippet showcases an example of a Bubble Layer configuration. *@ + + + + + + + + + + + + + + + + + + + + +@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 }; + + public 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 }, + Title = "San Francisco, CA" + } + }; + + public List BubbleData { get; set; } = new List() + { + new BubbleModel() + { + LatLng = new double[] { 37.7749, -122.4194 }, + Revenue = 1000 + }, + new BubbleModel() + { + LatLng = new double[] { 41.8781, -87.6298 }, + Revenue = 200 + } + }; + + public class MarkerModel + { + public double[] LatLng { get; set; } + public string Title { get; set; } + } + + public class BubbleModel + { + public double[] LatLng { get; set; } + public int Revenue { get; set; } + } +} +```` + +>caption The result from the above code snippet. + +![](../images/bubble-layer.png) \ No newline at end of file diff --git a/components/map/layers/marker.md b/components/map/layers/marker.md new file mode 100644 index 0000000000..a1d4b50afe --- /dev/null +++ b/components/map/layers/marker.md @@ -0,0 +1,232 @@ +--- +title: Marker +page_title: Map Layers - Marker +description: Discover the Blazor Map Marker Layer and explore the examples. +slug: components/map/layers/marker +tags: telerik,blazor,map,layers,marker +published: True +position: 5 +--- + +# Marker Layer + +The marker functionality allows you to add points in the map. These points are defined by geographical position in the map and can show useful information to the user in a tooltip. + +**To configure a Map Layer of type Marker:** + +1. Add the `TelerikMap` tag. +2. Set the `Type` parameter of the `MapLayer` to `Marker`. +3. Set the `Data` parameter. +4. Set the `LocationField` and `TitleField` parameters. +5. Optionally, provide [Tooltip Settings](#marker-tooltip-settings) and choose [Marker Shape](#marker-shapes). + +The following example demonstrates how to configure the Map Marker Layer. + +>caption The Map Marker Layer configuration. + +````CSHTML +@* This code snippet showcases an example of a Marker Layer configuration. *@ + + + + + + + + + + + + + + +@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 }; + + public 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 }, + Title = "San Francisco, CA" + } + }; + + public class MarkerModel + { + public double[] LatLng { get; set; } + public string Title { get; set; } + } +} +```` + +>caption The result from the above code snippet. + +![](../images/marker-layer.png) + +## Marker Shapes + +The Markers in Map are two types - **Pin** and **PinTarget**. They can be defined using the `Shape` parameter of the `MapLayer` tag. The default visual appearance of the Marker is the **PinTarget**. + +>caption Different Marker Shapes. + +![](../images/marker-shapes.png) + +>caption The example for the above result. + +````CSHTML +@* This code snippet showcases an example of the different Marker Shapes. *@ + + + + + + + + + + + + + + +@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 }; + + public 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 }, + Title = "San Francisco, CA" + } + }; + + public class MarkerModel + { + public double[] LatLng { get; set; } + public string Title { get; set; } + } +} +```` + +## Marker Tooltip Settings + +The `MapLayerMarkerSettingsTooltip` tag allows you to fine tune the tooltips content, appearance and options. You can fully customize the HTML content of the tooltip. + +>caption Marker Tooltip Template. + +![](../images/marker-tooltip-settings.png) + +>caption The example for the above result. + +````CSHTML +@* This code snippet showcases an example of the Marker Tooltip Settings. *@ + + + + + + + + + + + + + + + + + + + +@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 }; + + public 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 }, + Title = "San Francisco, CA" + } + }; + + public class MarkerModel + { + public double[] LatLng { get; set; } + public string Title { get; set; } + } +} +```` \ No newline at end of file diff --git a/components/map/layers/overview.md b/components/map/layers/overview.md new file mode 100644 index 0000000000..d09ad386d6 --- /dev/null +++ b/components/map/layers/overview.md @@ -0,0 +1,100 @@ +--- +title: Overview +page_title: Map Layers +description: Discover the Blazor Map Layers and explore the examples. +slug: components/map/layers +tags: telerik,blazor,map,layers +published: True +position: 0 +--- + +# Map Layers + +The information that the Map renders is organized into layers. These layers are stacked from bottom to top in the order of definition and are oblivious to each other. + +>tip We recommend you define only one instance of a layer type. The component does not allow multiple layers of the same type. + +## Supported Layer Types + +The layers in the Map are: + +* [Tile]({%slug components/map/layers/tile%}) +* [Marker]({%slug components/map/layers/marker%}) +* [Shape]({%slug components/map/layers/shape%}) +* [Bubble]({%slug components/map/layers/bubble%}) + +## MapLayers Parameters + +The following parameters enable you to customize the appearance of the Blazor Map Layers: + +| 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. | +| `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. | +| `MinZoom` | `double` | The minimum zoom level at which to show this layer. | +| `Opacity` | `double` | The opacity for the layer. | + +### 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. | + +### 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. | + +### MapLayersBubbleSettingsStyleStroke parameters + +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. | + +### MapLayersShapeSettingsStyleFill parameters + +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. | + +### MapLayersShapeSettingsStyleStroke parameters + +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 diff --git a/components/map/layers/shape.md b/components/map/layers/shape.md new file mode 100644 index 0000000000..aa8e98ef19 --- /dev/null +++ b/components/map/layers/shape.md @@ -0,0 +1,78 @@ +--- +title: Shape +page_title: Map Layers - Shape +description: Discover the Blazor Map Shape Layer and explore the examples. +slug: components/map/layers/shape +tags: telerik,blazor,map,layers,shape +published: True +position: 7 +--- + +# 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:** + +1. Add the `TelerikMap` tag. +2. Set the `Type` parameter of the `MapLayer` to `Shape`. +3. Set the `Data` parameter. +4. Add the `MapLayerShapeSettingsStyle` tag inside `MapLayerShapeSettings`. + +The following example demonstrates how to configure the Map Shape Layer. + +>caption The Map Shape Layer configuration. + +````Component.razor +@* This code snippet showcases an example of a Shape Layer configuration. *@ + +@using System.Net + + + + + + + + + + + + + + + + + +@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 MarkerData1 { get; set; } = new List() + { + 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; } + } +} +```` + +>caption The result from the above code snippet. + +![](../images/shape-layer.png) \ No newline at end of file diff --git a/components/map/layers/tile.md b/components/map/layers/tile.md new file mode 100644 index 0000000000..a9fcb074af --- /dev/null +++ b/components/map/layers/tile.md @@ -0,0 +1,53 @@ +--- +title: Tile +page_title: Map Layers - Tile +description: Discover the Blazor Map Tile Layer and explore the examples. +slug: components/map/layers/tile +tags: telerik,blazor,map,layers,tile +published: True +position: 3 +--- + +# Tile Layer + +The tile layer works by rendering images that display the actual map. These images are requested from third-party services that conform to the [Tile Map Service standard](https://en.wikipedia.org/wiki/Tile_Map_Service) and support the [WGS 84 projection standards](https://en.wikipedia.org/wiki/World_Geodetic_System). + +The built-in configuration options of the `MapLayer` allow you to set an URL template via the `UrlTemplate` property that will access the service and provide the needed images. + +>tip Licenses and Official Author rights to the Tile Layer Images are determined by the used Web Map Service. The **Telerik Map** only provides an UI control that allows you to setup and place a map in an application, built via Blazor techniques. You need to provide proper attribution with the correct copyright notice and, if needed, establish an account with the map owner to ensure unlimited/fast access. + +**To configure a Map Layer of type Tile:** + +1. Add the `TelerikMap` tag. +2. Set the `Type` parameter of the `MapLayer` to `Tile`. +3. Set the `Attribution` and `Subdomains` parameters. +4. Provide the `UrlTemplate` property. + +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. *@ + + + + + + + + +@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 }; +} +```` + +>caption The result from the above code snippet. + +![](../images/tile-layer.png) \ No newline at end of file diff --git a/components/map/overview.md b/components/map/overview.md new file mode 100644 index 0000000000..92c8140f6a --- /dev/null +++ b/components/map/overview.md @@ -0,0 +1,161 @@ +--- +title: Overview +page_title: Map Overview +description: Discover the Blazor Map and explore the examples. +slug: components/map/overview +tags: telerik,blazor,map,overview +published: True +position: 0 +--- + +# Map Overview + +The Map 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%}). + +## 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). + +>caption A basic configuration of the Telerik Map. + +````CSHTML +@* This code snippet showcases an example of a basic Map configuration. *@ + + + + + + + + +@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"; +} +```` + +## Layers + +Tha layers are responsible for organizing the Map information. [Read more about the supported Blazor Map layers...]({%slug components/map/layers%}) + +## Markers + +You can add different points with real coordinates on the map as markers. [Read more about the Blazor Map Markers...]({%slug components/map/layers/marker%}) + +## Pan and Zoom + +The zoom operation can be performed with a double click on the map or by using the mouse scroll wheel. You can set the zoom level through the `Zoom` property. + +The end user can pan the control by simply holding the left mouse button and dragging the map to a desired location. + +Raster maps are divided into images (tiles) for serving over the web. Tiles are typically 256px squares. The top level (zoom level 0) displays the whole world as a single tile. Each progressive zoom level doubles the size of the Map. + +Blazor Map also incorporates a navigation tool allowing the end to user to easily zoom, pan and change the current view. You can change the navigation tool position by using the `MapControlsNavigator.Position` enum. + +## Events + +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. + +* `Refresh` - redraws the component. + +>caption Get a reference to the Map and use its methods. + +````CSHTML +@* This code snippet showcases an example usage of the Refresh() method. *@ + +Change Size! +
+
+ + + + + + + + +@code { + TelerikMap MapRef { get; set; } + + public double Zoom { get; set; } = 4; + + public void ChangeZoom() + { + Zoom = 1; + MapRef.Refresh(); + } + + 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"; +} +```` + +## Parameters + +The Blazor Map provides various parameters that allow you to configure the component: + +| 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). | +| `MinSize` | `double` | The size of the map in pixels at zoom level 0. | +| `Pannable` | `bool` | Controls whether the user can pan the map. | +| `WrapAround` | `bool` | Specifies whether the map should wrap around the east-west edges. | +| `Zoom` | `double` | The initial zoom level. Typical web maps use zoom levels from 0 (the whole world) to 19 (sub-meter features). The map size is derived from the zoom level and minScale options: size = (2 ^ zoom) * minSize. | +| `Zoomable` | `bool` | Controls whether the map zoom level can be changed by the user. | +| `Class` | `string` | Specifies the class of the main DOM element. | +| `Width` | `string` | Specifies the width of the main DOM element. | +| `Height` | `string` | Specifies the height of the main DOM element. | + +### MapControls parameters + +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 + +[Configure the Tile Layer]({%slug components/map/layers/tile%}) + +[Using the 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