Scripting Features in DataManager

You can script how Features are represented visually in the Project view. Scripts can be inserted in the Source configuration options (Advanced visualization)

Documentation

DataManager will call these predefined functions when rendering a feature source. You would write the implementation of them to do your custom styling for your source.

newEntries onBefore(function(items))
(boolean) onFeature(function(feature, attributes))
newEntries onAfter(function(items))

items is an array where each value is a map that looks like this:
{
"feature": Feature,
"attributes": JSON
}

Feature:
// Set the style for this feature. See Style below for available types and configurations.
// If json is omitted default values for the Style will be used.
// Returns the Style Data.
json style(type, json)

// Return the Style Type or null if there is none set.
String styleType()

// Return the Style Data as JSON or null if it doesn’t exist. It can be modified.
json styleData()

// Remove the current Style.
void clearStyle()

// Set an attribute. Returns the value.
object attribute(string, value)

// Get an attribute or null if it doesn’t exist
object attribute(string)

// Set ID for the Feature
void id(string)

// Get ID for the Feature
string id()

// Set the Geometry for the Feature. Type can be either GeoJSON or WKT. // GeoJSON example:

// {
// "type": "Point",
// "coordinates": [125.6, 10.1]
// }

// WKT example: // POINT (125.6 10.1) void geometry(type, object)

// Get the Geometry of the Feature. Depending on the complexity of the Geometry this can be an expensive operation and should only be used if necessary.
// Type can be either GeoJSON or WKT.
object geometry(type)

Utils:
// Create a new Feature with the specified ID
Feature createFeature(id)

// Return a random UUID
String uuid()

// Create a seeded Random-object based on Feature
Random random(Feature)

// Convert radians to degrees
double toDegrees(double)

// Convert degrees to radians
double toRadians(double)

Random:
// Get a random value between 0.0 – 1.0
double next()

Statically available variables:

// Bounding box of the request, the values will be in the coordinate system of the dataset
Context.request.boundingBox = { "minX", "minY", "maxX", "maxY" }

// Raw bounding box of the request, the values will be in the coordinate system of the source
Context.request.rawBoundingBox = { "minX", "minY", "maxX", "maxY" }

Style:
Style describes how the feature should be rendered.

Example:
feature.style("ProjectedFeature", {
"polygonColor": "rgba(" + color + ", 0.75)",
"lineColor": "rgba(" + color + ", 1)",
"lineWidth": 2
});

Generic configuration:
zIndex: integer // Determines the order in which objects are rendered

ExtrudeGeometry:

altitude: double // The altitude of the geometry
min: double // The minimum height of the extrude
max: double // The maximum height of the extrude
relative: boolean // Set to true to extrude relative to altitude
reverseGeometry: boolean // Set to true to reverse the geometry
color: string // The color of the geometry

InstancedExtrudeGeometry:

min: double // The minimum height of the extrude
max: double // The maximum height of the extrude
reverseGeometry: boolean // Set to true to reverse the geometry
color: string // The color of the geometry
lineWidth: double // The width of line geometries
pointSize: double // The point size (in radius)
opacity: double // The opacity of the geometry
altitudeMode: string // Can be relativeToGround or absolute

InstancedModel:

url: string (has to be in the 3d library)
scale: [ double, double, double ] // The XYZ-scale of the model
opacity: double // The opacity of the geometry
cullFace: string // The cull face of the model, can be front, back or none
rotation: double // The Z-rotation of the model
altitudeMode: string // Can be relativeToGround or absolute
matrix: {
order: string // Order of the matrix, can be row or column
value: array // Array with 16 values in the order specified above
}

ProjectedFeature:

polygonColor: string // The color of polygons
lineColor: string // The color of lines
pointColor: string // The color of points
lineWidth: double // The width of line geometries
pointSize: double // The point size (in radius)
opacity: double // The opacity of the geometry
rendering: string // How the geometry should be rendered, can be texture or stencil

