Configure layer style

Feedback

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; also 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:

  1. Select the target layer and click the "Properties" button on the right sidebar to enter the layer display level setting item.
  2. 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/vector tile layers added via web or data upload, you can customize the styles of point, line, polygon and text layers in the "Style" edit bar on the right sidebar, and configure the map style finely. It should be noted that the raster layer does not currently support modifying the layer style.

Point style

The following configuration items can be modified:

  1. Size: Adjust the size of point features.
  2.  Color: Change the color of point features.
  3. Opacity: Adjust the transparency of point features by moving the transparency slider to the left (decrease transparency) or right (increase transparency), or click the number next to the slider and enter a precise value.
  4. Blur: Adjust the halo blur of point features.
  5. Outline Color: Change the color of the outline (edge) of point features.
  6. Outline Width: Adjust the width of the outline (edge) of the point feature.

Line style

The following configuration items can be modified:

  1. Line Color: Change the color of line features.
  2. 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.
  3. Line Width: Change the width of the outline.
  4. Line Gap Width: Sets the width of the line feature endpoints.
  5. 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.
  6. 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.
  7. Line Cap: Set the endpoint style of the line feature, and you can choose different endpoint styles.
  8. Line Miter Limit: Set the connection tolerance of the oblique angle connection method.
  9. Line Round Limit: Set the connection tolerance of the fillet connection method.

Polygon style

The following configuration items can be modified:

  1. Polygon Color: Change the fill color of polygon features.
  2. 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.
  3. Anti-aliasing: Sets the edge smoothing effect of polygon features.
  4. Outline Color: Change the color of polygon feature outlines (edges).

3D style

Extend the 2D polygon features based on the height to get a 3D layer, then you can apply the 3D style to display the shape of the objects in a 3D way.

The steps to create a 3D layer and set the styles are as follows:

Click the icon next to the vector polygon layer name and select "Create as 3D" to create a 3D layer. After creation, you can customize the style of the 3D layer by setting the following configuration items:

  1. Bottom Height: Sets the height of the feature from the bottom plane.
  2. Height: Specify the height field.
  3. Color: Set the fill color of the feature.

After setting, you can click the right mouse button and drag the map to adjust the tilt angle of the map to browse the map.

Text style

For text layers contained in layers added as vector tiles, you can modify the text and icon styles in the layer:

Text rendering

  1. Text Color: Change the color of text features.
  2. Text Opacity: Change the opacity of text features.
  3. Halo Color: Sets the color of the text halo style.
  4. Halo Blur: Sets the blur of the text halo style.
  5. Translate: Set the offset of the text feature in the X-axis and Y-axis directions.
  6. Translate Anchor: Specifies the relative offset object for text features based on the map or viewing perspective.

Icon rendering

  1. Icon Fill Color: Change the color of icon features.
  2. Icon Opacity: Change the opacity of icon features.
  3. Translate: Set the offset of the icon features in the X-axis and Y-axis directions.
  4. Translate Anchor: Specifies the relative offset object for icon features based on the map or viewing perspective.

Text layout

  1. Text Size: Change the size of the text feature.
  2. Family: Change the font of the text feature.
  3. Line Height: Set the line height of the text feature.
  4. Max Width: Set the maximum width of the text.
  5. Rotation Angle: Set the rotation angle of the text.
  6. Placement: Set the placement of the text.
  7. Text justify: Set the alignment of the text, you can choose center, left, or right.
  8. Text Anchor: Set the anchor position for text layout.
  9. Text Transform: Set the case conversion item of the text, support all uppercase, all lowercase and not open this item.
  10. Allow Overlay: Select whether to allow text overlay.
  11. Ignore Placement: Select whether to ignore text position.

Icon layout

  1. Icon Style: Change the style of the icon, you can choose a suitable icon style from the icon library.
  2. Icon Size: Change the size of the icon.
  3. Icon layout anchor: Set the anchor position of icon layout.
  4. Rotation Angle: Set the rotation angle of the icon.

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:

  1. Select a layer, click "Style" in the right sidebar.
  2. Set the filter match way, including: "each filter matches", "any filter matches", "no filter matches".
  3. Add or modify filter conditions. Click Add Condition, and specify filter fields, operations, and values from top to bottom. For connected vector tile services and map services, some layers already contain filter conditions, which you can modify or recreate new filter conditions.

Making thematic map

To visualize an attribute in a layer, you can use the thematic map function. After selecting a layer, click "Thematic Map" on the right to start creating the thematic layer. First select the thematic field, that is, the attributes that need to be displayed on the map, then select the appropriate thematic map scheme for the layer, and click "OK" to complete the creation of the thematic map. The thematic layer will be displayed in the layer list as a new layer. Select the thematic layer and change the style in the thematic map panel on the right. When the change is made, the features will immediately respond to the new style.

Unique values map

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.

Operations to modify the style of the unique values thematic map:

  1. MapStudio assigns a default style to the thematic map you create. You can click to modify the shape, size, transparency, and color scheme of all symbols uniformly in the pop-up box.
  2. You can also modify the style of a category individually, click any symbol under the style column to modify it in the pop-up box.
  3. You can also modify the style of a category individually, click any symbol under the style column to modify it in the pop-up box. 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 with the default style. If you do not want some categories to use the default style, you can click "+" to move the category in the default style list to the custom list, and assign a style to it individually.
  4. Click the symbol to the right of "Default Style" to modify the default style.

Ranges map

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.

Operations to modify the style of the ranges map:

  1. Select the thematic map layer, click "Thematic Map" on the right, and modify the style in the panel.
  2.  By default, the equal interval classification method is used to divide the thematic value into 6 ranges. You can modify the method and the number of ranges (2-15). Supported classification methods are equal interval, natural break, square root, standard deviation, logarithmic, and custom range.
  3. To modify the style of the ranges map, click to modify the styles of all ranges uniformly in the pop-up box.
  4. To modify the style of a range individually, click any symbol under the style column and modify it in the pop-up box.

Heat map

A heat map describes population distribution, density, and changing trends through color distribution. Currently, only layers added via upload data in MapStudio support making heat maps.

Operations to modify the style of the heat map:

  1. Select the heat map layer, click "Thematic Map" on the right, and modify the heat map style in the panel, including hotspot radius, opacity, etc.
  2. Weights are not used by default. To perform weighted rendering based on attributes, specify a weight field.
  3. Choose a color scheme. MapStudio has a variety of built-in gradient color schemes for use, and you can click "Custom" to modify the color scheme.
  4. Set the hotspot radius, the default is 10, if you need to make the map display smoother, you can increase the hotspot radius.
  5. Set the opacity of the thermal layer display.