Legend is shown under the map

I tried to add an OSM attribution to my map, but the legend is always shown UNDER the top left of the map.

Image_5689_1782801524325

<SfMaps Height="60vh">
    <MapsLegendSettings Visible="true" Alignment="Alignment.Far" Position="LegendPosition.Bottom">
        Map data from <a rel='nofollow' href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>
    </MapsLegendSettings>
    <MapsEvents MouseMove="OnMouseMove"
                OnZoom="OnZoom"
                OnZoomComplete="OnZoomComplete">

    </MapsEvents>
    <MapsCenterPosition Latitude="@currentMap.Latitude" Longitude="@currentMap.Longitude">
    </MapsCenterPosition>
    <MapsZoomSettings Enable="true" MaxZoom="15" ZoomFactor="@currentMap.ZoomFactor">
        @*
        <MapsZoomToolbarSettings BackgroundColor="white">
            <MapsZoomToolbarButton ToolbarItems="toolbarItems"></MapsZoomToolbarButton>
        </MapsZoomToolbarSettings>
        *@
    </MapsZoomSettings>
    <MapsLayers>
        <MapsLayer UrlTemplate="https://tile.openstreetmap.org/level/tileX/tileY.png" TValue="string"></MapsLayer>
    </MapsLayers>

</SfMaps>

3 Replies

KP Karthick Panneerselvam Syncfusion Team June 30, 2026 12:56 PM UTC

Hi Rainer Prem,

Greetings from Syncfusion.

What you are experiencing is expected behavior. The MapsLegendSettings component is not intended for displaying arbitrary text such as attribution. Instead, it is designed specifically for rendering legend items related to shapes or markers. Because of this, when custom text is placed inside it, the component still treats it as a legend container, applying its built-in layout and positioning logic. This can result in the legend appearing in unexpected positions, such as underneath the map’s top-left corner.

Root Cause

  • MapsLegendSettings is designed to display shape or marker legend items, not general-purpose text.
  • Any content placed inside it is treated as part of the legend structure.
  • As a result, alignment and positioning properties do not behave like those of a simple overlay or footer element.

Legend Positioning

If you are using the legend for its intended purpose, you can control its placement using the Position property in MapsLegendSettings. The supported positions are:

  • Top
  • Left
  • Bottom
  • Right

These positions allow the legend to be docked within the map container accordingly.

For more details and examples, please refer to the documentation:
https://blazor.syncfusion.com/documentation/maps/legend#positioning-of-the-legend


If your goal is to display attribution (such as OpenStreetMap credits), we recommend using a custom HTML overlay instead of the legend component for better control over placement and styling.

Please let us know if you need further assistance.


Regards,

Karthick Panneerselvam.



RP Rainer Prem June 30, 2026 01:39 PM UTC

That's unfortunate. Especially since this was the answer I got from a number of different google searches.

My I formulate that as an improvement suggestion? 

Consider the problem closed from my side.



AA Alice Awour Jagongo Syncfusion Team July 1, 2026 06:30 AM UTC

Hi Rainer,

We're glad to hear that the issue has been resolved. We will now proceed to close this forum thread. If you have any further questions or need additional assistance, please feel free to reach out at any time. We're always happy to help.

Regard,

Alice.


Loader.
Up arrow icon