ProjectedImage:

url: string // URL to an image
width: double // Width of the image
height: double // Height of the image
rotation: double // Rotation of the image
mipmap: boolean // If image should be mipmapped or not

Placemark:

url: string // URL to an image
width: int // Width of the image
height: int // Height of the image
appearance: string // Appearance of the placemark, can be faceCamera, faceCameraPosition or billboard
backgroundSize: string // Background size, can be fill, contain or cover
backgroundPosition: string // Background position, can be leftTop, leftCenter, leftBottom, rightTop, rightCenter, rightBottom, centerTop, center or centerBottom
unit: string // Can be default or pixels
collisionTest: string // Can be inactive or nonOverlapping
scale: [ double, double ] // XY-scale of the placemark
autoScale: boolean // Set to true to enable auto scale
autoScaleStart: double // Auto scale start
autoScaleEnd: double // Auto scale end
altitudeMode: string // Can be relativeToGround or absolute

POI

(The configuration is similar to how POIs are configured in OCP):

style: string, // The style of the POI, can be simple, icon, custom, none — default is simple
iconUrl: string, // URL to an icon — optional
iconSize: double, // A value between 0 – 1 — default is 0.75
markerColor: string, // Color of the marker — default is #0db02b
markerSize: double, // Size of the marker in pixels — default is 40
label: string, // Label of the marker — optional
labelSize: double // Size of the label — default is 14

Lines:

color: string // Color of the lines
appearance: string // Appearance of the lines, can be flat or cylinder
depthTest: boolean // If set to true the lines will be blocked by objects in front
unit: string // Can be default or pixels
width: double // Width of the lines
altitudeMode: string // Can be relativeToGround or absolute

Points:

color: string // Color of the points
radius: double // Radius of the points
depthTest: boolean // If set to true the points will be blocked by objects in front
altitudeMode: string // Can be relativeToGround or absolute

TerrainModification:

height: double // Sets the height (in units above sea level), can be positive or negative
pointSize: double // Sets the Point size (radius in units)
lineWidth: double // Sets the Line width (in units)

Examples

In these examples, placeholder names for file, url and attribute references are used. Make sure you change those to your specific names.

Trees from points

A common use case is to visualize points as 3D-trees by using associated attributes to choose the type, height and diameter of the 3D-representation.

Pick the models you want to use. These would have to be uploaded into the 3D-library first. Then insert and customize the following script on the source that you want to visualize.

onFeature(function(feature, attributes) {

    let random = Utils.random(feature);
    let width = attributes.CROWNDIAM;
    let height = attributes.HEIGHT;
    feature.style("InstancedModel", {
       "url": "#tree1",
       "scale": [ width, width, height ],
       "rotation": random.next()*360
    });
});

Placemarks from points

Points can also be mapped to placemarks which can display attributes when clicked. The icon would have to be either picked from the Icon Library and referenced with it’s id, or available from an url or added inline as base64 encoded SVG.

The style “Placemark” or the simplified style “POI” can both be used.

onFeature(function(feature, attributes) {
feature.attributes(attributes); // copy attributes to feature so it can be used in OCP editor

feature.style("Placemark", {
"url": "#7fd62f08-6bb2-4580-a086-836ee40d40df", // ID of image from icon library to use as placemark
"width": 50,
"height": 50,
"renderLevel": 0,
"backgroundSize": "contain",
"appearance": "faceCamera",
"unit": "pixels",
"collisionTest": "inactive",
"altitudeMode": "relativeToGround"
});
});

Extrude feature based attribute value

Polygon features can be extruded into 3D volumes based on attributes or values that you select in the script.

onFeature(function(feature, attributes) {
feature.style("extrudegeometry", {
"min": 0, // minimum height of polygon
"max": 50, // maximum height of polygon
"altitude": 35, // altitude of polygon
"polygonColor": "#ff0000" // color of polygon
});
});