Cannot print markers or labels on map

[tttrickyyy]

  We have a Blazor WASM hosted web application with a requirement to give the user the ability to get an Image, PDF of the current map. Unfortunately, when using your example here  ( https://blazor.syncfusion.com/documentation/maps/print-and-export/#export )  we cannot capture the markers or labels on the map. Just a blank map gets saved. Please help

[Swetha Babu]

Dear Customer, 

 

Thank you for contacting Syncfusion support. 

 

We are able to reproduce the reported issue. We have considered this as a defect and logged the defect report for the same. The fix for the reported issue will be included in our upcoming weekly patch release which is expected to be rolled out at the start of June, 2021. Please find the below feedback link to keep track of the reported issue. 

 

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

 

Please let us know if you need further assistance. 

 

Regards, 

Swetha Babu

[Swetha Babu]

Dear Customer, 

 

Thank you for your patience. 

 

We have included the fix for the reported issue – "Cannot print markers and labels w.r.t Maps" in our weekly NuGet release(v19.1.67). Please upgrade the package "Syncfusion.Blazor.Maps" to the latest version to resolve the reported issue. 

 

Please let us know if you need further assistance. 

 

Regards, 

Swetha Babu

[tttrickyyy]

Hello! I was not able to get the map markers to export. Please advise (Example Code below)

<button @onclick="@Export">Export</button>

<SfMaps @ref="Maps" AllowPdfExport="true">

    <MapsLegendSettings Visible="true" ShapeHeight="20" ShapeWidth="20" ShapePadding="10" Type="LegendType.Layers">

        <MapsToggleLegendSettings Enable="true" ApplyShapeSettings="true" />

        <MapsLegendTextStyle FontWeight="400" Size="16px" />

    </MapsLegendSettings><MapsLayers>

        <MapsLayer ShapeData="australia" ShapePropertyPath='new string[] { "iso_3166_2" }' DataSource="@MapData"

                   ShapeDataPath="Postalcode" TValue="MapModel">

           

            <MapsShapeSettings ColorValuePath="Percent" Fill="#E5E5E5">

                <MapsShapeColorMappings>

                    <MapsShapeColorMapping StartRange="0" EndRange="49" Color="@( new string[] {"#ff6666"})" />

                    <MapsShapeColorMapping StartRange="49" EndRange="69" Color="@( new string[] {"#fcff63"})" />

                    <MapsShapeColorMapping StartRange="70" EndRange="100" Color="@( new string[] {"#42c744"})" />

                </MapsShapeColorMappings>

            </MapsShapeSettings>

            <MapsMarkerSettings>

                <MapsMarker TValue="MapModel" Visible="true" Fill="Red"

                            Shape="MarkerType.Circle"

                            Height="30" Width="30" DataSource="@EasternStates" LegendText="Postalcode">

                    <MarkerTemplate>

                        @{

                            var data = context as MapModel;

                            <div class="MapLabelWide">@data.Postalcode <br />@data.Percent %</div>

                        }

                    </MarkerTemplate>

                </MapsMarker>

            </MapsMarkerSettings>

        </MapsLayer>

    </MapsLayers>

</SfMaps>

@code {

    private SfMaps Maps;

    private List<MapModel> MapData = new List<MapModel>();

    private List<MapModel> EasternStates = new List<MapModel>();

    private object australia;

    public async Task Export()

    {

        await this.Maps.Export(ExportType.PDF,"Maps",Syncfusion.PdfExport.PdfPageOrientation.Landscape,true);

    }

    protected override async Task OnInitializedAsync()

    {

        australia = await MapsHelper.ParseAsync("https://cdn.syncfusion.com/maps/map-data/usa.json");

        MapData = await GetData();

        EasternStates = await GetEasternData();

    }

    private Task<List<MapModel>> GetEasternData()

    {

        var mapList = new List<MapModel>();

        mapList.Add(new MapModel { Percent = 88.2,Postalcode = "DC",Longitude = -75.000000,Latitude = 29.500000 });

        mapList.Add(new MapModel { Percent = 44,Postalcode = "CT",Longitude = -73.000000,Latitude = 37.000000 });

        mapList.Add(new MapModel { Percent = 55,Postalcode = "DE",Longitude = -75.000000,Latitude = 31.000000 });

        mapList.Add(new MapModel { Percent = 88.2,Postalcode = "MD",Longitude = -75.000000,Latitude = 29.500000 });

        mapList.Add(new MapModel { Percent = 44,Postalcode = "RI",Longitude = -73.000000,Latitude = 73.000000 });

        mapList.Add(new MapModel { Percent = 55,Postalcode = "NH",Longitude = -69.500000,Latitude = 40.000000 });

        return Task.FromResult(mapList);

    }

    private Task<List<MapModel>> GetData()

    {

        var mapList = new List<MapModel>();

        mapList.Add(new MapModel { Percent = 88.2,Postalcode = "OK" });

        mapList.Add(new MapModel { Percent = 88.2,Postalcode = "ME" });

        mapList.Add(new MapModel { Percent = 44,Postalcode = "TX" });

        mapList.Add(new MapModel { Percent = 55,Postalcode = "AK" });

        mapList.Add(new MapModel { Percent = 88.2,Postalcode = "AZ" });

        mapList.Add(new MapModel { Percent = 44,Postalcode = "LA" });

        mapList.Add(new MapModel { Percent = 55,Postalcode = "OK" });

        return Task.FromResult(mapList);

    }

    public class MapModel

    {

        public double Longitude { get; set; }

        public double Latitude { get; set; }

        public string Name { get; set; }

        public string Postalcode { get; set; }

        public double Percent { get; set; }

        public int Count { get; set; }

    } 

}

<style>

    .MapLabelWide {

        width: 70px;

        vertical-align: central;

        cursor: default;

        font-family: Arial;

        font-size: 10px;

        font-weight: 600

    }

</style>

[Swetha Babu]

Dear Customer, 

 

Thank you for your update. 

 

We can export marker template in the Maps component by adding template elements as a foreign object in the SVG element of the Maps component. The template element is converted to the foreign object in the "PdfExport.js" file and return the base64String of the image to the C# side. The returned base64 string of the exported image is converted into PDF document in the C# side of the application. We have created the Blazor web assembly application to demonstrate the same and it can be downloaded from the below link. 

 

https://www.syncfusion.com/downloads/support/forum/165483/ze/MapsPdfExport891445909 

 

Please let us know if the above application meets your requirement. Also, please let us know if you need any further assistance. 

 

Regards, 

Swetha Babu.

[tttrickyyy]

Thank you! This works.

[Swetha Babu]

Dear Customer, 

 

Thank you for your update. 

 

We are happy to hear that the reported issue gets resolved. Please let us know if you need further assistance. 

 

Regards, 

Swetha Babu.