Skip to content

Latest commit

 

History

History
373 lines (282 loc) · 15.9 KB

5.STYLING.md

File metadata and controls

373 lines (282 loc) · 15.9 KB
Raw

Styling

Terra Draw provides a number of ways to style the drawing experience. This guide will cover how to style features for the following Modes:

You can also style specific features if required.

Drawing Modes

Modes can be styled by passing a styles object to the constructor of the mode. For example, to style the TerraDrawPolygonMode:

// Create Terra Draw
const draw = new TerraDraw({
  // Create Adapter
  adapter: new TerraDrawMapboxGLAdapter({ map, lib }),

  // Create Modes
  modes: [
    // Polygon Mode
    new TerraDrawPolygonMode({
      // Pass styles to the constructor
      styles: {
        // Fill colour (a string containing a 6 digit Hex color)
        fillColor: "#00FFFF",

        // Fill opacity (0 - 1)
        fillOpacity: 0.7,

        // Outline colour (Hex color)
        outlineColor: "#00FF00",

        //Outline width (Integer)
        outlineWidth: 2,
      },
    }),
  ],
});

Important

Colors in Terra Draw are modelled as 6 digit Hex colors (e.g. #00FFFF). This is to ensure consistency across different mapping libraries.

Each Mode has a different set of styles that can be passed to the constructor.

Points

The TerraDrawPointMode is styled using the following properties:

Property Type Example Value Description
pointColor Hex Color #00FFFF The fill color of the point
pointWidth Integer 2 The width of the point
pointOutlineColor Hex Color #00FFFF The outline color of the point
pointOutlineWidth Integer 2 The outline width of the point

Lines

The TerraDrawLineStringMode is styled using the following properties:

Property Type Example Value Description
lineStringColor Hex Color #00FFFF The color of the line
lineStringWidth Integer 3 The width of the line

Polygons

The TerraDrawPolygonMode is styled using the following properties:

Property Type Example Value Description
fillColor Hex Color #00FFFF The fill color of the polygon
fillOpacity Number (0-1) 0.7 The fill opacity of the polygon
outlineColor Hex Color #00FFFF The outline color of the polygon
outlineWidth Integer 2 The outline width of the polygon
closingPointColor Hex Color #00FFFF The fill color of the closing point
closingPointWidth Integer 1 The width of the closing point
closingPointOutlineColor Hex Color #00FF00 The outline color of the closing point
closingPointOutlineWidth Integer 2 The outline width of the closing point

Freehand

The TerraDrawFreehandMode is styled using the following properties:

Property Type Example Value Description
fillColor Hex Color #00FFFF The fill color of the polygon
fillOpacity Number (0-1) 0.7 The fill opacity of the polygon
outlineColor Hex Color #00FFFF The outline color of the polygon
outlineWidth Integer 2 The outline width of the polygon
closingPointColor Hex Color #00FFFF The fill color of the closing point
closingPointWidth Integer 1 The width of the closing point
closingPointOutlineColor Hex Color #00FF00 The outline color of the closing point
closingPointOutlineWidth Integer 2 The outline width of the closing point

Circle

The TerraDrawCircleMode is styled using the following properties:

Property Type Example Value Description
fillColor Hex Color #00FFFF The fill color of the circle
outlineColor Hex Color #00FFFF The outline color of the circle
outlineWidth Integer 1 The outline width of the circle
fillOpacity Number (0-1) 0.34 The fill opacity of the circle

Rectangle

The TerraDrawRectangleMode is styled using the following properties:

Property Type Example Value Description
fillColor Hex Color #00FFFF The fill color of the rectangle
outlineColor Hex Color #00FFFF The outline color of the rectangle
outlineWidth Integer 2 The outline width of the rectangle
fillOpacity Number (0-1) 0.9 The fill opacity of the rectangle

Angled Rectangle

The TerraDrawAngledRectangleMode is styled using the following properties:

Property Type Example Value Description
fillColor Hex Color #00FFFF The fill color of the rectangle
outlineColor Hex Color #00FFFF The outline color of the rectangle
outlineWidth Integer 2 The outline width of the rectangle
fillOpacity Number (0-1) 0.9 The fill opacity of the rectangle

Sector

The TerraDrawSectorMode is styled using the following properties:

Property Type Example Value Description
fillColor Hex Color #00FFFF The fill color of the sector
outlineColor Hex Color #00FFFF The outline color of the sector
outlineWidth Integer 2 The outline width of the sector
fillOpacity Number (0-1) 0.9 The fill opacity of the sector

Sensor

The TerraDrawSensorMode is styled using the following properties:

Property Type Example Value Description
centerPointColor Hex Color #00FFFF The fill color of the center point
centerPointWidth Integer 3 The fill width of the center point
centerPointOutlineColor Hex Color #00FFFF The fill color of the center point outline
centerPointOutlineWidth Integer 1 The fill width of the center point outline
fillColor Hex Color #00FFFF The fill color of the sensor
outlineColor Hex Color #00FFFF The outline color of the sensor
outlineWidth Integer 2 The outline width of the sensor
fillOpacity Number (0-1) 0.9 The fill opacity of the sensor

Selection Mode

To style selected data, pass the styles property to the TerraDrawSelectMode constructor. For example, to style the selected polygon:

const draw = new TerraDraw({
  adapter: new TerraDrawMapboxGLAdapter({ map, lib }),
  modes: [
    new TerraDrawPolygonMode(),
    new TerraDrawSelectMode({
      styles: {
        // Fill colour
        selectedPolygonColor: "#00FFFF",

        // Fill opacity
        selectedPolygonFillOpacity: 0.7,

        // Outline colour
        selectedPolygonOutlineColor: "#00FF00",

        //Outline width
        selectedPolygonOutlineWidth: 2,
      },
      flags: {
        polygon: {
          feature: {
            draggable: true,
          },
        },
      },
    }),
  ],
});

draw.start();

Different selection styles can be applied to different geometry types.

Points

Selected Points are styled using the following properties:

Property Type Example Value Description
selectedPointColor Hex Color #00FFFF The fill color of the point
selectedPointWidth Integer 2 The width of the point
selectedPointOutlineColor Hex Color #00FFFF The outline color of the point
selectedPointOutlineWidth Integer 2 The outline width of the point

Lines

Selected Lines are styled using the following properties:

Property Type Example Value Description
selectedLineStringColor Hex Color #00FFFF The color of the line
selectedLineStringWidth Integer 3 The width of the line

Polygons

Selected Polygons are styled using the following properties:

Property Type Example Value Description
selectedPolygonColor Hex Color #00FFFF The fill color of the polygon
selectedPolygonFillOpacity Number (0-1) 0.7 The fill opacity of the polygon
selectedPolygonOutlineColor Hex Color #00FFFF The outline color of the polygon
selectedPolygonOutlineWidth Integer 2 The outline width of the polygon

Selection Points

Lines and Polygons have selection points that allow you to move existing points in the geometry. These can be styled using the following properties:

Property Type Example Value Description
selectionPointColor Hex Color #00FFFF The fill color of the selection point
selectionPointOutlineColor Hex Color #00FF00 The outline color of the selection point
selectionPointWidth Integer 2 The width of the selection point
selectionPointOutlineWidth Integer 3 The width of the selection point

Mid Points

Lines and Polygons have mid points that allow you to add new points to the geometry. These can be styled using the following properties:

Property Type Example Value Description
midPointColor Hex Color #00FFFF The fill color of the mid point
midPointOutlineColor Hex Color #00FFFF The outline color of the mid point
midPointWidth Integer 2 The width of the mid point
midPointOutlineWidth Integer 3 The width of the mid point

Render Mode

The TerraDrawRenderMode is used to render uneditable features, like contextual data.

For example, to style a Point rendered using the TerraDrawRenderMode:

// Create Terra Draw
const draw = new TerraDraw({
  adapter: new TerraDrawMapboxGLAdapter({ map, lib }),
  modes: [
    // Create a Render Mode
    new TerraDrawRenderMode({
      // Provide a unique name
      modeName: "contextual",

      // Your styles
      styles: {
        // Fill colour
        pointColor: "#00FFFF",

        // Outline colour
        pointOutlineColor: "#00FF00",
      },
    }),
  ],
});

// Add a Point to the Render Mode (accepts Array)
draw.addFeatures([point]);

The following styles can be applied to different geometry types displayed using the TerraDrawRenderMode.

Points

Points added to the TerraDrawRenderMode are styled using the following properties:

Property Type Example Value Description
pointColor Hex Color #00FFFF The fill color of the point
pointWidth Integer 2 The width of the point
pointOutlineColor Hex Color #00FFFF The outline color of the point
pointOutlineWidth Integer 2 The outline width of the point

Lines

Lines added to the TerraDrawRenderMode are styled using the following properties:

Property Type Example Value Description
lineStringColor Hex Color #00FFFF The color of the line
lineStringWidth Integer 3 The width of the line

Polygons

Polygons added to the TerraDrawRenderMode are styled using the following properties:

Property Type Example Value Description
polygonFillColor Hex Color #00FFFF The fill color of the polygon
polygonFillOpacity Number (0-1) 0.7 The fill opacity of the polygon
polygonOutlineColor Hex Color #00FFFF The outline color of the polygon
polygonOutlineWidth Integer 2 The outline width of the polygon

Tip

Multiple Render Modes can be added to the Terra Draw instance. This allows you to style indiviual Render Modes differently.

Styling Specific Features

Terra Draw supports styling overrides of individual features if required. This can be achieved by providing a styling function rather than a string or a number to a feature. As an example here we can style each polygon feature as a random color:

// Function to generate a random hex color - can adjust as needed
function getRandomColor() {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

// Cache for each feature id mapped to a hex color string
const colorCache: Record<string, HexColor> = {};

const draw = new TerraDraw({
  adapter: new TerraDrawMapboxGLAdapter({
    map, // Assume this is defined further up
    coordinatePrecision: 9,
  }),
  modes: [
    new TerraDrawPolygonMode({
      styles: {
        fillColor: ({ id }) => {
          // Get the color from the cache or generate a new one
          colorCache[id] = colorCache[id] || getRandomColor();
          return colorCache[id];
        },
      },
    }),
  ],
});

// Ensure the color cache is clead up on deletion of features
draw.on("delete", (ids) => ids.forEach((id) => delete cache[id]));

Guides

  1. Getting Started
  2. Store
  3. Adapters
  4. Modes
  5. Styling
  6. Events
  7. Development
  8. Examples