Design Surfaces

Styles & Popups

Design surfaces in SiteView carry styling information from their source files. KML files preserve line colours, widths, and polygon fills. DXF files use their layer colour definitions. SiteView extracts these styles during upload and renders them on the CesiumJS globe — and you can override them at any time using the layer controls.


KML Style Extraction

When you upload a KML or KMZ file, SiteView reads the style definitions embedded in the KML markup and applies them to the rendered features on the globe.

Line Styles

KML <LineStyle> elements define how lines are drawn:

  • Colour — the line colour (KML uses AABBGGRR hex format, which SiteView converts to standard display colours)
  • Width — the line stroke width in pixels

These styles are applied to polylines and polygon outlines.

Polygon Styles

KML <PolyStyle> elements define how polygons are filled:

  • Fill colour — the interior fill colour, including transparency (alpha channel)
  • Outline — whether the polygon outline is drawn (controlled by the <outline> flag)
Ginger Bear mascot

ℹ️ Did you know?

KML supports per-feature styling using inline <Style> elements and shared styles via <StyleMap>. SiteView handles both — features with inline styles use their own colours, while features referencing shared styles pick up the defined palette.

Per-Feature vs Uniform Styling

KML files can define styles in two ways:

ApproachHow It Works in SiteView
Per-feature stylesEach feature has its own <Style> or <styleUrl> — individual colours are preserved for each line, polygon, and point
Shared/uniform stylesA single <Style> is referenced by multiple features — all referencing features share the same appearance

When a KML file uses per-feature styling, the initial display shows each feature in its original colour. The colour override in the Layers tab applies a uniform colour to the entire layer, replacing the per-feature colours.


DXF Layer Colour Defaults

DXF files store colour information at the layer level. Each CAD layer has an assigned colour index (ACI), and all entities on that layer inherit that colour unless individually overridden.

When SiteView parses a DXF file:

  • Each DXF layer's colour is read from the layer table
  • The colour is converted to a web-compatible RGB value
  • Entities on that layer are rendered in the layer colour on the globe

Colour Index Mapping

DXF uses an integer colour index (0-255) rather than RGB values. SiteView maps these to standard colours:

ACIColour
1Red
2Yellow
3Green
4Cyan
5Blue
6Magenta
7White/Black (adapts to background)

Indices 8-255 map to specific RGB values from the standard AutoCAD colour palette.

Ginger Bear mascot

💡 Tip

If your DXF layers appear in unexpected colours on the globe, check the layer colour assignments in your CAD software. Changing the layer colour in AutoCAD or Civil3D before exporting gives you control over the initial appearance in SiteView.


Colour Overrides

Regardless of the source file type (KML or DXF), you can override the display colour of any layer using the colour picker in the Layer Management panel.

How Overrides Work

  • Click the colour swatch next to a layer in the Layers tab
  • Select a new colour from the eight-colour palette
  • The override applies immediately to all geometry in that layer
  • For KML files, the override replaces both per-feature and shared styles with a uniform colour
  • For DXF files, the override replaces the DXF layer colour

Removing Overrides

To revert to the original file colours, the layer needs to be reset. Deleting and re-uploading the design surface restores the original styling.

Ginger Bear mascot

ℹ️ Did you know?

Colour overrides are visual only — they do not modify the uploaded source file. The original DXF layer colours and KML style definitions are preserved in the stored data.


Feature Click Popups

Clicking on a design surface feature on the CesiumJS globe can display a popup with feature information. The popup behaviour differs between file types.

KML Feature Popups

KML features support rich popups because the KML format includes metadata fields:

  • Name — from the feature's <name> element
  • Description — from the feature's <description> element (may include HTML formatting)

Clicking a KML feature on the globe displays a popup with this information. This is useful for features that carry metadata — survey control points with coordinate descriptions, planning zones with regulatory notes, or reference areas with labels.

[Screenshot: A KML polygon clicked on the globe showing a popup with the name 'Stormwater Easement' and a description containing dimensions and reference numbers]
KML feature popup showing name and description metadata.

DXF Feature Popups

DXF entities do not carry the same metadata structure as KML features. TEXT and MTEXT entities display their text content, but geometric entities (lines, polylines, arcs) do not have descriptive metadata to show in a popup. Clicking on DXF line geometry displays the layer name.


Style Interaction with Visibility Toggles

Styles and visibility toggles work independently:

  • Hiding a layer (toggling it off) removes all its geometry from the globe, regardless of styling
  • Showing a layer (toggling it on) renders it with its current style (original or overridden)
  • Changing a layer's colour does not affect its visibility state
  • Adjusting opacity interacts with styles — a 50% opacity layer shows its colours at half intensity, blending with whatever is beneath

This means you can set up your preferred colour scheme and opacity levels, then use visibility toggles to quickly show and hide layers without losing your style configuration.

Ginger Bear mascot

💡 Tip

Use a consistent colour convention across your design surfaces. For example, always set stormwater layers to blue, sewer to green, and electrical to purple. This makes it instantly clear what each layer represents when multiple design surfaces are visible on the globe.


What's Next?

Previous
Layer Management