Example of Osm With Legend in Angular Maps Component

undefined
TokyoDelhiShanghaiSao PauloMexico CityCairo DhakaMumbaiBeijingOsaka
Image Not Found
Image Not Found
Image Not Found
Image Not Found
Image Not Found
Image Not Found
Image Not Found
Image Not Found
Image Not Found
Image Not Found
Image Not Found
Image Not Found
Top 10 populated cities in the World

This sample illustrates the world's top 10 most populated cities by displaying markers in their locations and legend with the city names.

In this example, you can see how to display markers and a legend on the OpenStreetMap. To enable the legend, set the visible property in legendSettings to true, and then use properties like title, position, type, height, width, and so on to customize the legend.

Injecting Module

The maps component features are segregated into individual modules by feature. To use markers and a legend, inject the Marker module and Legend using the Maps.Inject(Marker) and Maps.Inject(Legend) methods respectively.