Maps / Online Map Providers / OpenStreetMap

Blazor Maps Example - OpenStreetMap Integration

Loading Syncfusion Blazor Server Demos…

This sample demonstrates OpenStreetMap integration in the Maps component and includes a marker identifying the United Nations Headquarters. The example shows how to render OpenStreetMap tiles and place a geographic marker so the map centers on and highlights the UN location.

OpenStreetMap tiles are configured by specifying the appropriate URL in the UrlTemplate property of the MapsLayer. The sample demonstrates the minimal configuration required to load OSM tiles and align the map viewport with the marker.

The marker illustrates adding a point of interest to the map. Use the same marker configuration pattern to position additional markers, adjust the map center or zoom level, and apply custom symbol or tooltip settings as needed to match your scenario.

For complete configuration details, tile URL examples, and provider-specific guidance, see the OpenStreetMap documentation: OpenStreetMap documentation.