Skip to content

FeatureType and PropertyType format

Jump to bottom Edit New page
Erik Vullings edited this page Apr 17, 2016 · 11 revisions

Every layer consists of many features, be it points, lines, polygons or multi-polygons. And most features have many properties beside the geometry and id. In order to visualize them attractively, we created the FeatureType and PropertyType format, respectively.

FeatureType

A FeatureType may contain the following properties:

  • id (string): You don't need to specify it, but every feature will receive a GUID upon loading
  • name (string): displayed when hovering over the item, and in the property panel
  • style (IFeatureTypeStyle): specifies the foreground and background color, line width, etc.
  • languages (ILanguageData): localized information
  • contourProperty: name of the property that contains a stringified L.GeoJSON object, which is shown when hovering above a feature
  • properties ([key: string]: any): a list of properties
  • propertyKeys (string[]): an ordered list of property ids, separated by semi-colon. I.e. it specifies which properties of a features should actually be displayed.
  • timelineConfig: an optional object that specifies whether the feature should be displayed on the timeline. It works only if the layer.timeAware = true, and it may also be specified as part of the ProjectLayer.
{ 
   "group": "THE GROUP/ROW/LANE FOR THE ITEMS ON THE TIMELINE",
   "groupProperty": "THE NAME OF THE PROPERTY THAT REPRESENTS THE GROUP/ROW/LANE FOR THE ITEMS ON THE TIMELINE", 
   "startTimeProperty": "START TIME (DATE)", 
   "endTimeProperty": "OPTIONAL END TIME (DATE)", 
   "contentProperty": "CONTENT TO DISPLAY IN THE ITEM" 
}

FeatureTypeStyle

  • nameLabel (string): Default value is Name, i.e. the feature.properties.Name contains the title/name of the feature.
  • fillColor (string): e.g. 'red' or '#FF0000'
  • strokeColor (string): as above
  • selectedFillColor (string): as above, shown when selected
  • selectedStrokeColor (string): as above
  • selectedStrokeWidth (number): width of stroke outline when selected
  • height (number):
  • opacity (number):
  • fillOpacity (number):
  • stroke (boolean):
  • drawingMode (string): e.g. point, line, polyline, polygon, or multi-polygon
  • strokeWidth (number):
  • iconWidth (number): size of the icon in pixels
  • iconHeight (number): size of the icon in pixels
  • iconUri (string): URI of icon
  • modelUri (string):
  • modelScale (number):
  • modelMinimumPixelSize (number):
  • cornerRadius (number): rounding
  • maxTitleResolution (string): when to hide the title
  • rotate (number):
  • innerTextProperty (string): set a text in a feature
  • innerTextSize (number):
  • analysispropertyType (any):
  • rotateProperty (string): e.g. when the property is updated dynamically, the object may rotate (e.g. in a simulation)

PropertyType

The property type specifies how the property should look, and how it should behave:

  • id (string): the name of the property type, e.g. a FeatureType can use it in its propertyTypeKeys to refer to it.
  • label (string): the label of the property.
  • title (string)
  • description (string)
  • type (string): number, text, textarea, boolean, media (for images), bbcode, data, category, options, date, matrix, relation
  • section (string): when dealing with a large number of properties, it is good practice to separate them into sections
  • stringFormat (string): .NET style string formatting, so you can specify how many digits a number should show, etc.
  • visibleInCallOut (boolean): whether we show it (default)
  • canEdit (boolean)
  • filterType (string)
  • isSearchable (boolean)
  • minValue (number)
  • maxValue (number)
  • defaultValue (number)
  • count (number)
  • calculation (string)
  • subject (string)
  • target (string)
  • targetrelation (string)
  • targetproperty (string)
  • options (string[]): a list of semi-colon separated category names, which are used to reduce the size of a (geojson) layer (the actual property just refers to them by index).
  • categories (string[])
  • languages (ILanguageData)
  • legend (Legend)
  • layerProps (ILayerPropertyDetails)
  • targetid (string)
  • expression (string): The expression computes a new value based on existing values, and it has access to: properties (the properties of the selected feature), and features (the collection of all features in the layer), and specific operations such as sum, count, min, max, mean, std Math library. E.g.

propertyType: { label: 'amount_children', title: 'Amount of children', expression='properties.percentage_children * amount_people' }

String formatted text

String formatted text can be used in two locations:

  • When resolving the name of an item
  • For the iconUri

Resolving the name of an item

Often, a feature contains a property Name (e.g. feature.properties.Name), which is used all over the place: in the side bar, in the tooltips, for legends etc. In case you didn't supply a Name, this generates a lot of exceptions when trying to use it, so we enforce that each feature has a name when initializing the feature. In addition, we do this because often the name reflects some other properties of a feature, and you don't want to add the information twice.

How does it work? Add a PropertyType, whose label="Name", whose type="stringFormat" and whose stringFormat contains the formatting. An example is probably easier to understand: stringFormat="{street} {houseNumber}, {zipCode}" takes the three properties, street, houseNumber and zipCode, and substitutes them in the string.

Icons

You sometimes wish to base the image of a feature on some property, e.g. the energy label. So for each energy label, you have a different icon. You can do this by adding multiple property types, each specifying a different iconUri, and adding the property.FeatureType with the respective name to each feature too. Besides increasing the size of the geojson files considerably, it is also quite cumbersome. For that reason, the iconUri can also contain a string formatting. When resolving the feature.style.iconUri, check whether we are dealing with a stringFormatted uri, e.g. images/LabelledHouse-{energyLabel}.png

In this case, the energyLabel, a property of the feature, is used to resolve the uri, so this could become when the energyLabel = 4: images/LabelledHouse-4.png

So for each energyLabel (including the missing label, if any), you need to supply an image. Further note that, for the legend, we also need an iconUri that is independent of the feature: in this case, the brackets are removed, e.g. images/LabelledHouse-energyLabel.png

So in case of 5 energy labels, you need to supply the following icoms:

  • LabelledHouse-energyLabel.png (legend)
  • LabelledHouse-.png (missing)
  • LabelledHouse-1.png
  • LabelledHouse-2.png
  • LabelledHouse-3.png
  • LabelledHouse-4.png
  • LabelledHouse-5.png
Add a custom footer
Add a custom sidebar
Clone this wiki locally