Highlith with OpenStreetMap Only

[Pawel Szpytma]

Hello,

Is there any way to highlight country using only OpenStreetMap? I do not like using layers from Syncfusion as while you are moving on the map its not behaving well (on drag and drop Syncfusion layer is moving and is not aligning with the OpenStreetMap

<SfMaps Background="transparent">
    <MapsAreaSettings Background="transparent" />
    <MapsZoomSettings Enable="true" MaxZoom="3">
        <MapsZoomToolbarSettings >
            <MapsZoomToolbarTooltipSettings FontFamily="Segoe UI"></MapsZoomToolbarTooltipSettings>
        </MapsZoomToolbarSettings>
    </MapsZoomSettings>
    <MapsLayers>
        <MapsLayer UrlTemplate="https://a.tile.openstreetmap.org/level/tileX/tileY.png" TValue="string"  />
        <MapsLayer
            Type="Syncfusion.Blazor.Maps.Type.SubLayer"
            ShapeData='new {dataOptions = "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
            ShapePropertyPath='new string[] {"name"}'
            DataSource="Countries"
            ShapeDataPath="Name" TValue="Country">
            <MapsShapeSettings BorderColorValuePath="red"   Fill="None" Opacity="0.1" ColorValuePath="Highlight">
                <MapsShapeColorMappings>
                    <MapsShapeColorMapping Value="Highlighted" MaxOpacity="0.1" MinOpacity="0.1"  Color='new string[] {"#EDB46F"}'></MapsShapeColorMapping>
                    <MapsShapeColorMapping Value="Non-Highlighted" Color='new string[] {"#F1931B"}'></MapsShapeColorMapping>
                    <MapsShapeColorMapping Value=""></MapsShapeColorMapping>
                </MapsShapeColorMappings>
            </MapsShapeSettings>
            <MapsNavigationLines>
                @foreach (var line in NavigationLines)
                {
                    if (line.StartLat != line.EndLat || line.StartLon != line.EndLon)
                    {
                        <MapsNavigationLine Visible="true" Color="#0D6EFD" Width="3" DashArray="3"
                                            Latitude="new double[]{ line.StartLat, line.EndLat }"
                                            Longitude="new double[]{ line.StartLon, line.EndLon }">
                            <MapsArrow ShowArrow Color="#0D6EFD" Size="5" Position="End" />
                         </MapsNavigationLine>
                    }
                }
            </MapsNavigationLines>
        </MapsLayer>
    </MapsLayers>
 </SfMaps>

[Indumathi Ravi]

Hi Pawel,

The OpenStreeMap (OSM) is an independent online map provider that is rendered in the Syncfusion Maps component by retrieving tile images from their server. We cannot select or highlight a country or region because the map is received as images. Again, the OSM map is not connected to the Syncfusion components; we simply obtain their tile images and render them in our Maps components.

To support highlighting over the OSM map, we need to render sublayer for the desired country and enable highlight option in that layer. But there is an issue where the sublayer's synchronization with the OpenStreetMap is not as smooth as expected. This issue will be resolved in the upcoming weekly patch release, which is expected to be available by the next week.

Meanwhile, please find the feedback link below to keep track of the reported issue.

https://www.syncfusion.com/feedback/48223

Please let us know if you need any further assistance.

[Hemanathan Pandian]

Hi Pawel,

We have resolved the reported issue “When panning the Maps sublayer shapes on the tile maps, the synchronization of the layer is not proper” and the fix is included in our Essential Studio 2023 Volume 3 SP release v23.2.4 which is rolled out and is available for download under the following link.

Essential Studio 2023 Volume 3 Service Pack Release v23.2.4 is available for download | Announcements Forums | Syncfusion

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

[Pawel Szpytma]

Thank you very much Hemanathan for this! Really appreciate it!