Features

Features are elements in the rendered scene that are displayed on top of the 3D world, such as lines or POIs. Features are added as part of an overlay, which takes the form of a geojson FeatureCollection. Each feature should have a unique `id`, to allow referencing later by other methods. To explore the different options available when styling the overlays, take a look at the Overlay Editor
Example
// Add an overlay and focus on features when clicked
var featureCollection = { ... };
Procedural.addOverlay( featureCollection );
Procedural.onFeatureClicked = function ( id ) {
  Procedural.focusOnFeature( id );
};

Methods

(static) addBuiltinOverlay(id)

Adds a built-in overlay to the 3D world. Currently supported overlays are: 'peaks', 'places'. See also Features.removeOverlay
Example
Procedural.addBuiltinOverlay( 'peaks' );
Parameters:
Name Type Description
id String | Array id of overlay to add, or array of ids

(static) addOverlay(overlay)

Adds an overlay to the 3D world. An overlay is a collection of `Features`, specified in geojson format as a `FeatureCollection`. Each of these `Features` should have a unique id which is used by other methods when referencing each `Feature`. See also the examples in the Overlay Editor. See also Features.updateOverlay, Features.removeOverlay
Example
var featureCollection = {
  'name': 'example',
  'type': 'FeatureCollection',
  'features': [
    {
      'id': 0,
      'type': 'Feature',
      'geometry': {
        'type': 'LineString',
        'coordinates': [
          [ 13.55, 47.25 ],
          [ 13.56, 47.26 ]
        ]
      },
      'properties': {
        'color': '#f30e32'
      }
    }
  ]
}

Procedural.addOverlay( featureCollection );
Parameters:
Name Type Description
overlay Object a geojson FeatureCollection

(static) focusOnFeature(id)

Focuses the camera on a feature on the map
Example
Procedural.focusOnFeature( 3 );
Parameters:
Name Type Description
id Number id of Feature to focus on

(static) highlightFeature(id)

Highlights a feature on the map
Example
Procedural.highlightFeature( 3 );
Parameters:
Name Type Description
id Number id of Feature to highlight

(static) onFeatureClicked(id)

Callback function for when a feature is clicked
Example
Procedural.onFeatureClicked = function ( id ) {
  console.log( 'Feature clicked:', id );
}
Parameters:
Name Type Description
id Number id of Feature that was clicked

(static) onFeatureSelected(id)

Callback function for when a feature is selected, by hovering over it with the mouse
Example
Procedural.onFeatureSelected = function ( id ) {
  console.log( 'Feature selected:', id );
}
Parameters:
Name Type Description
id Number id of Feature that was selected

(static) onOverlayAdded(name)

Callback function for when an overlay has been added
Example
Procedural.onOverlayAdded = function ( name ) {
  console.log( 'Overlay added:', name );
}
Parameters:
Name Type Description
name String name of overlay that was added

(static) removeOverlay(name)

Removes an overlay from the 3D world. See also Features.addOverlay
Example
var featureCollection = {
  'name': 'example',
  'type': 'FeatureCollection',
  'features': [ ... ]
}
Procedural.addOverlay( featureCollection );

...

Procedural.removeOverlay( 'example' );
Parameters:
Name Type Description
name String name of overlay to remove, defined when adding an overlay using Features.addOverlay

(static) updateOverlay(overlay)

Updates an overlay that was previously added to the 3D world. Using this method is much faster than repeatedly calling `addOverlay`, but the update is limited to the positions of the features in the overlay. The format is the same as for `addOverlay`, but only the `coordinates` will be updated - all feature properties will be ignored. To update an overlay it is necessary to provide the same `name` as was used for `addOverlay` and for the updated data to have the same number of features as the original overlay, in the same order. Note that currently only `Point` geometries can be updated. See also Features.addOverlay
Example
var featureCollection = {
  'name': 'example',
  'type': 'FeatureCollection',
  'features': [
    {
      'id': 0,
      'type': 'Feature',
      'geometry': {
        'type': 'Point',
        'coordinates': [ 13.55, 47.25 ]
      }
    }
  ]
}

Procedural.updateOverlay( featureCollection );
Parameters:
Name Type Description
overlay Object a geojson FeatureCollection