Welcome to the React Maps
tutorial. In this video I will show you
how to add legends to the Synfusion React Maps component. Look at this example, a world
map displaying COVID statistics for each country with severity
levels. These severity levels are
depicted at the bottom of the map as a legend. Now let's start by adding code
to add legends to React Maps. First I'll open an existing
application where I have already added the React Maps component
with basic properties. I have included a GeoJSON
shape
of the world map. In the maps layer I have bound
COVID statistics data with an appropriate title. I also applied custom fill
colors for the map and its elements based on the severity
levels. To learn more about integrating
the Maps component into a React application, please check the
getting started video linked in the card above and the
description below. Let me run the application using
the command npm start. Here the React Map renders based on
the GeoJSON data displaying COVID statistic
s for each
country. Let's go through the steps to
add and customize legends in the React Maps. First I import the Legend module
and Inject class from the ej2 react maps package and inject
Legend module into the services. Then inside the Maps component
tag, add the legendSettings object and enable the visible
property. See, a legend is displayed. By default, a legend will be
positioned at the bottom of the map. If you want to change the legend
position, utilize absolute positioning or dock positi
oning
options. With absolute positioning, you
can change the legend position based on coordinates using the
location property and the position value must be set to
float. Alternatively you can use dock
positioning where you change the position to the left, right or
top. I want to place the legend on
the right side of the map. To achieve this I set the
position property to Right. Now the legend is on the
right. Next to align the legend I need
to add the alignment property in the legendSettings. T
his property accepts three
options, Center, Far and Near. Now, to align the legend to the
far side, I set the alignment property to Far. Look at the map, the legend is
at the far side. Next, I'm going to demonstrate
how to change the shape of the legend icon. By default, the legend icon is
circular. However, it also supports other
shapes such as rectangles, triangles, diamonds, crosses,
etc. To modify the legend icon to a
rectangle, I add the shape property and set its value to
Rectangle. To adj
ust the dimensions, I add
additional properties such as shapeHeight and shapeWidth
with custom values. I also change the position to
Top and the alignment to Center for better clarity. You will notice that the legend
icons are rectangular with custom height and width. If you want to show or hide A
particular map region when clicking the legend, add the
toggleLegendSettings property and set the enable property to
true. Now you can show or hide the
specific region by clicking its corresponding leg
end. Next, let's see how to customize
the map region by clicking on a legend. I will customize the border
width and color by adding the border property and setting the
width to 2 and the color to red. Then I add the applyShape
Settings property and set its value to false to prevent
applying the default fill color. When you click the legend for
high severity level, you will notice that the corresponding
shapes on the map are customized and the custom border width and
color are displayed. See The
map displays information
about all severity levels present in the data source. However, if you wish to skip or
hide specific severity levels, use the showLegend property
within the colorMapping property. Here I'm going to skip the
moderate severity level, so I disable the showLegend
property. Now the legend only shows
information on high and low severity levels. Next, I will demonstrate how to
hide A severity level and customize color based on the
data source value. To achieve this, I have alrea
dy
defined two fields in the data source, LegendVisibility and
ShapeColor. I assign the ShapeColor to the
colorValuePath property and the LegendVisibility to the
showLegendPath property. Since I have mapped color from
the data source, I comment out the colorMapping property. Upon checking the map, you will
observe that legends are displayed based on the data
source. Finally, let's look at the
interactive legend mode. In the default mode, legends
have a symbol and a label to identify the shape bu
bble or
marker. To change the default mode to
interactive mode, I set the mode property to Interactive. Looking here, when I hover over
the map region, the pointer will be displayed in the legend. In this video I have shown you
how to add legends to the React Maps component and how to change
the legend mode, position, alignment and shape. If you want to try out the
example used in this video, you can download it from the GitHub
link in the description below. I have also shared a link where
you c
an learn about obtaining a free license key to use our
React suite through our community license if you are
eligible. Thank you for watching this
video. If you found it helpful, please
give it a like and subscribe to our channel.
Comments