Problem with maps binding

[Manolo Capdevila]

Hi,

I try bind a map with a datasource, but binding don't work for me, and I don't know what is wrong.

I try binding the code column from map with codigoProvincia from datasource

I attach an example

Thanks

Attachment: syncfusionmaps_ff0af4db.zip

[Swetha Babu]

Hi,

Thank you for contacting Syncfusion support.

We have checked your sample and came to know that you are rendering the data labels from the field in the data source. To render the data label, we need to set the field from GeoJSON file as labelPath in the Maps control.  Also we can customize the data labels using the property "smartLabelMode" in dataLabelSettings property in Maps control. We have modified your sample and the same can be downloaded from the below sample reference link.

https://www.syncfusion.com/downloads/support/forum/156730/ze/syncfusionmaps_ff0af4db1705079733

In the above sample, we rendered the data labels using the "labelPath" property value as "name" field from the GeoJSON file.

Please let us know if you need further assistance.

Regards,
Swetha Babu

[Manolo Capdevila]

Hi,

I need join the code in json with the dataset data.json for show more properties.

In example, I use

 [shapeData]= 'shapeData'  [shapePropertyPath]= 'shapePropertyPath' [shapeDataPath]= 'shapeDataPath' [dataSource] = 'dataSource'

shapeProperyPath is code, that it is in geojson file

shapeDataPath is codigoProvincia (the typescript code is wrong, the value is codigo, but with codigoProvincia doesn't work)

So, when I click on shape, I need show comunidad and total values, that it is storage in datasource.

in event shapeSelected, args.data is empty.

In your example, you show property of geoJson file, not from datasource file

Thanks

[Swetha Babu]

Hi,

Thank you for your update.

We have checked your code. We can bind the property of the data source to the maps using the "shapeDataPath” property. We found some formatting issues with the data source file. So we have modified the data source file. When we click on a shape, the "shapeSelected" event will get triggered and the "data" argument specifies the corresponding the data value from the data source file. We have created a simple angular application to demonstrate the same and it can be downloaded from the following link.

https://www.syncfusion.com/downloads/support/forum/156730/ze/syncfusionmaps1675942252

In the above sample, we have rendered the Spain map. When we click a shape in the map, the alert box with “comunidad” field and “total” field will be displayed using the args.data argument. Please let us know if the above sample meets your requirement.

Please let us know if you need any further assistance.

Regards,
Swetha Babu