From 19dcfdafa990a95fb4e4e4d7c5eeb9ae81c90bcc Mon Sep 17 00:00:00 2001
From: KB Bot <kb-bot@telerik.com>
Date: Mon, 9 Dec 2024 17:27:49 +0000
Subject: [PATCH] Added new kb article map-custom-image

---
 knowledge-base/map-custom-image.md | 97 ++++++++++++++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 knowledge-base/map-custom-image.md

diff --git a/knowledge-base/map-custom-image.md b/knowledge-base/map-custom-image.md
new file mode 100644
index 000000000..f888504c7
--- /dev/null
+++ b/knowledge-base/map-custom-image.md
@@ -0,0 +1,97 @@
+---
+title: Use a Custom Image as a Map in the Map Component
+description: Learn how to integrate a custom image with the Blazor Map component for displaying markers on static images, such as building layouts.
+type: how-to
+page_title: How to Use a Custom Image with Blazor Map for Marker Placement
+slug: map-kb-custom-image
+tags: map, blazor, custom, image, markers
+res_type: kb
+ticketid: 1652767
+---
+
+## Environment
+
+<table>
+<tbody>
+<tr>
+<td>Product</td>
+<td>Map for Blazor</td>
+</tr>
+</tbody>
+</table>
+
+## Description
+
+This knowledge base article answers the following questions:
+
+- How can I set a background image for the Blazor Map component?
+- Is it possible to overlay markers on a static image in Blazor Map?
+- Can I use a custom floor plan as a map in Blazor?
+
+## Solution
+
+The solution depends on whether you want to show a static Map or if you want to support panning and zooming functionalities. This knowledge base shows the first option:
+
+* [Static Map](#static-map)
+* [Pannable and Zoomable Map](#pannable-and-zoomable-map)
+
+### Static Map
+
+This method is ideal when using the Map in a static context without the need for dynamic panning and zooming. In this case, you may use CSS to target the wrapping element of the component and set your image as a background image.
+
+>caption Use custom image as a map
+
+````CSHTML
+<style>
+    .custom-map{
+        background-image: url(https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/telerik-ui-for-blazor/blazor-header-ninja.svg?sfvrsn=41f12bb3_3);
+        position: relative;
+    }
+
+    .custom-map .k-map-controls{
+        display:none;
+    }
+</style>
+
+<TelerikMap Class="custom-map" Zoomable="false" Pannable="false" Width="515px" Height="440px">
+    <MapLayers>
+        <MapLayer Type="@MapLayersType.Marker"
+                  Data="@MarkerData"
+                  LocationField="@nameof(MarkerModel.LatLng)"
+                  TitleField="@nameof(MarkerModel.Title)">
+        </MapLayer>
+    </MapLayers>
+</TelerikMap>
+
+@code {
+    public List<MarkerModel> MarkerData { get; set; } = new List<MarkerModel>()
+    {
+        new MarkerModel()
+        {
+            LatLng = new double[] {-15.014573802798589, -36.825833916664131 },
+            Title = "Marker 1"
+        },
+        new MarkerModel()
+        {
+            LatLng = new double[] {28.85837817460806, 25.92807233333588 },
+            Title = "Marker 2"
+        }
+    };
+
+    public class MarkerModel
+    {
+        public double[] LatLng { get; set; }
+        public string Title { get; set; }
+    }
+}
+````
+
+### Pannable and Zoomable Map
+
+If you want to support panning and zooming the custom image in the Map, you will need to mimic the default Map behavior targeting the [Tile layer]({%slug components/map/layers/tile%}). For that purpose, divide your image into small pieces - separate images that build up the whole picture and serve them to the Map as tiles following the Tile layer specifics.
+
+## See Also
+
+* [Map Overview]({%slug %})
+* [Markers in Map for Blazor]({%slug components/map/layers/marker%})
+* [Tile Layer in Map for Blazor]({%slug components/map/layers/tile%})