Example of Legend in Javascript Maps Control


This sample visualizes grouping of countries in the legend based on their population density. The type and position of the legend can be changed using the Type and Position options in the properties panel.

More Details...

Legend mode
Legend position
Show legend for remaining data source items
Show population density when the legend item is toggled

In this example, you can see how to render a legend in maps. A legend item denotes the value of a shape. Any number of legend items can be added to a legend. You can bind the desired colors to the shapes if its values are within the specified range using the ColorMapping property. You can also show or hide the legend items for the remaining items in the data source; they are not categorized in any color mapping. You can also show or hide color mapping related to population density while toggling the legend item Tooltip is enabled in this example. To see the tooltip in action, hover the mouse over a shape or tap a shape in touch enabled devices. Injecting Module The maps component features are segregated into individual modules by feature. To use a legend, inject the Legend module using the Maps.Inject(Legend) method. More information on markers can be found in this documentation section.