User Interactions in Blazor Maps Component
5 Dec 202424 minutes to read
Zooming
The zooming feature is used to zoom in and out of Maps to show in-depth information. It is controlled by the ZoomFactor property of the MapsZoomSettings class. The ZoomFactor is increased or decreased dynamically based on zoom in and out interaction.
Enable zooming
Zooming of Maps is enabled by setting the Enable property of MapsZoomSettings to true.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsZoomSettings Enable="true"></MapsZoomSettings>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string">
</MapsLayer>
</MapsLayers>
</SfMaps>
Enable panning
To enable the panning feature, set the EnablePanning property of MapsZoomSettings to true.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsZoomSettings Enable="true" EnablePanning="true"></MapsZoomSettings>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string">
</MapsLayer>
</MapsLayers>
</SfMaps>Various types of zooming
Zooming can be performed in the following types:
Zooming toolbar
A toolbar is available in the Maps component to perform zooming and panning operation. The zooming toolbar appears when the Enable property of MapsZoomSettings is set to true.
The following options are available in toolbar.
- Zoom - Performs selection zooming.
- Zoom In - Zooms in the Maps.
- Zoom Out - Zooms out the Maps.
- Pan - Switches to panning if selection zoom is enabled.
- Reset - Restores the Maps to the default view.
By default, the toolbar is rendered with Zoom In, Zoom Out, and Reset options.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsZoomSettings Enable="true">
</MapsZoomSettings>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string">
</MapsLayer>
</MapsLayers>
</SfMaps>Pinch zooming
To enable or disable the pinch zooming, use the PinchZooming property in MapsZoomSettings.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsZoomSettings Enable="true" PinchZooming="true"></MapsZoomSettings>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string">
</MapsLayer>
</MapsLayers>
</SfMaps>Single-click zooming
To enable or disable the single-click zooming using mouse, use the ZoomOnClick property in MapsZoomSettings.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsZoomSettings Enable="true" ZoomOnClick="true"></MapsZoomSettings>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string">
</MapsLayer>
</MapsLayers>
</SfMaps>Double-click zooming
To enable or disable the double-click zooming using mouse, use the DoubleClickZoom property in MapsZoomSettings.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsZoomSettings Enable="true" DoubleClickZoom="true"></MapsZoomSettings>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string">
</MapsLayer>
</MapsLayers>
</SfMaps>Mouse wheel zooming
To enable or disable mouse wheel zooming, use the MouseWheelZoom property in MapsZoomSettings.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsZoomSettings Enable="true" MouseWheelZoom="true"></MapsZoomSettings>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string">
</MapsLayer>
</MapsLayers>
</SfMaps>Selection zooming
To enable or disable selection zooming, use the EnableSelectionZooming property in MapsZoomSettings. The EnablePanning property must be set to false to enable the selection zooming in Maps.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsZoomSettings Enable="true" EnableSelectionZooming="true" EnablePanning="true">
<MapsZoomToolbarSettings>
<MapsZoomToolbarButton ToolbarItems="new List<ToolbarItem>() { ToolbarItem.Zoom, ToolbarItem.ZoomIn, ToolbarItem.ZoomOut,
ToolbarItem.Pan, ToolbarItem.Reset }"></MapsZoomToolbarButton>
</MapsZoomToolbarSettings>
</MapsZoomSettings>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string">
</MapsLayer>
</MapsLayers>
</SfMaps>Setting minimum and maximum values for zoom factor
The zoom factor range can be adjusted using the MinZoom and MaxZoom properties in MapsZoomSettings. The MinZoom value is set to 1 by default, and the MaxZoom value is set to 10.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsZoomSettings Enable="true" MinZoom="2" MaxZoom="9"></MapsZoomSettings>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string">
</MapsLayer>
</MapsLayers>
</SfMaps>Zooming with layer animation
To zoom in and zoom out the shape maps with animation, set the AnimationDuration property in MapsLayer with duration value in milliseconds. Most importantly, the animation for the layer works when the AnimationDuration is set for the base layer of the Maps and not the sublayer.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsZoomSettings Enable="true">
</MapsZoomSettings>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string"
AnimationDuration="500">
</MapsLayer>
</MapsLayers>
</SfMaps>Customizing the zoom toolbar
The MapsZoomToolbarSettings can be used to customize the zoom toolbar. The following properties are available for customization in the MapsZoomToolbarSettings.
- Orientation - To customize the orientation (horizontal\vertical) of the zoom toolbar.
- HorizontalAlignment - To customize the position of the zoom toolbar in near, far, and center positions, during horizontal orientation.
- VerticalAlignment - To customize the position of the zoom toolbar in near, far, and center positions, during vertical orientation.
- BackgroundColor - To customize the background color of the zoom toolbar.
- BorderColor - To apply the border color to the zoom toolbar.
- BorderWidth - To set the width to the border of the zoom toolbar.
- BorderOpacity - To set the opacity to the border of the zoom toolbar.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsZoomSettings Enable="true">
<MapsZoomToolbarSettings BackgroundColor="pink" BorderColor="green" BorderOpacity="1" BorderWidth="3" Orientation="Orientation.Vertical" VerticalAlignment="Alignment.Near">
<MapsZoomToolbarButton ToolbarItems="new List<ToolbarItem>() { ToolbarItem.Zoom,
ToolbarItem.ZoomIn, ToolbarItem.ZoomOut, ToolbarItem.Pan, ToolbarItem.Reset }"></MapsZoomToolbarButton>
</MapsZoomToolbarSettings>
</MapsZoomSettings>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string">
<MapsShapeSettings Fill="#C1DFF5"></MapsShapeSettings>
</MapsLayer>
</MapsLayers>
</SfMaps>
Customizing the buttons in the zoom toolbar
The MapsZoomToolbarButton can be used to customize the buttons in the zoom toolbar. The following properties are available for customization in the MapsZoomToolbarButton.
- ToolbarItems - To customize the items that are to be shown in the zoom toolbar.
- Color - To apply the color to the icons in the buttons in the zoom toolbar.
- Fill - To apply the fill color to the buttons in the zoom toolbar.
- Opacity - To apply the opacity for the buttons in the zoom toolbar.
- HighlightColor - To apply the color for the button in the zoom toolbar, when the mouse has hovered on the appropriate button.
- SelectionColor - To apply the color for the button in the zoom toolbar, when clicking the same.
- Radius - To set the radius for the buttons in the zoom toolbar.
- Padding - To set the spacing between the buttons in the zoom toolbar.
- BorderColor - To set the color of the border of the buttons in the zoom toolbar.
- BorderOpacity - To set the opacity of the border of the buttons in the zoom toolbar.
- BorderWidth - To set the width of the border of the buttons in the zoom toolbar.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsZoomSettings Enable="true">
<MapsZoomToolbarSettings>
<MapsZoomToolbarButton BorderColor="green" BorderOpacity="1" BorderWidth="2" Color="red" Fill="pink" HighlightColor="#5ed59a" SelectionColor="#d55e5e" Opacity="0.6"
Padding="10" Radius="35" ToolbarItems="new List<ToolbarItem>() { ToolbarItem.Zoom,
ToolbarItem.ZoomIn, ToolbarItem.ZoomOut, ToolbarItem.Pan, ToolbarItem.Reset }"></MapsZoomToolbarButton>
</MapsZoomToolbarSettings>
</MapsZoomSettings>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string">
<MapsShapeSettings Fill="#C1DFF5"></MapsShapeSettings>
</MapsLayer>
</MapsLayers>
</SfMaps>
Customizing the tooltip of the zoom toolbar
The MapsZoomToolbarTooltipSettings can be used to customize the tooltip of the zoom toolbar. The following properties are available for customization in the MapsZoomToolbarTooltipSettings.
- Visible - To enable or disable the tooltip in the zoom toolbar.
- Fill - To set the fill color to the tooltip in the zoom toolbar.
- BorderColor - To set the color of the border of the tooltip in the zoom toolbar.
- BorderOpacity - To set the opacity of the border of the tooltip in the zoom toolbar.
- BorderWidth - To set the width of the border of the tooltip in the zoom toolbar.
- FontColor - To set the text color in the tooltip of the zoom toolbar.
- FontFamily - To set the font family in the tooltip of the zoom toolbar.
- FontStyle - To set the font style in the tooltip of the zoom toolbar.
- FontWeight - To set the font weight in the tooltip of the zoom toolbar.
- FontSize - To set the font size in the tooltip of the zoom toolbar.
- FontOpacity - To set the font opacity in the tooltip of the zoom toolbar.
@using Syncfusion.Blazor.Maps
<SfMaps Width="700px" Height="500px">
<MapsZoomSettings Enable="true">
<MapsZoomToolbarSettings>
<MapsZoomToolbarButton ToolbarItems="new List<ToolbarItem>() { ToolbarItem.Zoom,
ToolbarItem.ZoomIn, ToolbarItem.ZoomOut, ToolbarItem.Pan, ToolbarItem.Reset }"></MapsZoomToolbarButton>
<MapsZoomToolbarTooltipSettings Visible="true" BorderColor="green" BorderOpacity="1" BorderWidth="2" Fill="violet" FontColor="black" FontFamily="Times New Roman"
FontOpacity="1" FontSize="22px" FontStyle="normal" FontWeight="200"></MapsZoomToolbarTooltipSettings>
</MapsZoomToolbarSettings>
</MapsZoomSettings>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string">
<MapsShapeSettings Fill="#C1DFF5"></MapsShapeSettings>
</MapsLayer>
</MapsLayers>
</SfMaps>
Selection
Each shape in the Maps can be selected and deselected during interaction with the shapes. Selection is enabled by setting the Enable property of MapsSelectionSettings to true.
The following properties and class are available to customize the selection of Maps elements such as shapes, bubbles and markers.
- MapsLayerSelectionBorder - To customize the color and width of the border of which element is selected in Maps.
- Fill - Applies the color for the element that is selected.
- Opacity - To customize the transparency for the element that is selected.
- EnableMultiSelect - To enable or disable the selection for multiple shapes or markers or bubbles in the Maps.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string">
<MapsLayerSelectionSettings Enable="true" Fill="green">
<MapsLayerSelectionBorder Color="White" Width="2"></MapsLayerSelectionBorder>
</MapsLayerSelectionSettings>
</MapsLayer>
</MapsLayers>
</SfMaps>
By tapping on the specific legend, the shapes which are bounded to the selected legend is also selected and vice versa.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsLegendSettings Visible="true" Mode="LegendMode.Interactive"></MapsLegendSettings>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}' ShapeDataPath="Country"
DataSource="CouncilMemberdetails" ShapePropertyPath='new string[] {"name"}' TValue="UNCouncil">
<MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
<MapsShapeColorMappings>
<MapsShapeColorMapping Value="Permanent" Color='new string[] {"#D84444"}' />
<MapsShapeColorMapping Value="Non-Permanent" Color='new string[] {"#316DB5"}' />
</MapsShapeColorMappings>
</MapsShapeSettings>
<MapsLayerSelectionSettings Enable="true" Fill="#a7f047">
<MapsLayerSelectionBorder Color="White" Width="2"></MapsLayerSelectionBorder>
</MapsLayerSelectionSettings>
</MapsLayer>
</MapsLayers>
</SfMaps>
@code{
public class UNCouncil
{
public string Country { get; set; }
public string Membership { get; set; }
};
private List<UNCouncil> CouncilMemberdetails = new List<UNCouncil>{
new UNCouncil { Country= "China", Membership= "Permanent" },
new UNCouncil { Country= "France",Membership= "Permanent" },
new UNCouncil { Country= "Russia",Membership= "Permanent" },
new UNCouncil { Country= "Kazakhstan",Membership= "Non-Permanent" },
new UNCouncil { Country= "Poland",Membership= "Non-Permanent" },
new UNCouncil { Country= "Sweden",Membership= "Non-Permanent" }
};
}
Enable selection for bubbles
To enable the selection for bubbles in Maps, set the MapsBubbleSelectionSettings in MapsBubble and set the Enable property of MapsBubbleSelectionSettings as true.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}' ShapeDataPath="Name"
ShapePropertyPath='new string[] {"name"}' TValue="Country">
@* To add bubbles based on population count *@
<MapsBubbleSettings>
<MapsBubble Visible="true" ValuePath="Population" ColorValuePath="Color" MinRadius=20 MaxRadius=40
DataSource="PopulationDetails" TValue="Country">
<MapsBubbleSelectionSettings Enable="true" Fill="green"></MapsBubbleSelectionSettings>
</MapsBubble>
</MapsBubbleSettings>
</MapsLayer>
</MapsLayers>
</SfMaps>
@code{
public class Country
{
public string Name { get; set; }
public double Population { get; set; }
public string Color { get; set; }
};
private List<Country> PopulationDetails = new List<Country> {
new Country
{
Name ="United States", Population = 325020000, Color = "#b5e485"
},
new Country
{
Name = "Russia", Population = 142905208, Color = "#7bc1e8"
},
new Country
{
Name="India", Population=1198003000, Color = "#df819c"
}
};
}
Enable selection for markers
To enable the selection for markers in Maps, set the MapsMarkerSelectionSettings in the MapsMarkerSettings and set the Enable property of the MapsLayerSelectionSettings as true.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string">
<MapsMarkerSettings>
<MapsMarker Visible="true" DataSource="California" Height="25" Width="15" TValue="City">
<MapsMarkerSelectionSettings Fill="green" Enable="true"></MapsMarkerSelectionSettings>
</MapsMarker>
<MapsMarker Visible="true" DataSource="NewYork" Height="25" Width="15" TValue="City">
<MapsMarkerSelectionSettings Fill="green" Enable="true"></MapsMarkerSelectionSettings>
</MapsMarker>
<MapsMarker Visible="true" DataSource="Iowa" Height="25" Width="15" TValue="City">
<MapsMarkerSelectionSettings Fill="green" Enable="true"></MapsMarkerSelectionSettings>
</MapsMarker>
</MapsMarkerSettings>
<MapsShapeSettings Fill="lightgray"></MapsShapeSettings>
</MapsLayer>
</MapsLayers>
</SfMaps>
@code {
public class City
{
public double Latitude { get; set; }
public double Longitude { get; set; }
};
public List<City> California = new List<City> {
new City { Latitude=35.145083,Longitude=-117.960260 }
};
public List<City> NewYork = new List<City> {
new City { Latitude=40.724546, Longitude=-73.850344 }
};
public List<City> Iowa = new List<City> {
new City { Latitude= 41.657782, Longitude=-91.533857 }
};
}
Enable selection for polygons
When the Enable property of MapsPolygonSelectionSettings is set to true, the polygon shapes can be selected via user interaction. The following properties and a class are available in MapsPolygonSelectionSettings to customize the polygon shape when it is selected.
- EnableMultiSelect - It is used to enable multiple selection of polygon shapes.
- Fill - It is used to change the color of the selected polygon shape.
- Opacity - It is used to change the opacity of the selected polygon shape.
- MapsPolygonSelectionBorder - This class is used to change the color, width, and opacity of the border of the selected polygon shape.
The following example shows how to select the polygon shape in the geometry map.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
<MapsPolygons>
<MapsPolygonSelectionSettings Enable=true EnableMultiSelect=false Fill="violet" Opacity="0.8">
<MapsPolygonSelectionBorder Color="cyan" Opacity="1" Width="7"></MapsPolygonSelectionBorder>
</MapsPolygonSelectionSettings>
<MapsPolygon Points="@Brazil" Fill="blue" Opacity="0.7" BorderColor="green" BorderWidth="2" BorderOpacity="0.7"></MapsPolygon>
</MapsPolygons>
</MapsLayer>
</MapsLayers>
</SfMaps>
@code {
List<Coordinate> Brazil = new List<Coordinate>();
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
Brazil.Add(new Coordinate() { Longitude = -1.8920678947185365, Latitude = 35.06195799239681 });
Brazil.Add(new Coordinate() { Longitude = -1.6479633699113947, Latitude = 33.58989612266137 });
Brazil.Add(new Coordinate() { Longitude = -1.4201220366858252, Latitude = 32.819439646045254 });
Brazil.Add(new Coordinate() { Longitude = -1.197974596225663, Latitude = 32.26940895444655 });
Brazil.Add(new Coordinate() { Longitude = -2.891112397949655, Latitude = 32.10303058820031 });
Brazil.Add(new Coordinate() { Longitude = -3.8246984550501963, Latitude = 31.34551662687602 });
Brazil.Add(new Coordinate() { Longitude = -3.720166273688733, Latitude = 30.758086682848685 });
Brazil.Add(new Coordinate() { Longitude = -5.6571886081189575, Latitude = 29.613582597203006 });
Brazil.Add(new Coordinate() { Longitude = -7.423353242214745, Latitude = 29.44328441403087 });
Brazil.Add(new Coordinate() { Longitude = -8.6048931685323, Latitude = 28.761444633616776 });
Brazil.Add(new Coordinate() { Longitude = -8.695726975465703, Latitude = 27.353491085576195 });
Brazil.Add(new Coordinate() { Longitude = 3.837867279970908, Latitude = 19.15916564839422 });
Brazil.Add(new Coordinate() { Longitude = 6.0705408799045415, Latitude = 19.48749097192868 });
Brazil.Add(new Coordinate() { Longitude = 12.055736352807713, Latitude = 23.694596786078293 });
Brazil.Add(new Coordinate() { Longitude = 11.272522332402986, Latitude = 24.289329186946034 });
Brazil.Add(new Coordinate() { Longitude = 10.30872578261932, Latitude = 24.65419958524693 });
Brazil.Add(new Coordinate() { Longitude = 9.910236690050027, Latitude = 25.48943950947175 });
Brazil.Add(new Coordinate() { Longitude = 9.432639882414293, Latitude = 26.398372489836902 });
Brazil.Add(new Coordinate() { Longitude = 9.898266456582292, Latitude = 26.73489453809293 });
Brazil.Add(new Coordinate() { Longitude = 9.560243026853641, Latitude = 30.31040379467153 });
Brazil.Add(new Coordinate() { Longitude = 8.943853847283322, Latitude = 32.350324876652195 });
Brazil.Add(new Coordinate() { Longitude = 7.57004059025715, Latitude = 33.75071049019398 });
Brazil.Add(new Coordinate() { Longitude = 8.0906322609153, Latitude = 34.69043151009983 });
Brazil.Add(new Coordinate() { Longitude = 8.363285449347273, Latitude = 35.38654406371319 });
Brazil.Add(new Coordinate() { Longitude = 8.26139549449448, Latitude = 36.44751078733985 });
Brazil.Add(new Coordinate() { Longitude = 8.61100824823302, Latitude = 36.881913362940196 });
Brazil.Add(new Coordinate() { Longitude = 7.4216488925819135, Latitude = 37.021408008916254 });
Brazil.Add(new Coordinate() { Longitude = 6.461182254165351, Latitude = 36.99092409199429 });
Brazil.Add(new Coordinate() { Longitude = 5.297178918070159, Latitude = 36.69985479014656 });
Brazil.Add(new Coordinate() { Longitude = 3.6718056161224695, Latitude = 36.86470546831693 });
Brazil.Add(new Coordinate() { Longitude = 1.2050052555659931, Latitude = 36.57658056301722 });
Brazil.Add(new Coordinate() { Longitude = -0.26968570003779746, Latitude = 35.806903541813625 });
Brazil.Add(new Coordinate() { Longitude = -0.995191786435754, Latitude = 35.58466127904214 });
Brazil.Add(new Coordinate() { Longitude = -1.8920678947185365, Latitude = 35.06195799239681 });
}
}
Public method for the shape selection
The ShapeSelection method can be used to select each shape in the Maps. layerIndex, propertyName, shapeDataPath, and isSelect boolean value to select or deselect the shape are the input parameters for this method.
@using Syncfusion.Blazor.Maps
<div>
<SfMaps @ref="mapsref">
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
<MapsLayerSelectionSettings Enable="true" Fill="green">
<MapsLayerSelectionBorder Color="white" Width="2"></MapsLayerSelectionBorder>
</MapsLayerSelectionSettings>
</MapsLayer>
</MapsLayers>
</SfMaps>
</div>
<button id="select" @onclick="Select">select</button>
<button id="unselect" @onclick="Unselect">unselect</button>
@code{
SfMaps mapsref;
public void Select() {
mapsref.ShapeSelectionAsync(0, "continent", "Asia", true);
}
public void Unselect() {
mapsref.ShapeSelectionAsync(0, "continent", "Asia", false);
}
}
Initial shape selection
The shape is initially selected using the MapsInitialShapeSelection, and the values are mapped to the ShapePath and ShapeValue.
<SfMaps>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
<MapsLayerSelectionSettings Enable="true" Fill="green" EnableMultiSelect="true">
<MapsLayerSelectionBorder Color="white" Width="2"></MapsLayerSelectionBorder>
</MapsLayerSelectionSettings>
<MapsInitialShapeSelectionSettings>
<MapsInitialShapeSelection ShapePath="continent" ShapeValue="Africa"></MapsInitialShapeSelection>
<MapsInitialShapeSelection ShapePath="name" ShapeValue="India"></MapsInitialShapeSelection>
</MapsInitialShapeSelectionSettings>
</MapsLayer>
</MapsLayers>
</SfMaps>
Initial marker selection
Using the InitialMarkerSelection, the marker shape can be selected initially. Markers render based on the Latitude and Longitude values.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string">
<MapsMarkerSettings>
<MapsMarker Visible="true" DataSource="Cities" Height="25" Width="15" TValue="City">
<MapsMarkerSelectionSettings Fill="green" Enable="true"></MapsMarkerSelectionSettings>
<InitialMarkerSelectionSettings>
<InitialMarkerSelection Latitude="35.145083" Longitude="-117.960260"></InitialMarkerSelection>
</InitialMarkerSelectionSettings>
</MapsMarker>
</MapsMarkerSettings>
<MapsShapeSettings Fill="lightgray"></MapsShapeSettings>
</MapsLayer>
</MapsLayers>
</SfMaps>
@code {
public class City
{
public double Latitude { get; set; }
public double Longitude { get; set; }
public string Name { get; set; }
};
private List<City> Cities = new List<City> {
new City {Latitude=35.145083,Longitude=-117.960260, Name= "Californiya"},
new City { Latitude=40.724546, Longitude=-73.850344, Name="New York"},
new City {Latitude= 41.657782, Longitude=-91.533857, Name="Iowa"}
};
}
Highlight
Each shape in the Maps can be highlighted during mouse hover on the Maps elements such as shapes, bubbles, markers and legends. Highlight is enabled by setting the Enable property of MapsHighlightSettings to true.
The following properties and classes are available to customize the highlight of Maps elements such as shapes, bubbles and markers.
- Fill - Applies the color for the element that is highlighted.
- Opacity - To customize the transparency for the element that is highlighted.
- MapsLayerHighlightBorder - To customize the color and width of the border of the layer when that is highlighted.
- MapsBubbleHighlightBorder - To customize the color and width of the border of the bubble when that is highlighted.
- MapsMarkerHighlightBorder - To customize the color and width of the border of the marker when that is highlighted.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string">
<MapsLayerHighlightSettings Enable="true" Fill="green">
<MapsLayerHighlightBorder Color="white" Width="2"></MapsLayerHighlightBorder>
</MapsLayerHighlightSettings>
</MapsLayer>
</MapsLayers>
</SfMaps>
Hovering on the specific legend, the shapes which are bounded to the selected legend is also highlighted and vice versa.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsLegendSettings Visible="true" Mode="LegendMode.Interactive"></MapsLegendSettings>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}' ShapeDataPath="Country"
DataSource="CouncilMemberDetails" ShapePropertyPath='new string[] {"name"}' TValue="UNCouncil">
<MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
<MapsShapeColorMappings>
<MapsShapeColorMapping Value="Permanent" Color='new string[] {"#D84444"}' />
<MapsShapeColorMapping Value="Non-Permanent" Color='new string[] {"#316DB5"}' />
</MapsShapeColorMappings>
</MapsShapeSettings>
<MapsLayerHighlightSettings Enable="true" Fill="#a7f047">
<MapsLayerHighlightBorder Color="White" Width="2"></MapsLayerHighlightBorder>
</MapsLayerHighlightSettings>
</MapsLayer>
</MapsLayers>
</SfMaps>
@code{
public class UNCouncil
{
public string Country { get; set; }
public string Membership { get; set; }
};
private List<UNCouncil> CouncilMemberDetails = new List<UNCouncil>{
new UNCouncil { Country= "China", Membership= "Permanent"},
new UNCouncil { Country= "France",Membership= "Permanent" },
new UNCouncil { Country= "Russia",Membership= "Permanent"},
new UNCouncil { Country= "Kazakhstan",Membership= "Non-Permanent"},
new UNCouncil { Country= "Poland",Membership= "Non-Permanent"},
new UNCouncil { Country= "Sweden",Membership= "Non-Permanent"}
};
}
Enable highlight for bubbles
To enable the highlight for the bubbles in Maps, set the MapsBubbleHighlightSettings in MapsBubble and set the Enable property of MapsBubbleHighlightSettings as true.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
ShapeDataPath="Name" ShapePropertyPath='new string[] {"name"}' TValue="Country">
@* To add bubbles based on population count *@
<MapsBubbleSettings>
<MapsBubble Visible="true" ValuePath="Population" ColorValuePath="Color" MinRadius=20 MaxRadius=40
DataSource="PopulationDetails" TValue="Country">
<MapsBubbleHighlightSettings Enable="true" Fill="green">
<MapsBubbleHighlightBorder Width="2" Color="orange"></MapsBubbleHighlightBorder>
</MapsBubbleHighlightSettings>
</MapsBubble>
</MapsBubbleSettings>
</MapsLayer>
</MapsLayers>
</SfMaps>
@code{
public class Country
{
public string Name { get; set; }
public double Population { get; set; }
public string Color { get; set; }
};
private List<Country> PopulationDetails = new List<Country> {
new Country
{
Name ="United States", Population = 325020000, Color = "#b5e485"
},
new Country
{
Name = "Russia", Population = 142905208, Color = "#7bc1e8"
},
new Country
{
Name="India", Population=1198003000, Color = "#df819c"
}
};
}
Enable highlight for markers
To enable the highlight for markers in Maps, set the MapsMarkerHighlightSettings in MapsMarker and set the Enable property of MapsMarkerHighlightSettings as true.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string">
<MapsMarkerSettings>
<MapsMarker Visible="true" DataSource="Cities" Height="25" Width="15" TValue="City">
<MapsMarkerHighlightSettings Fill="green" Enable="true"></MapsMarkerHighlightSettings>
</MapsMarker>
</MapsMarkerSettings>
<MapsShapeSettings Fill="lightgray"></MapsShapeSettings>
</MapsLayer>
</MapsLayers>
</SfMaps>
@code {
public class City
{
public double Latitude { get; set; }
public double Longitude { get; set; }
public string Name { get; set; }
};
private List<City> Cities = new List<City> {
new City { Latitude=35.145083,Longitude=-117.960260, Name= "California" },
new City { Latitude=40.724546, Longitude=-73.850344, Name="New York" },
new City { Latitude= 41.657782, Longitude=-91.533857, Name="Iowa" }
};
}
Enable highlight for polygons
The polygon shapes can be highlighted via user interaction if the Enable property of MapsPolygonHighlightSettings is set to true. The following properties and a class are available in MapsPolygonHighlightSettings to customize the polygon shape when it is highlighted.
- Fill - It is used to change the color of the highlighted polygon shape.
- Opacity - It is used to change the opacity of the highlighted polygon shape.
- MapsPolygonHighlightBorder - This class is used to change the color, width, and opacity of the border of the highlighted polygon shape.
The following example shows how to highlight a polygon shape on a geometry map.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
<MapsPolygons>
<MapsPolygonHighlightSettings Enable=true Fill="yellow" Opacity="0.4" >
<MapsPolygonHighlightBorder Color="blue" Opacity="0.6" Width="4"></MapsPolygonHighlightBorder>
</MapsPolygonHighlightSettings>
<MapsPolygon Points="Brazil" Fill="red" Opacity="0.7" BorderColor="green" BorderWidth="2" BorderOpacity="0.7"></MapsPolygon>
</MapsPolygons>
</MapsLayer>
</MapsLayers>
</SfMaps>
@code {
List<Coordinate> Brazil = new List<Coordinate>();
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
Brazil.Add(new Coordinate() { Longitude = -1.8920678947185365, Latitude = 35.06195799239681 });
Brazil.Add(new Coordinate() { Longitude = -1.6479633699113947, Latitude = 33.58989612266137 });
Brazil.Add(new Coordinate() { Longitude = -1.4201220366858252, Latitude = 32.819439646045254 });
Brazil.Add(new Coordinate() { Longitude = -1.197974596225663, Latitude = 32.26940895444655 });
Brazil.Add(new Coordinate() { Longitude = -2.891112397949655, Latitude = 32.10303058820031 });
Brazil.Add(new Coordinate() { Longitude = -3.8246984550501963, Latitude = 31.34551662687602 });
Brazil.Add(new Coordinate() { Longitude = -3.720166273688733, Latitude = 30.758086682848685 });
Brazil.Add(new Coordinate() { Longitude = -5.6571886081189575, Latitude = 29.613582597203006 });
Brazil.Add(new Coordinate() { Longitude = -7.423353242214745, Latitude = 29.44328441403087 });
Brazil.Add(new Coordinate() { Longitude = -8.6048931685323, Latitude = 28.761444633616776 });
Brazil.Add(new Coordinate() { Longitude = -8.695726975465703, Latitude = 27.353491085576195 });
Brazil.Add(new Coordinate() { Longitude = 3.837867279970908, Latitude = 19.15916564839422 });
Brazil.Add(new Coordinate() { Longitude = 6.0705408799045415, Latitude = 19.48749097192868 });
Brazil.Add(new Coordinate() { Longitude = 12.055736352807713, Latitude = 23.694596786078293 });
Brazil.Add(new Coordinate() { Longitude = 11.272522332402986, Latitude = 24.289329186946034 });
Brazil.Add(new Coordinate() { Longitude = 10.30872578261932, Latitude = 24.65419958524693 });
Brazil.Add(new Coordinate() { Longitude = 9.910236690050027, Latitude = 25.48943950947175 });
Brazil.Add(new Coordinate() { Longitude = 9.432639882414293, Latitude = 26.398372489836902 });
Brazil.Add(new Coordinate() { Longitude = 9.898266456582292, Latitude = 26.73489453809293 });
Brazil.Add(new Coordinate() { Longitude = 9.560243026853641, Latitude = 30.31040379467153 });
Brazil.Add(new Coordinate() { Longitude = 8.943853847283322, Latitude = 32.350324876652195 });
Brazil.Add(new Coordinate() { Longitude = 7.57004059025715, Latitude = 33.75071049019398 });
Brazil.Add(new Coordinate() { Longitude = 8.0906322609153, Latitude = 34.69043151009983 });
Brazil.Add(new Coordinate() { Longitude = 8.363285449347273, Latitude = 35.38654406371319 });
Brazil.Add(new Coordinate() { Longitude = 8.26139549449448, Latitude = 36.44751078733985 });
Brazil.Add(new Coordinate() { Longitude = 8.61100824823302, Latitude = 36.881913362940196 });
Brazil.Add(new Coordinate() { Longitude = 7.4216488925819135, Latitude = 37.021408008916254 });
Brazil.Add(new Coordinate() { Longitude = 6.461182254165351, Latitude = 36.99092409199429 });
Brazil.Add(new Coordinate() { Longitude = 5.297178918070159, Latitude = 36.69985479014656 });
Brazil.Add(new Coordinate() { Longitude = 3.6718056161224695, Latitude = 36.86470546831693 });
Brazil.Add(new Coordinate() { Longitude = 1.2050052555659931, Latitude = 36.57658056301722 });
Brazil.Add(new Coordinate() { Longitude = -0.26968570003779746, Latitude = 35.806903541813625 });
Brazil.Add(new Coordinate() { Longitude = -0.995191786435754, Latitude = 35.58466127904214 });
Brazil.Add(new Coordinate() { Longitude = -1.8920678947185365, Latitude = 35.06195799239681 });
}
}
Tooltip
On mouse over or touch end event, the tooltip is used to get more information about the layer, bubble, or marker. It can be enabled separately for layer or bubble or marker by using the Visible property of MapsLayerTooltipSettings or MapsBubbleTooltipSettings or MapsMarkerTooltipSettings respectively. The TooltipDisplayMode property is used to change the display mode of the tooltip in Maps. Following display modes of tooltip are available in the Maps component. By default, TooltipDisplayMode is set to MouseMove.
- MouseMove
- Click
- DoubleClick
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
<MapsLayerTooltipSettings Visible="true" ValuePath="name">
</MapsLayerTooltipSettings>
</MapsLayer>
</MapsLayers>
</SfMaps>
Customization
The following properties are available to customize the tooltip of the Maps component.
- Fill - Applies the color of the tooltip in layers, markers, and bubbles of Maps.
- Format - To customize the format of the tooltip in layers, markers, and bubbles of Maps.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' ShapeDataPath="Name"
ShapePropertyPath='new string[] {"name"}' DataSource='PerformanceReport' TValue="Country">
<MapsLayerTooltipSettings Visible="true" ValuePath="CountryName"
Format="<b>${CountryName}</b><br>Finalist: <b>${Winner}</b><br>Win: <b>${Finalist}">
</MapsLayerTooltipSettings>
<MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Finalist">
<MapsShapeColorMappings>
<MapsShapeColorMapping Value="1" Color='new string[] {"#acaed8"}'></MapsShapeColorMapping>
<MapsShapeColorMapping Value="2" Color='new string[] {"#80c1ff"}'></MapsShapeColorMapping>
<MapsShapeColorMapping Value="3" Color='new string[] {"#1a90ff"}'></MapsShapeColorMapping>
<MapsShapeColorMapping Value="4" Color='new string[] {"#005cb3"}'></MapsShapeColorMapping>
<MapsShapeColorMapping Value="7" Color='new string[] {"#0b0d35"}'></MapsShapeColorMapping>
</MapsShapeColorMappings>
</MapsShapeSettings>
</MapsLayer>
</MapsLayers>
</SfMaps>
@code {
public List<Country> PerformanceReport = new List<Country> {
new Country { CountryName="India", Name="India", Finalist="3", Winner="2" },
new Country { CountryName="United Kingdom", Name="United Kingdom", Finalist="4", Winner="1" },
new Country { CountryName="Australia", Name="Australia", Finalist="7", Winner="5" },
new Country { CountryName="Sri Lanka", Name="Sri Lanka", Finalist="3", Winner="1"},
new Country { CountryName="Pakistan", Name="Pakistan", Finalist="2", Winner="1" },
new Country { CountryName="New Zealand", Name="New Zealand", Finalist="1", Winner="0"},
new Country { CountryName="West Indies", Name="Dominican Rep", Finalist="3", Winner="2"},
new Country { CountryName="West Indies", Name="Cuba", Finalist="3", Winner="2"},
new Country { CountryName="West Indies", Name="Jamaica", Finalist="3", Winner="2"},
new Country { CountryName="West Indies", Name="Haiti", Finalist="3", Winner="2"},
new Country { CountryName="West Indies",Name="Gayana", Finalist="3", Winner="2"},
new Country { CountryName="West Indies", Name="Suriname", Finalist="3", Winner="2"},
new Country { CountryName="West Indies", Name="Trinidad and Tobago", Finalist="3", Winner="2"}
};
public class Country
{
public string Name { get; set; }
public string Winner { get; set; }
public string Finalist { get; set; }
public string CountryName { get; set; }
}
}
Tooltip template
The HTML element can be rendered in the tooltip of the Maps using the TooltipTemplate property of the MapsLayerTooltipSettings.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsTitleSettings Text="Finalist in Cricket World Cup">
<MapsTitleTextStyle Size="16px" />
</MapsTitleSettings>
<MapsZoomSettings Enable="false" />
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' DataSource="@PerformanceReport" TValue="Country"
ShapePropertyPath="@ShapePropertyPath" ShapeDataPath="Name">
<MapsLayerTooltipSettings Visible="true" ValuePath="name">
<TooltipTemplate>
@{
var Data = context as Country;
<div id="template">
<div class="toolback">
<div class="listing2">
<center>
@Data.Name
</center>
</div>
<hr style="margin-top: 2px;margin-bottom:5px;border:0.5px solid #DDDDDD">
<div>
<span class="listing1">Finalist : </span><span class="listing2">@Data.Winner</span>
</div>
<div>
<span class="listing1">Win : </span><span class="listing2">@Data.Runner</span>
</div>
</div>
</div>
}
</TooltipTemplate>
</MapsLayerTooltipSettings>
<MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Winner">
<MapsShapeColorMappings>
<MapsShapeColorMapping Value="1" Color="@ShapeColorOne" />
<MapsShapeColorMapping Value="2" Color="@ShapeColorTwo" />
<MapsShapeColorMapping Value="3" Color="@ShapeColorThree" />
<MapsShapeColorMapping Value="7" Color="@ShapeColorFour" />
</MapsShapeColorMappings>
</MapsShapeSettings>
</MapsLayer>
</MapsLayers>
</SfMaps>
@code {
public string[] ShapePropertyPath = { "name" };
public string[] ShapeColorOne = { "#b3daff" };
public string[] ShapeColorTwo = { "#80c1ff" };
public string[] ShapeColorThree = { "#1a90ff" };
public string[] ShapeColorFour = { "#005cb3" };
public List<Country> PerformanceReport = new List<Country> {
new Country { Name="India", Winner="3", Runner="2", City="India" },
new Country { Name="Dominican Rep.", Winner="3", Runner="2", City="West Indies" },
new Country { Name="Cuba", Winner="3", Runner="2", City="West Indies" },
new Country { Name="Jamaica", Winner="3", Runner="2", City="West Indies" },
new Country { Name="Haiti", Winner="3", Runner="2", City="West Indies" },
new Country { Name="Guyana", Winner="3", Runner="2", City="West Indies" },
new Country { Name="Suriname", Winner="3", Runner="2", City="West Indies" },
new Country { Name="Trinidad and Tobago", Winner="3", Runner="2", City="West Indies" },
new Country { Name="Sri Lanka", Winner="3", Runner="1", City="Sri Lanka" },
new Country { Name="United Kingdom", Winner="3", Runner="0", City="England" },
new Country { Name="Pakistan", Winner="2", Runner="1", City="Pakistan" },
new Country { Name="New Zealand", Winner="1", Runner="0", City="New Zealand" },
new Country { Name="Australia", Winner="7", Runner="5", City="Australia" }
};
public class Country
{
public string Name { get; set; }
public string Winner { get; set; }
public string Runner { get; set; }
public string City { get; set; }
}
}
<style>
.toolback {
width: 100px;
border-radius: 4px;
border: 1px #abb9c6;
background: rgba(53, 63, 76, 0.90);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.40);
padding-bottom: 5px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px
}
.listing1 {
font-size: 13px;
color: #cccccc
}
.listing2 {
font-size: 13px;
color: #ffffff;
font-weight: 500;
}
</style>
Changing duration in mobile devices
To change the duration of the tooltips on mobile devices, you can use the Duration property in the tooltip settings for features such as layers, markers, bubbles, polygons, and more. By default, this property is set to 2000 milliseconds. Setting the value to 0 will keep the tooltip visible indefinitely, removing it only on the next interaction. If it is greater than 0, the tooltip will be removed after the specified time.
In the following example, we demonstrate how to change the duration of the tooltip in mobile devices for layers in the Maps component.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
<MapsLayerTooltipSettings Visible="true" ValuePath="name" Fill="#D0D0D0" Duration="3000">
<MapsLayerTooltipTextStyle Color="green" FontFamily="Times New Roman" FontStyle="Normal"></MapsLayerTooltipTextStyle>
</MapsLayerTooltipSettings>
</MapsLayer>
</MapsLayers>
</SfMaps>