[4.1] docs(map): add article for custom map markers (#1357)

* docs(map): add article for custom map markers

* docs(map): fixes as per comments

* docs: add minor updates to marker layer

* docs: update links

---------

Co-authored-by: dmihaylo <[email protected]>

Author: xristianstefanov

components/map/layers/marker.md

@@ -1,31 +1,40 @@
 ---
 title: Marker
 page_title: Map Layers - Marker
-description: Discover the Blazor Map Marker Layer and explore the examples.
+description: Learn more about the Marker layer of the Telerik UI for Blazor Map component and explore the available examples.
 slug: components/map/layers/marker
-tags: telerik,blazor,map,layers,marker
+tags: telerikui, 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.
+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.
 
-**To configure a Map Layer of type Marker:**
+Sections in this article:
 
-1. Add the `TelerikMap` tag.
+* [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)
+
+## Creating the Marker Map Layer
+
+To configure a Map layer of the Marker type:
+
+1. Add the `TelerikMap` tag to the Map.
 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).
+5. (Optional) Provide the [tooltip settings](#marker-tooltip-settings) and choose the [Marker shape](#marker-shapes).
 
-The following example demonstrates how to configure the Map Marker Layer.
+The following example demonstrates how to configure the Marker layer of the Map.
 
->caption The Map Marker Layer configuration.
+>caption The Marker Map layer configuration.
 
 ````CSHTML
-@* This code snippet showcases an example of a Marker Layer configuration. *@
+@* This code snippet showcases an example of a Marker layer configuration. *@
 
 <TelerikMap Center="@Center" Zoom="3">
     <MapLayers>
@@ -81,22 +90,98 @@ The following example demonstrates how to configure the Map Marker Layer.
 }
 ````
 
->caption The result from the above code snippet.
+## 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"
+            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">
+        </MapLayer>
+
+        <MapLayer Type="@MapLayersType.Marker"
+                  Data="@MarkerData2"
+                  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; } = "&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
+    public double[] Center { get; set; } = new double[] { 30.268107, -97.744821 };
 
-![](../images/marker-layer.png)
+    public List<MarkerModel> MarkerData1 { get; set; } = new List<MarkerModel>()
+    {
+        new MarkerModel()
+        {
+            LatLng = new double[] { 30.268107, -97.744821 },
+            Title = "Austin, TX"
+        },
+    };
 
-## Marker Shapes
+    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; }
+    }
+}
 
-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**.
+<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>
+````
 
->caption Different Marker Shapes.
+## Defining the Marker Shapes
 
-![Blazor Map Marker Shapes](../images/marker-shapes.png)
+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 The example for the above result.
+>caption Different Marker shapes.
 
 ````CSHTML
-@* This code snippet showcases an example of the different Marker Shapes. *@
+@* This code snippet showcases an example of the different Marker shapes. *@
 
 <TelerikMap Center="@Center" Zoom="3">
     <MapLayers>
@@ -152,18 +237,14 @@ The Markers in Map are two types - **Pin** and **PinTarget**. They can be define
 }
 ````
 
-## 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.
+## Setting the Marker Tooltip
 
->caption Marker Tooltip Template.
+The `MapLayerMarkerSettingsTooltip` tag allows you to fine-tune the content, appearance, and options of the tooltip, as well as fully customize its HTML content.
 
-![Blazor Map Marker ToolTip](../images/marker-tooltip-settings.png)
-
->caption The example for the above result.
+>caption Marker tooltip template.
 
 ````CSHTML
-@* This code snippet showcases an example of the Marker Tooltip Settings. *@
+@* This code snippet showcases an example of the Marker tooltip settings. *@
 
 <TelerikMap Center="@Center"
             Zoom="3">
@@ -229,4 +310,4 @@ The `MapLayerMarkerSettingsTooltip` tag allows you to fine tune the tooltips con
         public string Title { get; set; }
     }
 }
-````
+````