Thanks. The example is clear. Now, I want to display a Bubbles Map using the code instead of the name of the countries:
(...)
<MapsLayer TValue="string" ShapeData='new {dataOptions ="data/maps/world-map.json"}' ShapeDataPath="Code" ShapePropertyPath="@ShapePropertyPath">
(...)
public string[] ShapePropertyPath = { "code" };
public class BubbleDataSource
{
public double Rank { get; set; }
public double Code{ get; set; }
public string Name { get; set; }
public double Value { get; set; }
public string Color { get; set; }
public double Population { get; set; }
}
(...)
Is it correct to change the properties and fields in this way?
Regards.
Thanks, the demo works well.
I have a problem when I put your code in my application: a Blazor Webassembly App with charts and tables. The map is displayed, the point are in the source code of the page, but they are not visible:
<circle id="maps-fe2c908b-a8a3-44df-bb87-508b062d8c34_LayerIndex_0_BubbleIndex_0_dataIndex_1" opacity="0.8" fill="#0C2D48" stroke="transparent" stroke-width="1" cy="0" cx="0" r="30" transform="translate(405.1609898600974,209.5694389458246)" class="" style="visibility: hidden"></circle>
I'm using 19.1.0.66 version and I need to put these two scripts in the Host.cshtml page:
<!-- Suncfusion fix -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
<script src="https://cdn.syncfusion.com/blazor/syncfusion-blazor-base.min.js"></script>
Your demo is still working with these changes, but not my code. My app is more complex and it needs more time to be loaded. Maybe is it a problem with the animation of the bubbles that never starts? Is it possible to disable the animation?
|
<SfMaps>
<MapsLayers>
<MapsLayer TValue="string" ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' ShapeDataPath="Name" ShapePropertyPath='new string[] { "name" }'>
<MapsShapeSettings Fill="#E5E5E5" />
<MapsBubbleSettings>
<MapsBubble AnimationDuration="0" AnimationDelay="0" TValue="BubbleDataSource" Visible="true" ValuePath="Value" ColorValuePath="Color" MinRadius="3" MaxRadius="30" Opacity="0.8" DataSource="@BubbleData">
</MapsBubble>
</MapsBubbleSettings>
</MapsLayer>
</MapsLayers>
</SfMaps> |
Hi,
yes, your demo works fine.
Disabling the animation, the map works.
In my application, there are two accumulation charts, one stacked chart, the map and other grids all on the same page. I don't know if this can be a problem. The map itself takes a few seconds to appear after all the others.
The legend has some problem too. It's empty:
<g id="container_Legend_Group" transform="translate(0 0)">
<rect id="maps-d35da01e-c9ad-4f56-998d-78c963a0064b_Legend_Border" opacity="1" fill="transParent" stroke-width="1" d="undefined" y="0" x="0" height="0" width="0" rx="0" ry="0" style="pointer-events: none;"></rect>
</g>
Again in your example, the legend works well.
Is your demo a Blazor WebAssembly App or a Blazor Server App? As I said, it is the first type in my case.
Sorry, I need to correct myself. I was trying the old demo, not the last one (WebAssembly).
Your WebAssembly demo DOESN'T work for me: it has the same problem as my application:
- with animation on, bubbles remain hidden
- with animation off, bubbles appear
And if I add the legend to your demo, it is empty.
The problem is the same on Edge and Chrome. My PC is an i7 with an NVIDIA, but it is 7 years old and it takes several seconds (30/40) to load completely your demo (debug mode).
|
<SfMaps>
<MapsLegendSettings Visible="true" Type="LegendType.Bubbles"></MapsLegendSettings>
<MapsLayers>
<MapsLayer TValue="string" ShapeData='new {dataOptions= https://cdn.syncfusion.com/maps/map-data/world-map.json}' ShapeDataPath="Name" ShapePropertyPath='new string[] { "name" }'>
<MapsShapeSettings Fill="#E5E5E5" />
<MapsBubbleSettings>
<MapsBubble TValue="BubbleDataSource" Visible="true" AnimationDelay="0" AnimationDuration="0" ValuePath="Value" ColorValuePath="Color" MinRadius="3" MaxRadius="30" Opacity="0.8" DataSource="@BubbleData">
</MapsBubble>
</MapsBubbleSettings>
</MapsLayer>
</MapsLayers>
</SfMaps> |
Hi,
yes, I've found LegendType.Bubbles just after I've replied to you. In any case, it works in your example but not in my application. I will investigate more my code.
Video:
I've attached a video about Animation On/Off. You can see your previous example with Animations ON. The video is in realtime and at the end, you can see there are no bubbles on the map. If I put AnimationDelay="0" and AnimationDuration="0", the map works fine.
This is not a problem, because I don't want the animations but the bug still exists.
Legend question:
I've attached a new version of your code as it is on my application. I'd like to show a legend where the categories are based on a field Type but showing only distinct values. If you run the example, you see the same Type repeated more times:
Is it possible?
|
Queries |
Details | |
|
I've attached a video about Animation On/Off. You can see your previous example with Animations ON. The video is in realtime and at the end, you can see there are no bubbles on the map. If I put AnimationDelay="0" and AnimationDuration="0", the map works fine.
This is not a problem, because I don't want the animations but the bug still exists. |
Since you have confirmed that you do not require bubble animation in the Maps component, please set “AnimationDelay” and “AnimationDuration” to “0” in the “MapsBubble” class. We will, however, consider the reported issue as an internal issue that will be addressed in our upcoming main volume release. Please find the feedback link below to keep track of the reported issue.
| |
|
I'd like to show a legend where the categories are based on a field Type but showing only distinct values. If you run the example, you see the same Type repeated more times |
We can remove duplicate legend items and group them together as a single legend item using “RemoveDuplicateLegend” property in the “MapsLegendSettings” class. Please find the code snippet below.
We have modified the provided sample application and it can be downloaded from the below link.
|