We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Cannot display shapes on map control

Hi 

I'm trying to display drawne  shapes on the map by retreiving  markers coordinates but it's not work.

this is my geojson mark-up  : 

{

  "type": "FeatureCollection",

  "features": [


    {

      "type": "Feature",

      "properties": {

        "fill": "red"

      },

      "geometry": {

        "coordinates": [

          [

            [

              -6.840017402172089,

              32.24862092527322

            ],

            [

              -6.839083993434906,

              32.24933775366682

            ],

            [

              -6.8380325675010685,

              32.250136239392624

            ],

            [

              -6.836798751354218,

              32.24907461478724

            ],

            [

              -6.835618579387665,

              32.2479766822689

            ],

            [

              -6.83674510717392,

              32.24706929000412

            ],

            [

              -6.837646329402924,

              32.24643411002446

            ],

            [

              -6.838837230205536,

              32.24753206119197

            ],

            [

              -6.839620435237885,

              32.24819445506338

            ],

            [

              -6.840017402172089,

              32.24862092527322

            ]

          ]

        ],

        "type": "Polygon"

      }

    }


  ]

}


in the below file drawne markers on the map.

Please can you help?

Thanks.




Attachment: map_shape_coordinate_ca8efc91.zip

3 Replies 1 reply marked as answer

IR Indumathi Ravi Syncfusion Team January 10, 2023 01:32 PM UTC

Hi Kaouthar,

 

When we tried to reproduce the reported scenario using the provided JSON data code by setting it as the sublayer for the Maps component, we faced the following script error in the application.

 

  

Could you please confirm the above screenshot corresponds to your scenario? If not, please provide us a video or a sample application that demonstrates the exact scenario. It will be helpful for us to analyze and assist you further.



KA Kaouthar replied to Indumathi Ravi January 20, 2023 11:14 AM UTC

Sorry for my late answer,

but lately I get the same error. I found that this Exception is Thrown when setting UrlTemplate using variable. In the first time it works but if you just refresh the page it crashes. 

like this example :

 <SfMaps height="840">

                <MapsEvents OnClick="@OnClickEvent"></MapsEvents>

                <MapsMargin Bottom="0" Left="0" Right="0" Top="0"></MapsMargin>

                @* To zoom and pan *@

                <MapsZoomSettings Enable="true" ZoomFactor="2" MaxZoom="20" EnablePanning="true">

                    <MapsZoomToolbarSettings>


                        <MapsZoomToolbarButton BorderColor="white" BorderOpacity="1" BorderWidth="1" Color="#A8866B" Fill="white" HighlightColor="#CEBAA1" Opacity="0.8"

                                               Padding="5" Radius="30" SelectionColor="#CEBAA1" ToolbarItems="new List<ToolbarItem>() { ToolbarItem.Zoom,

                                       ToolbarItem.ZoomIn, ToolbarItem.ZoomOut, ToolbarItem.Pan, ToolbarItem.Reset }">

                        </MapsZoomToolbarButton>

                    </MapsZoomToolbarSettings>

                </MapsZoomSettings>


                <MapsLayers>

                    <MapsLayer UrlTemplate="@UrlTemplate" TValue="string">

                        <MapsMarkerSettings>

                            <MapsMarker Visible="true" DataSource="@Europe" TValue="City">

                                <MarkerTemplate>

                                    @{

                                        var Data = context as City;

                                        <img src="@Data.ImageUrl" class="" alt="..." height="16" style="width:16px">

                                    }

                                </MarkerTemplate>

                            </MapsMarker>

                        </MapsMarkerSettings>


                    </MapsLayer>

                    <MapsLayer Type="Syncfusion.Blazor.Maps.Type.SubLayer" ShapeData='new {dataOptions= "simplegeo.json"}' TValue="string">

                        <MapsShapeSettings ColorValuePath="fill"></MapsShapeSettings>

                    </MapsLayer>

                </MapsLayers>




            </SfMaps>


@code {


    public string UrlTemplate = "";

    int i = 0;


    protected override async Task OnInitializedAsync()

    {

        UrlTemplate = await SfMaps.GetBingUrlTemplate("https://dev.virtualearth.net/REST/V1/Imagery/Metadata/aerial?output=json&uriScheme=https&key=AntHPUgNwFsfKucMrE0YsnD_f2IMnQ21IIdl8f-7ehAmkUkWt_a9Fgr137OYusqH");

    }


    public async void OnClickEvent(Syncfusion.Blazor.Maps.MouseEventArgs args)

    {

        var latitude = args.Latitude;

        var longitude = args.Longitude;

        if (i == 0)

        {

            Europe.Add(new City { Latitude = latitude, Longitude = longitude, ImageUrl = "./Img/faible_visibilite.png" });

            i++;

        }

        else

        {

            Europe.Add(new City { Latitude = latitude, Longitude = longitude, ImageUrl = "./Img/humidite.png" });

        };

        coordanates.Add(new List<double> { longitude, latitude });

    }


}



But when setting it directly on mapLayer for example with openstreetmap it works :


But I coudn't do that with bing map.

What should I do ?



IR Indumathi Ravi Syncfusion Team January 23, 2023 11:26 PM UTC

Hi Kaouthar,


We are able to reproduce an issue with the provided code snippet. However, we can resolve it in the application itself. Before declaring the “MapsLayer” tag, you need to provide a null condition check for the "UrlTemplate" property. Please find the code snippet for the same below.


Code Snippet:

<SfMaps height="840">

    <MapsLayers>

        @if (UrlTemplate != null)

        {

            <MapsLayer UrlTemplate="@UrlTemplate" TValue="string">

            </MapsLayer>

        }

    </MapsLayers>

</SfMaps>


You can find the sample from the below link.


https://www.syncfusion.com/downloads/support/directtrac/general/ze/MapsShape-1111345993