Skip to content

FeatureType and PropertyType format

Jump to bottom Edit New page
Erik Vullings edited this page May 2, 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.
  • selectActions (string[]): an optional list of actions to execute upon selecting a feature. The default action is 'select feature', which opens it in the Feature Properties panel.
  • 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", 
   "class": "THE CLASS NAME TO APPLY TO THE TIMELINE ITEMS",
   "classProperty": "THE PROPERTY TO USE WHICH CONTAINS THE CLASS NAME FOR THE TIMELINE ITEMS",
   "groupClass": "THE CLASS NAME TO APPLY TO THE GROUPS",
   "groupClassProperty": "THE PROPERTY TO USE WHICH CONTAINS THE CLASS NAME FOR THE GROUPS",
   "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: for any type of number. Often combined with stringFormat
    • text (default): can be combined with stringFormat
    • textarea: a larger area of text
    • boolean: true or false, is often displayed as a checkbox
    • media (for images): supply a url to display an image
    • bbcode: for simple formatting, often used to create links [url=http://www.bbcode.org/]This be bbcode.org![/url]
    • date: is parsed as a Javascript Date string
    • category: special kind of options
    • options: the provided number is used as the (zero-based) index in the options string array
    • matrix
    • relation: to create a relation (link) to another feature, e.g. an act referring to a stage. When the targetLayers is null, it only relates to the current layer. However, you can also link to another layer by setting it to the 'layerID', which will load it too, or to all other loaded layers by using a '*'.
        "act": {
            "title": "Act",
            "description": "Performed act",
            "type": "relation",
            "target": "podium i.e. TARGET_FEATURE_TYPE",
            "subject": "stage i.e. TARGET_PROPERTY",
            "targetlayers": null
        },
  • 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 * properties.amount_people'
}

propertyType: {
  label: 'Name',
  title: 'Name of the object',
  expression='"My name is " + properties.firstName'
}

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

Image overlay

Sometimes, instead of showing icons, you would like to display a geo-referenced image on the map. This is partially supported in the 2D view using leaflet's imageOverlay:

Example of a geojson layer that displays an image on the map. The geometry contains the image's bounding box (south-west, north-east), and the geometry.type is Overlay. The properties.imageUrl contains the link to the image path, and you can optionally specify the image's attribution and opacity.

{
	"type": "FeatureCollection",
	"features": [
		{
			"type": "Feature",
            "geometry": {
                "type": "Overlay",
                "coordinates": [[52.076051, 4.303200], [52.085646, 4.326134]] 
            },
			"properties": {
                "imageUrl": "images/LT20366 LIL16 plattegronden - transparent.png",
                "attribution": "Organisator van The Life I Live.",
                "opacity": 1
            }
        }
    ]
}
Add a custom footer
Add a custom sidebar
Clone this wiki locally