Dynamic Rendering and Labeling in MAUI

Dynamic Label Rotation

Today is the 3rd post in a series of new ThinkGeo MAUI features. Previous posts detailed the new Quickstart Guide and Debugging Tips as well as Animations.

In today’s post, we’ll learn how the map utilizes native MAUI GraphicsView rendering to produce buttery smooth rendering like the label rotation shown here.

Dynamic Rendering and Labeling

To see this dynamic rendering and labeling in action, just clone the HowDoI samples here and check out the following samples:

• Vehicle Navigation - in this sample, dynamic rendering is used to draw green line smoothly.

• Render Labels - this sample shows how the map can be seamlessly rotated and zoomed and the labels are dynamically drawn right-side-up without any delay.

All of this is done by leveraging the .NET MAUI GraphicsView class. We will dig deeper into the code below and show how the GraphicsViewOverlay and LayerNonRotationGraphicsViewOverlay uses this class in the samples mentioned above.

Dynamic Labeling Code Sample

In the example below, we demonstrate how to set the map’s IsRotationEnabled property to true and then add our Hotels layer point data and TextStyle to a LayerNonRotationGraphicsViewOverlay, and that’s it! After executing the code below, your labels will be dynamic and stay readable as the rest of the map rotates.

  
        //First, the MapView's IsRotationEnabled needs to be set to true so the map can rotate freely.
        MapView.IsRotationEnabled = true;

        // Now just use the LayerNonRotationalGraphicsViewOverlay class just like a regular LayerOverlay
        // and add any layers styled with regular TextStyle and they will rotate automatically.
        _dynamicLabelOverlay = new LayerNonRotationGraphicsViewOverlay();
        await _dynamicLabelOverlay.OpenAsync(MapView);

        // load the hotels shapefile data and reproject it to the basemap's 3857 srid.
        _hotelsLabelLayer = new ShapeFileFeatureLayer(Path.Combine(FileSystem.Current.AppDataDirectory, "Data", "Shapefile", "Hotels.shp"));
        _hotelsLabelLayer.FeatureSource.ProjectionConverter = new ProjectionConverter(2276, 3857);

        //Use a standard TextStyle to style the hotel labels.
        var textStyle = new TextStyle("NAME", new GeoFont("Segoe UI", 12, DrawingFontStyles.Bold),
            GeoBrushes.DarkRed)
        {
            TextPlacement = TextPlacement.Center,
            HaloPen = new GeoPen(GeoBrushes.White, 2),
            DrawingLevel = DrawingLevel.LabelLevel,
            AllowLineCarriage = true,
            YOffsetInPixel = -10
        };
        var pointStyle = new PointStyle(PointSymbolType.Circle, 4, GeoBrushes.Brown,
            new GeoPen(GeoBrushes.DarkRed, 2));

        _hotelsLabelLayer.ZoomLevelSet.ZoomLevel01.CustomStyles.Add(pointStyle);
        _hotelsLabelLayer.ZoomLevelSet.ZoomLevel01.CustomStyles.Add(textStyle);
        _hotelsLabelLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;

        // Add the hotels layer to the dynamic overlay.
        _dynamicLabelOverlay.Layers.Add(_hotelsLabelLayer);

        // Add overlay to map
        MapView.Overlays.Add(_dynamicLabelOverlay);    
  

Check Back Soon

Check back soon as we are close to the 14.1 release with support for raster and vector MBTiles!

If you have any additional questions on ThinkGeo UI for .NET MAUI, 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.