How to render an interactive United States county map
How to render an interactive United States county map?
The following user interactive features can be enabled in the rendered United States map.
- Highlight
- Selection
- Zooming
- Tooltip
- Interactive legend
Highlight
Each county in the US map can be highlighted, when hovering the cursor over the shapes. When enable property in highlightSettings is set to true, the shapes can be highlighted. To change the highlighted color, you can use the fill property in highlightSettings. color and width property in the border are used to customize the highlighted shape’s border.
import { usa, Highlight } from "./usa_map";
Maps.Inject(Highlight);
let maps: Maps = new Maps({
layers: [
{
shapeData: usa,
highlightSettings: {
enable: true,
fill: "green",
border: { color: "red", width: 2 }
}
}
]
});
maps.appendTo("#container");
The below screenshot shows the output of the above code snippet.
Sample link – Maps highlight
Selection
You can select and deselect the shape by tapping or clicking the mouse on the counties of the US map. When enable property in selectionSettings is set to true, the shapes can be selected. To change the selected color, you can use the fill property in selectionSettings. color and width property in the border are used to customize the selected border.
import { Maps, Selection } from "@syncfusion/ej2-maps";
import { usa } from "./usa_map";
Maps.Inject(Selection);
let maps: Maps = new Maps({
layers: [
{
shapeData: usa,
selectionSettings: {
enable: true,
fill: "green",
border: { color: "red", width: 2 }
}
}
]
});
maps.appendTo("#container");
The below screenshot shows the output of the above code snippet.
Sample link – Maps selection
Zooming
You can zoom in and out the map to show in-depth information. To enable the zooming, set true to the enable property in zoomSettings. Zooming can be done in the following ways.
- Single click zooming
- Double click zooming
- Toolbar zooming
- Rectangular zooming
- Mouse wheel zooming
- Pinch zooming
import { Maps, Zoom, DataLabel } from "@syncfusion/ej2-maps";
import { usa } from "./usa_map";
Maps.Inject(Zoom, DataLabel);
let maps: Maps = new Maps({
zoomSettings: {
enable: true
},
layers: [
{
shapeData: usa,
shapeSettings: {
autofill: true
},
dataLabelSettings: {
visible: true,
labelPath: "name"
}
}
]
});
maps.appendTo("#container");
The below screenshot shows the output of the above code snippet.
Sample link – Maps zooming
Tooltip
Tooltip can be enabled separately for layer by using the visible property in tooltipSettings. Bind the valuePath property field from the data source to show the tooltip text for layers. Below code snippet illustrates the tooltip enabled for the layer to show the name field.
import { Maps, MapsTooltip } from "@syncfusion/ej2-maps";
import { usa } from "./usa_map";
Maps.Inject(MapsTooltip);
let maps: Maps = new Maps({
layers: [
{
shapeData: usa,
tooltipSettings: {
visible: true,
valuePath: "name"
}
}
]
});
maps.appendTo("#container");
The below screenshot shows the output of the above code snippet,
Sample Link – Maps Tooltip
Interactive legend
The legends can be made interactive when the mouse hovers over the corresponding shapes with an arrow mark indicating the exact range color in the legend. You can enable this option by setting mode property in legendSettings value as “Interactive“.
import { Maps, Legend } from "@syncfusion/ej2-maps";
import { usa } from "./usa_map";
Maps.Inject(Legend);
let maps: Maps = new Maps({
legendSettings: {
visible: true,
mode: "Interactive"
},
layers: [
{
shapeData: usa,
shapeDataPath: "name",
shapePropertyPath: "name",
dataSource: [
{ name: "South Dakota", Color: "red" },
{ name: "Illinois", Color: "blue" },
{ name: "Utah", Color: "green" }
],
shapeSettings: {
colorValuePath: "Color"
}
}
]
});
maps.appendTo("#container");
Sample link - Maps interactive legend
