@using Syncfusion.Blazor.Maps <SfMaps @ref="MapInstance" ProjectionType="ProjectionType.Equirectangular"> <MapsEvents OnMarkerClick="OnMarkerClick" OnItemSelect="OnItemSelect" /> <MapsLayers> <MapsLayer LayerType="ShapeLayerType.Geometry" GeometryType="GeometryType.Normal" ShapeData="@ShapeDataSource"> <MapsShapeSettings Fill="gray" ColorValuePath="fill"> <MapsShapeBorder Color="#FFFFFF" Width="1"></MapsShapeBorder> </MapsShapeSettings> <MapsLayerSelectionSettings Enable="true" Opacity="1"></MapsLayerSelectionSettings> </MapsLayer> </MapsLayers> <MapsZoomSettings Enable="true" /> </SfMaps> @code{ protected SfMaps MapInstance { get; set; } protected MapDataSettings ShapeDataSource => new MapDataSettings { dataOptions = "assets/seat.json" };
protected void OnItemSelect(ISelectionEventArgs args) { var dump = args.ShapeData?.ToString() ?? string.Empty; // should output something like -> {"seatno":12,"fill":"gray"} Console.WriteLine("OnItemSelect: {0}", dump); } protected class MapDataSettings { public string dataOptions { get; set; } public bool async => true; public string type => "GET"; }; }
<SfMaps>
<MapsEvents OnItemSelect="OnItemSelect"/>
<MapsLayers>
<MapsLayer TValue="MapDataSettings" ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'>
<MapsShapeSettings Fill="gray" ColorValuePath="fill">
<MapsShapeBorder Color="#FFFFFF" Width="1"></MapsShapeBorder>
</MapsShapeSettings>
<MapsLayerSelectionSettings Enable="true" Opacity="1"></MapsLayerSelectionSettings>
</MapsLayer>
</MapsLayers>
</SfMaps> |