can we display GPX file of google on Synfusion Map Control ?

[chandradev]

Hi Team,

can we display GPX file of google on Synfusion Map Control? if yes then could you please share some code snippet?

[Indumathi Ravi]

Hi Chandra,

 

Maps component do not support to render GPX files. The component renders the online map providers such as OSM, Bing Maps, TomTom, and others using their tile server URL.

 

To know more about the online map provider rendering in the Maps component, please follow the below documentation link.

 

https://blazor.syncfusion.com/documentation/maps/providers/other-maps

 

Please let us know if you need any further assistance.

 

Regards,

Indumathi R.

[Sergio]

What would be the best way to render the track in the GPX file? I see there is `MapsNavigationLine` object. So I could extract all coordinates pairs from the GPX and render that as multiple navigation lines... Is this the right approach?

[Indumathi Ravi]

Hi Sergio,

As previously stated, we do not support rendering the GPX file in the Maps component. However, as workaround, our approach is to convert the GPX file into a JSON file with GeoJSON format using any online tool and then set the JSON data to the "ShapeData" property in "MapsLayer".

For illustration purpose, we took Africa shape in GPX extension and converted the ".gpx" file format to ".json" file format using an online converter (for example: https://products.aspose.app/gis/conversion/gpx-to-json) and then referred the converted ".json" file in our Syncfusion Maps component. Please find the sample below for your reference.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/MapsShapeBlaz-2013245979

For more information on adding JSON data to a Maps layer, see the documentation at the link below.

https://blazor.syncfusion.com/documentation/maps/getting-started#adding-geojson-data-in-maps-layer

Please let us know if you need any further assistance.

[Sergio]

Thanks Indumathi,

Is there a way to pass the shape data via code (not by passing a json file) .

Instead of ShapeData='new {dataOptions= "africa.json"}' I can create somehow the shapedata from the code and populate those from my model?

Do you have maybe an example? And with the ShapeData is there a way to get a callback when the user is hovering on the line and maybe show the marker where the user has the mouse?

[Indumathi Ravi]

Hi Sergio,

Please find the details for your queries from the below table.

Queries	Details
Is there a way to pass the shape data via code (not by passing a json file).   Instead of ShapeData='new {dataOptions= "africa.json"}' I can create somehow the shapedata from the code and populate those from my model? Do you have maybe an example?	Based on our understanding, we have framed the following solutions. Please check to see if it meets your requirements.   Solution 1: For illustration purpose, we have rendered a hexagon shape by constructing GeoJSON as an object from the list (collection data type) in the application's razor page. Then, using the "ShapeData" property of the "MapsLayer", we can bind the object to the Maps component. Please see the code snippet below for more information.   Code Snippet: @if (MapShapeData != null) {     <SfMaps>       //..         <MapsLayers>             //..             <MapsLayer  ShapeData='MapShapeData' TValue="string">             </MapsLayer>         </MapsLayers>     </SfMaps> } @code {     //..     public object MapShapeData { get; set; }     protected override async Task OnInitializedAsync()     {       //..         GeoJsonStructure jsonformat = new GeoJsonStructure();         FeaturesItem featureItem = new FeaturesItem();         Geometry geometryValues = new Geometry();         List<List<List<double>>> coordinatePoints = new List<List<List<double>>>         {             new List<List<double>>             {             new List<double> { -7.246093750000426, 27.839076094778804 },             new List<double> { 9.980468749999574, 6.8391696263438035 },             new List<double> { 40.039062499999005, 7.885147283425297 },             new List<double> { 54.80468749999932, 27.371767300524397 },             new List<double> { 36.17187499999889, 40.44694705960126 },             new List<double> { 8.925781249999602, 40.04443758460968 },             new List<double> { -7.246093750000426, 27.839076094778804 }               }         };         geometryValues.coordinates = coordinatePoints;         featureItem.geometry = geometryValues;         List<FeaturesItem> featureItems = new List<FeaturesItem>();         featureItems.Add(featureItem);         jsonformat.features = featureItems;         MapShapeData = jsonformat;     } }   We have created a sample and screenshot to demonstrate the same and it can be downloaded from the below link. Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MapsShapeBlaz42141317 Screenshot:     Solution 2: The converted GeoJSON data file can be parsed as a deserialized object and can be set in the "ShapeData" property of the "MapsLayer" in the Maps component. Please find the code snippet for the same below.   Code Snippet: @using Syncfusion.Blazor.Maps @using Newtonsoft.Json;   <SfMaps>     <MapsLayers>         <MapsLayer ShapeData='MapShapeData' TValue="string">         </MapsLayer>     </MapsLayers> </SfMaps>   @code{     public object MapShapeData { get; set; }     protected override async Task OnInitializedAsync()     {         string fileText = System.IO.File.ReadAllText("wwwroot/africa.json");           MapShapeData = Newtonsoft.Json.JsonConvert.DeserializeObject(fileText);     } }
And with the ShapeData is there a way to get a callback when the user is hovering on the line and maybe show the marker where the user has the mouse?	We assume that the term "line" refers to the line that surrounds the shape. If this is the case, the Maps component does not support the mouse hover event when we hover over the line or the shape (both).   If we have misunderstood your requirement, please provide more details.

Please let us know if you need any further assistance.