Change your design’s graphics using the property editor

Shapes that you draw in Giraffe can be styled by a number of properties. If you want to change how a shape appears on the map, read on to find out how. You can also change the default styles for each usage - which is covered in Usages

Quick Links

Usages

Urban Calculations

Analytics

List of Included Feature Properties

Giraffe Data Model

• Guide Contents

Fundamentals

<aside> 🎓 What is a property? From dictionary.com: an essential or distinctive attribute or quality of a thing From Wikipedia: a property is a characteristic of an object; a red object is said to have the property of redness.

Other words for Property:

• Attribute
• Parameter
• Metadata
• Quality </aside>

Properties in Giraffe allow you to tell your project story. Use properties to control everything from giving all the residential buildings the same buildCost to making all annotations blue. Giraffe comes pre-loading with many properties (see the full List of Included Feature Properties) or you can create your own.

Each shape in Giraffe are GeoJSON features with a geometry and various Properties . Giraffe allows any property to be added to these shapes by users or apps.

Certain properties are used by Giraffe to render the shape on the map, and to perform the calculations required for Urban Calculations , so it is important that users are aware of these.

<aside> 🚨 Other properties may be required by various apps in order for them to run properly, but this page only describes the properties relevant to Giraffe.

</aside>

Inheritance

If a geometry feature has a property that exists in the feature’s Usages, the section will inherit properties from the Usage it references.

If the property is set directly in the feature, the feature-level property has priority. That is, feature properties override the Usage’s properties at the instance level.

Usage Level

Controls multiple features.

Edit in the Usages Editor

Use to control many objects

Feature Level

Controls a single selected feature

Edit in ‣

Use to override Usages in a one-off fashion

Map

Add properties to map features by clicking the shape and then clicking ‘Add new property” in the left-hand tool palette.

<aside> 💡 View a List of Included Feature Properties

</aside>

2D Map

Features can be controlled with these properties.

<aside> 💡 Some properties only work for features that are rendered in the SVG overlay. Features can be moved to the SVG overlay by setting the property svg to true.

</aside>

Fill

• color defaults to: 'grey'. Same property sets color of 3D building.
• fillOpacity defaults to: 1
• fillPattern can be set to hatch, for black hatching
• hatch can be set to true (SVG only) and controlled with the following properties:
  • hatchSpacing defaults to 6px
  • hatchStrokeWidth defaults to 1px
  • hatchColor defaults to black
  • hatchAngle defaults to 45degrees

Stroke

• stroke defaults to: 'black'
• strokeWidth defaults to: 1
• strokeOpacity defaults to: 1
• strokeOffset defaults to: half of strokeWidth
• strokeLinecap defaults to: 'round' (SVG only)
• strokeLinejoin defaults to: 'round'
• strokeDasharray defaults to: 0 (SVG only)
• strokeDashoffset defaults to: 0 (SVG only)

Lines

• arrowStart / arrowEnd default to false
  • arrowStartYawn / arrowEndYawn defaults to 30 degrees
  • arrowStartLength / arrowEndLength defaults to 7 meters

Roads / Paths

• type is set to road
• roadWidth defaults to 6m.
• pavementWidth defaults to 1m
• pavementColor divides road networks into groups
• roadColor is a random selection of any section with a roadColor property in the group. Strongly recommended that this should only be set in featureCategories.<category>.<selection>.join rather than on a section.

Points

• radius defaults to: 7