Angular Maps - Tutorial Videos

Learn how to create and configure the Syncfusion Angular Maps component using the Angular CLI tool and the Syncfusion EJ2 Angular Maps package. 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 Blazor 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. In this video, you will learn how to provide a visual representation of the map elements by enabling the legend. You can also enable data labels to display additional information or values associated with the map elements. Additionally, you can enable tooltips to provide further details about specific map elements when you hover over or interact with them.

Download Example: Getting Started with Angular Maps

Learn how easily you can display and customize bubbles in the Syncfusion Angular Maps component. This video shows a world map which displays bubbles that provide information about the top 10 countries with the highest number of internet users. To use the bubbles feature, inject the bubble module into the Maps component. Bubbles are enabled by setting the visible property of bubbleSettings to true. To add bubbles, bind the data source to the dataSource property of bubbleSettings and set the field name, that contains the numerical data, in the data source to the valuePath property. You have the flexibility to customize various aspects of the map elements, such as the fill color, opacity, animationDelay, animationDuration, and so on.

Download Example: Add and Customize Bubbles in Angular Maps

Learn how easily you can display and customize markers in the Syncfusion Angular Maps component. This video shows a world map that displays markers that provide information about the top 15 cities having the highest population. To use the markers feature, inject the Marker module into the Maps component. Markers are enabled by setting the visible property of markerSettings to true and binding the list data to the dataSource property. By default, the maps component displays markers based on latitudes and longitudes in the given data source. So, your data source must contain latitudes and longitudes. You can customize the marker using properties such as the 'border', 'dash array', 'fill', 'opacity', 'animation delay', 'animation duration', and more.

Download Example: Add and Customize Markers in Angular Maps

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.

Download Example: Add Legends to Angular Maps

Learn how easily you can display and customize marker clusters in the Syncfusion Angular Maps component. Maps provide support to cluster markers when they overlap. The number on a cluster indicates how many overlapped markers it contains. If zooming is performed on any of the cluster locations in the Maps control, the number on the cluster will decrease, and the individual markers will be seen on the map. When zooming out, the overlapping marker will increase so that it can cluster again and increase the count over the cluster. To enable clustering in markers, set the allowClustering property of markerClusterSettings to true; customization of clustering can be done with the markerClusterSettings.

Download Example: Customize Marker Clusters in Angular Maps

Learn how easily you can add a tooltip to Syncfusion Angular Maps and customize it with various built-in options. The tooltip displays details about a shape's value on mouse hover. Tooltips are also displayed for markers and bubbles on a map. On mouse over or a touch event, the tooltip is used to get more information about the layer, bubble, or marker. To enable tooltip in Maps, import the MapsTooltipService module from the angular maps package. And inject it into the Providers array of NG module. Then, enable the visible property in the tooltipSettings under the layers option to show the tooltips. The valuePath property in the tooltip takes the field name that presents in data source and displays that value as tooltip text. The tooltipDisplayMode property is used to change the display mode of the tooltip in Maps. The display modes of tooltip available in the Maps component are MouseMove, Click, and DoubleClick. By default, tooltipDisplayMode is set to MouseMove.

Download Example: Show Informative Tooltips in Angular Maps

Learn how easily you can add data labels to the Syncfusion Angular Maps component and customize it with various built-in options. To enable a data label, import the data label module from the Angular Maps package and inject it into the Maps component. Then, enable the visible property in the data label settings property of the Maps component. By default, labels are added based on the shapeDataPath property field value. And if you want to show some other field from the data source, add the label path property and assign that field. In this video, We displayed the country name as the label text, and it is already mapped to the shapeDataPath property. You can prevent labels from overlapping with each other or with other map regions by adding the smart label mode property. You can set values like none, hide, or trim. By default, none is set to the smart label mode property, so the text will overlap. To arrange the map labels within the map region, use the intersectionAction property. This property determines how labels behave when they intersect or overlap with each other.

Download Example: Customize Data Labels in Angular Maps

Learn how easily you can add an annotation to Syncfusion Angular Maps and customize it with various built-in options. Annotations are used to mark specific areas of interest on a Map with texts, shapes, or images. Any number of annotations can be added to the Maps component. To enable Annotations, import Maps component and Annotations module from the Syncfusion EJ2 Angular Maps package and inject the Annotations module into the Maps component. By using the content property of annotations, text content, id of an element, or an HTML string can be specified to render a new HTML element. Annotations can be placed anywhere in a Map by specifying pixel or percentage values to the x and y properties. They can be aligned using the horizontalAlignment and verticalAlignment properties. The possible values can be Center, Far, Near, and None. Multiple annotations can be added to a Map using the annotations property in an array, which can be customized.

Download Example: Add Annotations to Angular Maps