User Tools

Site Tools


map_suite_webapi_labeling

Map Suite WebAPI Labeling

Video Overview

Introduction

In this sample, we show the flexibility of MapSuite WebAPI Edition in labeling parcels, streets, and points of interest. Everything from the number of labels displayed on the screen to the size and color of the labels is customizable. We even show you how to implement your own custom style with our extensible API so you can draw labels exactly how you need them.

Labeling

Label Styling

The Label Styling example has parcels, streets, and POIs to show how all the labeling features work together to create a comprehensive map. The Map Suite Core class “TextStyle” applies to all feature types – points, lines, and polygons.

Select “Label Styling” from the Show Layers menu. From the Settings menu option, we can customize the style. “Apply Outline Color” creates an outline around the label text so it is more visible. “Apply Background Mask” displays a background behind the POI labels so that they stand out. When “Labels Overlapping Each Other” is selected, labels that would be hidden because they intersect with other labels are displayed. “Grid Size” chops up the display area into cells behind the scenes and only displays one label per cell. If the grid size is small, many labels are displayed; if “Grid Size” is “Large,” few labels will be shown. Change “Duplicate Rule” to “Unlimited Duplicate Labels” and roads can then be labeled multiple times. For example, the road “Mall Ring” will have multiple labels. “Drawing Margin Percentage” changes the maximum length of some labels. For example, change it to “15” and see that “Nordstrom’s In-House Café and Coffee Bar” is truncated. Set this parameter to a value greater than “100” to reduce the chance that the label is truncated. A value of “200” or “300” is usually best.

Labeling Points

This example shows how you can control the placement of POI labels to create a clearly labeled map.

Select the next layer style from the Show Layers menu, “Labeling Points.” From the Style Setting menu, it is possible to modify the location of the label to any one of 9 Placements with customizable X and Y Offsets.

Labeling Lines

This sample demonstrates the importance of splining. Streets and rivers don’t always follow a straight path. Use splining so that the label follows the curves and zig-zags of the feature.

Click on the “Labeling Lines” sample. Under the setting “Spline Type,” it’s possible to choose “None,” “StandardSplining,” and “ForceSplining.” When “None” is selected, labels are only displayed in a straight line. This mode has the best performance. “StandardSplining” shows labels that curve with the road and those that can also be displayed without splining. Standard Splining generally looks the best. “ForceSplining” forces the label to be displayed using splining. Usually this is used for Asian languages like Chinese or Japanese. The setting, “Line Segment Ratio” is the maximum ratio of the label to the length of the street required for the label to display. At the default setting of “0.9,” labels that are 90% of the road length or less will be displayed.

Labeling Polygons

This sample shows some of the polygon-based labeling features, like only showing labels that can fit inside their polygon.

If “Only display labels that fit within a polygon” is selected, only labels that fit inside their polygon are displayed by using the FittingPolygon property. Not all labels that fit inside their polygon are displayed because there are other reasons why labels are hidden. It is also possible to use the FittingPolygonFactor property to set which labels will be displayed based upon their size in relation to the size of the polygon. The setting “Label All Polygon Parts” will label all the parts making up a polygon-based feature.

Custom Labeling

If you don’t like our built-in labeling styles, that’s not a problem. Map Suite is extensible, so you can create your own custom labeling class! In this example, we created a custom class in order to have a minimum and maximum label text size.

Client-Side Code

The div “panel-header” is where the layer list is held that displays when the Layer button in the menu on the top-left of the page is clicked. Div “edit-panel” holds the label styling settings that are dynamically added to the dialog based upon which layer style has been chosen, which is done in jQuery starting at line 138 in the Leaflet example. OpenLayers can also be used to create the map. The jQuery at line 175 saves the label styling settings and calls Leaflet to redraw the map. In the function beginning on line 230, jQuery is used to call Leaflet to redraw the map when a layer style is selected from the menu.

Server-Side Code

CustomTextStyle

We inherit the Map Suite Core class TextStyle in our CustomTextStyle class so we can then override DrawCore to draw our own custom style. The properties MinFontSize and MaxFontSize do not exist in TextStyle, so we created the custom style in order to provide the ability to limit the font size of labels. If you wanted to create a custom splining style, for example, you could override DrawCore to add this functionality.

Read more about the Map Suite Core TextStyle class at http://wiki.thinkgeo.com/wiki/ThinkGeo.MapSuite.Core.TextStyle.

WebAPI Labeling Controller

The Route Prefix of LabelingController is “label.” Functions “GetStyle” and “GetLabelingOverlay” check to see what label style is selected and then returns the style or overlay from OverlayBuilder. “GetBaseMapTile” draws the tiles on the screen with features that can be labeled and “GetDynamicLayerTile” draws the labeling overlay with the selected style.

Overlay Builder

OverlayBuilder creates the styles and overlays requested by the controller. “GetOverlayAsBaseMap” creates the LayerOverlay used to show the parcels, POIs, and streets on the map. If we look at the definitions of the labeling attributes in the “GetOverlay” functions, we see that they are inherited from the MapSuite Core TextStyle and PositionStyle classes. For example, “SplineType” in the function “GetOverlayWithLabelingLine” comes from the MapSuite Core TextStyle class.

Because this is a REST-based WebAPI Controller, the saved label style is written to a local JSON file instead of using the session state.

map_suite_webapi_labeling.txt · Last modified: 2015/12/03 09:35 by tgwikiupdate