How to Add Legends to the Angular Maps Component

Learn how easily you can add a legend to Syncfusion Angular Maps and customize it with various built-in options. To enable legends, import the legend service from the Angular Maps package and inject it into the providers array of NG module. Then, enable the visible property in the legend settings property of the Maps component.

By default, legends are positioned at the bottom of the map. If you want to change the legend's position, you can utilize absolute or dock positioning. With absolute positioning, you have the flexibility to change the legend's 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 simply change the position to the left, right, or top using the position property. You can align the legend with center, far, and near using alignment property.

The legend icon is circular, by default. However, the legend also supports other shapes such as rectangle, triangle, diamond, cross, and more. The legend has two modes: Default and Interactive. In the default mode, legends have symbols and a label to identify the shape, bubble, or marker. Legends can be made interactive with an arrow mark indicating the exact range color when the mouse hovers over the corresponding shapes.

Using the Maps component, you can visualize the Earth's surface and display static or interactive regions, zones, boundaries, or any geographic area on the land. The Syncfusion Angular Maps component offers a rich set of features, including markers, navigation lines, bubbles, zooming, panning, and drill-down functionality, allowing you to explore interactive zones with ease.

Download an example from GitHub: https://github.com/SyncfusionExamples...

Refer to the following legend documentation on the Syncfusion Angular Maps component: https://ej2.syncfusion.com/angular/do...

Check out this online example of the Angular Maps component with Legends: https://ej2.syncfusion.com/angular/de...

Watch the following video to get started with the Angular Maps component:    • Getting Started with the Angular Maps...  

TRIAL LICENSE KEY
----------
If you need a trial license key, start an Angular trial from your Syncfusion account and then obtain a trial license key from the downloads page: https://www.syncfusion.com/account/ma....

Check if you are eligible for a free license for all Essential Studio products on our Community License page: https://www.syncfusion.com/products/c....

BOOKMARK DETAILS
--------------
[00:00] Introduction
[01:32] Enable legends
[02:27] Position the legend
[03:16] Align the legend
[03:42] Customize the legend shapes
[04:27] Toggle the legend
[05:46] Exclude a legend item from Angular Maps
[06:14] Binding legend visibility and color from database
[06:57] Change the legend mode

ANGULAR MAPS
------------------
Product overview: https://www.syncfusion.com/angular-co...
Documentation: https://ej2.syncfusion.com/angular/do... Online examples: https://ej2.syncfusion.com/angular/de... Download free trial: https://www.syncfusion.com/downloads/...
npmjs package: https://www.npmjs.com/package/@syncfu...

SUBSCRIBE
----------
Syncfusion on YouTube:    / syncfusioninc   Sign up to receive email updates: https://www.syncfusion.com/account/em...

SOCIAL COMMUNITIES
-------------
Facebook:   / syncfusion  
Twitter:   / syncfusion  
LinkedIn:   / syncfusion  
Instagram:   / syncfusionofficial  

#angular #maps #map