Unplanned
Last Updated: 26 Jan 2022 14:51 by ADMIN
James
Created on: 20 Jan 2022 15:47
Category: UI for Blazor
Type: Feature Request
1
Custom Map Marker
Is it possible to use custom icons for the map marker?
1 comment
ADMIN
Hristian Stefanov
Posted on: 26 Jan 2022 14:51

Hi James,

Thank you for creating a public item for the desired feature. I'm changing the item status to "Unplanned" as it is a valid feature request.

In the meantime, you can use custom icons for the map marker by overriding the icon content with CSS. I have prepared an example:

<style>
    .k-i-marker-pin-target::before {
        content: '\e921';
    }
</style>

<TelerikMap Center="@Center" Zoom="3">
    <MapLayers>
        <MapLayer Type="@MapLayersType.Marker"
                  Data="@MarkerData1"
                  LocationField="@nameof(MarkerModel.LatLng)"
                  TitleField="@nameof(MarkerModel.Title)">
        </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)">
        </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 };

    public List<MarkerModel> MarkerData1 { get; set; } = new List<MarkerModel>()
    {
        new MarkerModel()
        {
            LatLng = new double[] { 30.268107, -97.744821 },
            Title = "Austin, TX"
        }
    };

    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; }
    }
}

Additionally, your browser dev tools will help you inspect the desired icon and get its content.

Regards,
Hristian Stefanov
Progress Telerik

Learn about the important changes coming in UI for Blazor 3.0 in January 2022!