SfMaps - greyscaled design

[Volker]

Hi there,

how can we render a greyscale map?
Have a look: https://maps.omniscale.com/de/examples/leaflet_grayscale

Google Maps or OpenStreetMap...

<SfMaps ModelType="@typeof(IDataTemplate)" Height="430px">
    <MapsCenterPosition Latitude=47.0613942
                        Longitude=15.437373></MapsCenterPosition>
    <MapsZoomSettings Enable="true"
                      ZoomFactor=12></MapsZoomSettings>
    <MapsLayers>
        <MapsLayer LayerType="ShapeLayerType.OSM"
                   AnimationDuration=0>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

Cheers,
Volker

[Swetha Babu]

Hi Volker, 

  

Thank you for contacting Syncfusion support. 

  

We can render the grayscale OSM map using the UrlTemplate property. We need to set the LayerType property as OSM and set the URL link of the OSM map in the UrlTemplate property. The URL links provided by OSM map is available from the below documentation link. The link with gray-scale map is available from the below documentation link. 

  

https://wiki.openstreetmap.org/wiki/Tile_servers 

  

We have created a simple Blazor application with the grayscale OSM map and the same can be downloaded from the below link. 

  

https://www.syncfusion.com/downloads/support/forum/161481/ze/GrayscaledOSM926537758 

  

Code Snippet: 

@using Syncfusion.Blazor.Maps 

  

<SfMaps> 

    <MapsCenterPosition Latitude=47.0613942 

                        Longitude=15.437373></MapsCenterPosition> 

    <MapsZoomSettings Enable="true" 

                      ZoomFactor=12></MapsZoomSettings> 

    <MapsLayers> 

        <MapsLayer LayerType="ShapeLayerType.OSM" TValue="string" UrlTemplate="https://tiles.wmflabs.org/bw-mapnik/level/tileX/tileY.png">            

        </MapsLayer> 

    </MapsLayers> 

</SfMaps> 

  

In the above sample, we have used the below tile link as UrlTemplate from the above documentation. 

  

https://tiles.wmflabs.org/bw-mapnik/${z}/${x}/${y}.png 

  

In the above tile link, we need to replace ${z}, ${x}, ${y} as level, tileX, tileY respectively when we set it in the UrlTemplate property. 

  

Please let us know if you need any further assistance. 

  

Regards, 

Swetha Babu 

[Volker]

Hi Swetha,

works like a charm. Thank you so much, you at Synfusion's are best!

Greetings from Graz/Austria.

Cheers,
Volker

[Sabari Anand Senthamarai Kannan]

Hi Volker, 

 

Thank you for the update. 

 

We are happy to hear that the provided solution meets your requirement. Please let us know if you need any further assistance. 

 

Regards, 

Sabari Anand