MapStudio WebApp is a powerful map editor, providing a wealth of style configuration items, to help you customize map styles flexibly and make more exquisite maps. Specifically, MapStudio WebApp supports setting the zoom display level of layers, to present the best visual effects for browsing the map. Supports customizing layer styles, to create delicate maps. And supports filtering layer elements to accurately and concisely convey map information.
Set layer display level
By setting the display level range of the layer, the layer can be displayed in a certain level range, and the layer under other levels will be automatically hidden. The specific operations are as follows:
- Select the target layer and click the "Properties" button on the right sidebar to enter the layer display level setting item.
- Drag the white solid round point at both ends of the slider to set the maximum and minimum display levels of the layer. The supported level ranges from 0 to 24. Among them, the position of the hollow point on the slider represents the current display level of the layer.
Define layer styles
For vector tile layers added via web or layers added via data upload, you can customize the styles of point, line,and polygon layers in the "Style" panel on the right sidebar.
Point layer
Map Studio provides three rendering styles for point layers, namely basic style, heat map style, and aggregation style. Among them, the heatmap and aggregation map styles are only available for point layers generated with structured data.
Basic style
The basic style allows you to define the icon style of point elements, overlay text labels, and set the text style and layout.
Icon style
- Icon paint
- Style: Set the icon shape.
- Size: Set the icon size.
- Color: Set the icon color.
- Opacity: Set the icon opacity.
- Icon layout
- Icon anchor: Set the anchor position of icon layout.
- Rotation angle: Set the rotation angle of the icon.
- Allow overlap:Whether to allow icon overlapping.
- Ignore placement: Whether to ignore text position.
- Translate: Set the offset of the icon features in the X-axis and Y-axis directions.
- Translate anchor: Specify the relative offset object for icon features based on the map or viewing perspective.
Text style
You can choose a field to display texts on the point layer.
- Text paint
- Text color: Change the color of text features.
- Text opacity: Change the opacity of text features.
- Halo color: Set the color of the text halo style.
- Halo width: Set the width of the text halo style.
- Halo blur: Set the blur of the text halo style.
- Text layout
- Text Size: Change the size of the text feature.
- Text letter spacing: Set the font spacing between characters.
- Family: Change the font of the text feature.
- Line height: Set the line height of the text feature.
- Max width: Set the maximum width of the text.
- Rotation angle: Set the rotation angle of the text.
- Placement: Set the placement of the text.
- Text justify: Set the alignment of the text, you can choose center, left, or right.
- Text anchor: Set the anchor position for text layout.
- Text transform: Set the case conversion item of the text, support all uppercase, all lowercase and not open this item.
- Allow overlay: Select whether to allow text overlay.
- Ignore placement: Select whether to ignore text position.
- Translate: Set the offset of the text feature in the X-axis and Y-axis directions.
- Translate anchor: Specifies the relative offset object for text features based on the map or viewing perspective.
Heat map style
A heat map describes population distribution, density, and changing trends through color distribution.
You can customize the heatmap style by modifying the following configuration items:
- Weight field: The weight is not used by default. If you want to perform weighted rendering based on the attribute field, you can specify the weight field.
- Color scheme: Map Studio provides a variety of gradient color ramps for use, click Customize to modify the color scheme.
- Hotspot radius: The default is 10. Increasing the radius value can make the heatmap display smoother.
- Opacity: Set the opacity of the heat map layer.
Aggregate map style
An aggregation map is to gather scattered point elements in a certain area into a symbol by an aggregation method. When there are too many point elements, it can effectively improve the legibility of the map and improve the efficiency of map rendering.
You can customize the style of an aggregation map by setting aggregation parameters, point icon style, and label text style. Among them, for the detailed introduction of point icon style and label text setting items, please refer to: Basic Style.
Aggregation parameters
- Weight Field: Select the weight field for aggregation. Only numeric fields are supported.
- Aggregation method: When the weight field is not set, the aggregation method uses count (COUNT) by default and cannot be modified, that is, the aggregation result is displayed by the number of point elements in each aggregation unit. If the weight field is set, it can calculate the sum value ( SUM), the average value (AVG), the maximum value (MAX), the minimum value (MIN), count the number (COUNT) based on the field, and the calculated value is displayed as an aggregated result.
- Aggregate cell size: Set the size of the aggregated cells, that is, the aggregated range, the default is 500 pixels. The larger the value of the aggregation unit size, the more point features are allocated to each aggregation unit; conversely, the fewer points are allocated to each aggregation unit.
Line layer
Outline
- Line Color: Change the color of line features.
- Line Opacity: Adjust the transparency of the line features by moving the transparency slider left (less transparency) or right (more transparency), or by clicking the number next to the slider and entering a precise value.
- Line Width: Change the width of the outline.
- Line Gap Width: Sets the width of the line feature endpoints.
- Line Dash Array: Supports setting the dashed line interval in the form of an array, and customizes the dashed line style. For example, if you enter 1, 2, it means that the length of the dotted line is 1 unit, and the interval between the dotted lines is 2 units.
- Line Join: Set the connection method between line elements, and you can choose different connection methods: right-angle connection, rounded connection and inclined angle connection.
- Line Cap: Set the endpoint style of the line feature, and you can choose different endpoint styles.
- Line Miter Limit: Set the connection tolerance of the oblique angle connection method.
- Line Round Limit: Set the connection tolerance of the fillet connection method.
- Offset:Sets the distance of the line element offset to the right of the line. The value can be non-negative, in pixel and the value > 0.
-
Translate: Set the distance of the line element offset in the X and Y directionsm the unit is pixel. When the distance > 0, the line element to be offset to the right in the X direction and down in the Y direction.
-
Translate anchor: Set the anchor when line elements are offset, the anchor contains Map and Viewport.
Label
The line layer supports adding icons and text-shaped labels. For specific settings, please refer to: Basic Style.
Polygon layer
Fill and Outline
- Polygon Color: Change the fill color of polygon features.
- Polygon Opacity: Change the transparency of the fill color of polygon features by moving the transparency slider left (less transparency) or right (more transparency), or by clicking the number next to the slider and entering a precise value.
- Anti-aliasing: Sets the edge smoothing effect of polygon features.
- Outline Color: Change the color of polygon feature outlines (edges).
3D style
The polygon layer supports turning on the 3D effect. By setting the height field, the polygons on the layer can be stretched to present a three-dimensional effect and display the shape of the ground objects more realistically. You can right-click and drag the map to adjust the map's tilt angle to browse the 3D map.
The 3D effect includes the following settings:
- Stretch height: Set the stretch field of the polygon feature, which will be stretched based on the value of this field to achieve a 3D effect. You can also set a numeric value as the stretch height.
- Stretch heightmultiple: Sets the multiplier of the height of the polygon feature from the bottom plane.
- Base height: Set the height of the feature from the bottom plane.
- Base heightmultiple: Set the multiplier of the height of the polygon feature from the bottom plane.
- Translate: Set the offset of the polygon feature in the X-axis and Y-axis directions.
- Translate anchor: Specify the relative offset object for polygon features based on the map or viewing perspective.
- Vertical gradient: Whether to apply a vertical gradient on both sides of the fill extrusion layer. When enabled, the further down, the darker the color on both sides.
Label
The polygon layer supports adding icons and text-shaped labels. For specific settings, please refer to: Basic Style.
Data-driven mapping
MapStudio incorporates a data-driven mapping method in the basic style. It can assign distinct styles, such as colors, sizes, transparency, text, and other styles, to data values returned from a field in a layer, to represent multi-dimensional attributes with just a single data. In the styles panel, all the styles with the 
icon support data-driven mapping.
Here we'll take the style of the point layer as an example to show you how to perform data-driven mapping:
- Click the icon to open the attribute-based style panel.
- Select the data attribute to be expressed on the map.
- Select the rendering method, unique values rendering, or rang rendering.
Unique values rendering
A unique values thematic map is to group features with the same thematic value into one category, and set a rendering style, such as color, for each category. The unique values thematic map is applicable for geological maps, landform maps, vegetation maps, land use maps, political and administrative division maps, natural division maps, economic division maps, etc.
When data-driven is enabled, the unique valuess rendering mode is used by default. If the field type is numeric, MapStudio will automatically interpolate vaules based on the maximum and minimum values of the data to construct a linear function, and then style other values in the data based on the linear function. You can manually modify interpolation points and styles, or click "+" to add interpolation points. After modification, the linear function will be recalculated.
You can also use custom relationships to manually style each category separately. In the custom relationship, when the number of categories exceeds 100, only the first 100 categories in the data are assigned different styles by default, and the categories that exceed the number are uniformly rendered in the default style. If you do not want some categories to use the default style, you can click "+" to move the categories in the default style list to the custom list and specify a style for them separately. Click the symbol on the right of "Default Style" to modify the default style.
Ranges rendering
The ranges thematic map is generally used to reflect the quantity or degree characteristics of continuous distribution phenomena, such as the distribution of precipitation, the distribution of soil erosion intensity, etc. Features are classified into different ranges according to their thematic values and the classification method; in each range, they are displayed with the same color. Note that the thematic field must be of numeric type.
Range mode: The equal interval classification method is used by default to divide the thematic value into 6 ranges. You can switch the range method and reset the number of ranges as required. Supported classification methods are equal interval, natural break, square root, standard deviation, logarithmic, and custom range.
Range number: it can be divided into 2-15 ranges by default. You can change the range number.
Range style: MapStudio has assigned a default style to the range field you selected. You can modify the style of a range separately, click any symbol under the style column, and modify it in the pop-up box.
Filter layer features
After you set filter criteria for a layer, features that match the filter criteria will appear in the layer. The specific operations are as follows:
- Select a layer, click "Filter" in the right sidebar.
- Click 'Add filter' to add and set the filter expression. Specify filter fields, operations, and values in proper order. For examples, to filter feature which 'id'='100', you can specify 'id' for field, '==' for operation and '100' for value. The filter operations include:
Table 1 Description of filter operations
|
Filter operation
|
Description |
|
==
|
Equality
|
|
!=
|
Inequality
|
|
in
|
Inclusion
|
|
!in
|
Exclusion
|
|
has
|
Does not exist
|
|
!has
|
Exists
|
|
>
|
Greater than
|
|
>=
|
Greater than or equal
|
|
<
|
Less than
|
|
<=
|
Less than or equal
|
- After the filter expression setting has completed, set the filter match way, including: "every filter matches", "any filter matches", "no filter matches".
- For connected vector tile services and map services, some layers already contain filter conditions, which you can modify or recreate new filter conditions.