Map Legends in MAUI

Since the official MAUI release in May, we've been working to incorporate some of your most requested features into the new MAUI component. One of the top requests has been the ability to display a legend alongside your map. Starting today, you can use the new legend feature in the 14.2 beta branch, with the full 14.2 release expected later this fall.

In this post, we'll guide you through a hands-on example of adding a legend to your map to showcase class breaks. Keep reading to explore how this new feature enhances your mapping experience.

Tip

To see the new legend in action, just clone the MAUI HowDoI samples, run the solution and then click on the ‘Render Based on ClassBreaks’ sample in the menu.

Sample Overview

The ClassBreak 'HowDoI' sample using a legend to classify housing unit counts.

The "Render Based on ClassBreaks" sample uses a shapefile of housing unit polygons and applies a ClassBreakStyle to create a color-coded map that illustrates housing density and the number of housing units in Frisco, TX. As shown in the screenshot, areas with higher housing unit densities are shaded in darker red, while areas with fewer housing units are shaded in lighter red.

While ClassBreak styles are useful for map styling, today's article will focus on the legend located in the bottom right corner of the screenshot. Continue reading as we walk through the sample code demonstrating how to use the LegendAdornmentLayer.

Explore Later

To learn more about ThinkGeo styles and how they can be used to improve your maps, take a look at the ThinkGeo Styles post.

Code Walkthrough

You can add a legend to your map in 2 simple steps:

Step 1 - Create a new LegendAdornmentLayer and set the title to ‘Housing Units’ and set the location of the legend to the lower right of the screen. The code below initializes a default legend, but if you need it customized, there are many other properties that you can set such as Width, Height, BackgroundMask, etc.

After the layer is initialized, it also needs to be added to the Map’s AdornmentOverlay.

  
        // Create the legend adornment layer and set the title and location.
        var legend = new LegendAdornmentLayer
        {
            // Set up the legend adornment
            Title = new LegendItem
            {
                TextStyle = new TextStyle("Housing Units", new GeoFont("Verdana", 10, DrawingFontStyles.Bold),
                    GeoBrushes.Black)
            },
            Location = AdornmentLocation.LowerRight
        };

        // Add the new adornment layer to the Overlay.
        MapView.AdornmentOverlay.Layers.Add(legend);
  

Step 2 - While iterating through your class break intervals, create a new LegendItem for each class break and add it to the LegendAdornmentLayer.

  

        // Create ClassBreaks for each of the classBreakIntervals
        for (var i = 0; i < classBreakIntervals.Length; i++)
        {
            // Create the classBreak using one of the intervals and colors defined above
            var classBreak = new ClassBreak(classBreakIntervals[i],
                AreaStyle.CreateSimpleAreaStyle(new GeoColor(192, colors[i]), GeoColors.White));

            // Add the classBreak to the housingUnitsStyle ClassBreaks collection
            housingUnitsStyle.ClassBreaks.Add(classBreak);
            
            // Add a LegendItem to the legend adornment to represent the classBreak
            var legendItem = new LegendItem
            {
                ImageStyle = classBreak.DefaultAreaStyle,
                TextStyle = new TextStyle($">{classBreak.Value} units", new GeoFont("Verdana", 10),
                    GeoBrushes.Black)
            };
            legend.LegendItems.Add(legendItem);
            
        }
  

While the example above shows the legend being created with the class breaks, in other scenarios your legend may have a set number of legend items based on hard-coded styles. In that case, you can still create LegendItems and add them to the legend directly.

Summary

We hope today’s post has been helpful. If you have any questions or if you have a topic you would like to learn more about, please email sales@thinkgeo.com or schedule a meeting to talk in person.

About ThinkGeo

We are a GIS software company founded in 2004 and located in Frisco, TX. Our clients are in more than 40 industries including agriculture, energy, transportation, government, engineering, IT, and defense. We pride ourselves on our excellent service and transparency. ThinkGeo offers a variety of products and services to meet almost any GIS application need. We can even help you develop your next project - anywhere from a few hours of consulting to outsourcing an entire project. To learn more, email us at sales@thinkgeo.com, or call us direct at 1-214-449-0330.