From f2d94bd36ea5b0e77149b16a2a074bff15576aef Mon Sep 17 00:00:00 2001 From: KB Bot Date: Mon, 9 Dec 2024 17:27:49 +0000 Subject: [PATCH 1/8] 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 0000000000..f888504c70 --- /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 + + + + + + + + +
ProductMap for Blazor
+ +## 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 + + + + + + + + + +@code { + public List MarkerData { get; set; } = new List() + { + 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%}) From 3cac4a764271af69622f8775a9fcdda1f3ab788e Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 10 Dec 2024 10:05:18 +0200 Subject: [PATCH 2/8] Update knowledge-base/map-custom-image.md --- knowledge-base/map-custom-image.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/map-custom-image.md b/knowledge-base/map-custom-image.md index f888504c70..59a87ab6c1 100644 --- a/knowledge-base/map-custom-image.md +++ b/knowledge-base/map-custom-image.md @@ -92,6 +92,6 @@ If you want to support panning and zooming the custom image in the Map, you will ## See Also -* [Map Overview]({%slug %}) +* [Map Overview]({%slug components/map/overview%}) * [Markers in Map for Blazor]({%slug components/map/layers/marker%}) * [Tile Layer in Map for Blazor]({%slug components/map/layers/tile%}) From aa8ad57aadf8944d6e24024544d6bf47b359d082 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Fri, 13 Dec 2024 10:21:24 +0200 Subject: [PATCH 3/8] Update knowledge-base/map-custom-image.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/map-custom-image.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/knowledge-base/map-custom-image.md b/knowledge-base/map-custom-image.md index 59a87ab6c1..9799a8f4d3 100644 --- a/knowledge-base/map-custom-image.md +++ b/knowledge-base/map-custom-image.md @@ -12,12 +12,12 @@ ticketid: 1652767 ## Environment - - - - - - + + + + + +
ProductMap for Blazor
ProductMap for Blazor
## Description From 5074b892c1b223fd68169057c8804d282fecade4 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Fri, 13 Dec 2024 10:21:31 +0200 Subject: [PATCH 4/8] Update knowledge-base/map-custom-image.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/map-custom-image.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/map-custom-image.md b/knowledge-base/map-custom-image.md index 9799a8f4d3..6255ac326d 100644 --- a/knowledge-base/map-custom-image.md +++ b/knowledge-base/map-custom-image.md @@ -88,7 +88,7 @@ This method is ideal when using the Map in a static context without the need for ### 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. +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. ## See Also From 1902d2b23a0532dfdd617fd87e4344ceb49743fa Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Fri, 13 Dec 2024 10:21:37 +0200 Subject: [PATCH 5/8] Update knowledge-base/map-custom-image.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/map-custom-image.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/map-custom-image.md b/knowledge-base/map-custom-image.md index 6255ac326d..c7bedbf67c 100644 --- a/knowledge-base/map-custom-image.md +++ b/knowledge-base/map-custom-image.md @@ -4,7 +4,7 @@ description: Learn how to integrate a custom image with the Blazor Map component 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 +tags: blazor, map, markers res_type: kb ticketid: 1652767 --- From cf8f8b0683981c016cd2299520c3e680ee0e335a Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Fri, 13 Dec 2024 10:22:54 +0200 Subject: [PATCH 6/8] Update knowledge-base/map-custom-image.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/map-custom-image.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/map-custom-image.md b/knowledge-base/map-custom-image.md index c7bedbf67c..3b645014ad 100644 --- a/knowledge-base/map-custom-image.md +++ b/knowledge-base/map-custom-image.md @@ -48,7 +48,7 @@ This method is ideal when using the Map in a static context without the need for position: relative; } - .custom-map .k-map-controls{ + .custom-map .k-map-controls { display:none; } From ab4efc0dc2edea830389347d0dc45a108835de63 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Fri, 13 Dec 2024 10:23:02 +0200 Subject: [PATCH 7/8] Update knowledge-base/map-custom-image.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/map-custom-image.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/map-custom-image.md b/knowledge-base/map-custom-image.md index 3b645014ad..c21d18ab5c 100644 --- a/knowledge-base/map-custom-image.md +++ b/knowledge-base/map-custom-image.md @@ -43,7 +43,7 @@ This method is ideal when using the Map in a static context without the need for ````CSHTML - +