|
| 1 | +--- |
| 2 | +title: Use a Custom Image as a Map in the Map Component |
| 3 | +description: Learn how to integrate a custom image with the Blazor Map component for displaying markers on static images, such as building layouts. |
| 4 | +type: how-to |
| 5 | +page_title: How to Use a Custom Image with Blazor Map for Marker Placement |
| 6 | +slug: map-kb-custom-image |
| 7 | +tags: blazor, map, markers |
| 8 | +res_type: kb |
| 9 | +ticketid: 1652767 |
| 10 | +--- |
| 11 | + |
| 12 | +## Environment |
| 13 | + |
| 14 | +<table> |
| 15 | + <tbody> |
| 16 | + <tr> |
| 17 | + <td>Product</td> |
| 18 | + <td>Map for Blazor</td> |
| 19 | + </tr> |
| 20 | + </tbody> |
| 21 | +</table> |
| 22 | + |
| 23 | +## Description |
| 24 | + |
| 25 | +This knowledge base article answers the following questions: |
| 26 | + |
| 27 | +- How can I set a background image for the Blazor Map component? |
| 28 | +- Is it possible to overlay markers on a static image in Blazor Map? |
| 29 | +- Can I use a custom floor plan as a map in Blazor? |
| 30 | + |
| 31 | +## Solution |
| 32 | + |
| 33 | +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: |
| 34 | + |
| 35 | +* [Static Map](#static-map) |
| 36 | +* [Pannable and Zoomable Map](#pannable-and-zoomable-map) |
| 37 | + |
| 38 | +### Static Map |
| 39 | + |
| 40 | +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. |
| 41 | + |
| 42 | +>caption Use custom image as a map |
| 43 | +
|
| 44 | +````CSHTML |
| 45 | +<style> |
| 46 | + .custom-map-image { |
| 47 | + background-image: url(https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/telerik-ui-for-blazor/blazor-header-ninja.svg?sfvrsn=41f12bb3_3); |
| 48 | + position: relative; |
| 49 | + } |
| 50 | +
|
| 51 | + .custom-map-image .k-map-controls { |
| 52 | + display: none; |
| 53 | + } |
| 54 | +</style> |
| 55 | +
|
| 56 | +<TelerikMap Class="custom-map-image" Zoomable="false" Pannable="false" Width="515px" Height="440px"> |
| 57 | + <MapLayers> |
| 58 | + <MapLayer Type="@MapLayersType.Marker" |
| 59 | + Data="@MarkerData" |
| 60 | + LocationField="@nameof(MarkerModel.LatLng)" |
| 61 | + TitleField="@nameof(MarkerModel.Title)"> |
| 62 | + </MapLayer> |
| 63 | + </MapLayers> |
| 64 | +</TelerikMap> |
| 65 | +
|
| 66 | +@code { |
| 67 | + public List<MarkerModel> MarkerData { get; set; } = new List<MarkerModel>() |
| 68 | + { |
| 69 | + new MarkerModel() |
| 70 | + { |
| 71 | + LatLng = new double[] {-15.014573802798589, -36.825833916664131 }, |
| 72 | + Title = "Marker 1" |
| 73 | + }, |
| 74 | + new MarkerModel() |
| 75 | + { |
| 76 | + LatLng = new double[] {28.85837817460806, 25.92807233333588 }, |
| 77 | + Title = "Marker 2" |
| 78 | + } |
| 79 | + }; |
| 80 | +
|
| 81 | + public class MarkerModel |
| 82 | + { |
| 83 | + public double[] LatLng { get; set; } |
| 84 | + public string Title { get; set; } |
| 85 | + } |
| 86 | +} |
| 87 | +```` |
| 88 | + |
| 89 | +### Pannable and Zoomable Map |
| 90 | + |
| 91 | +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 separate pieces that build up the whole map image and serve them to the Map component as tiles compliant to the WGS 84 coordinate system. |
| 92 | + |
| 93 | +## See Also |
| 94 | + |
| 95 | +* [Map Overview]({%slug components/map/overview%}) |
| 96 | +* [Markers in Map for Blazor]({%slug components/map/layers/marker%}) |
| 97 | +* [Tile Layer in Map for Blazor]({%slug components/map/layers/tile%}) |
0 commit comments