Core

The Procedural JavaScript library enables developers to embed the Procedural engine into their web pages. To use this library include a script tag on your page like so: 
<script
  src="https://unpkg.com/procedural-gl/build/procedural-gl.js">
</script>
This will create a Procedural object that your JavaScript code will be able to call. Once you have loaded the Procedural library, you can load in a location and add the visualization to your page. A typical pattern of initialization is as follows:
Example
Procedural.init( {
  container: document.getElementById( 'app' ),
  // For further details see:
  // github.com/felixpalmer/procedural-gl-js/wiki/Data-sources
  datasource: {
    elevation: {
      apiKey: 'GET_AN_API_KEY_FROM_YOUR_ELEVATION_PROVIDER',
      pixelFormat: 'nasadem', // or 'terrain-rgb', 'terrarium'
      urlFormat: 'https://elevation.example.com/tiles/{z}/{x}/{y}.jpg?key={apiKey}',
    },
    imagery: {
      apiKey: 'GET_AN_API_KEY_FROM_YOUR_IMAGERY_PROVIDER',
      urlFormat: 'https://imagery.example.com/tiles/{z}/{x}/{y}.jpg?key={apiKey}',
      attribution: 'Imagery attribution'
    },
  }
} );
Procedural.displayLocation( { latitude: 47.25, longitude: 13.55 } );

Methods

(static) datafileForLocation(target)

Returns the file name for a data file for a given location. Used mostly internally by engine to construct URLs.
Parameters:
Name Type Description
target Object An Object specifying a longitude and latitude

(static) displayLocation(target)

Instructs engine to download necessary data files for a location and to display it. When the data is ready to be displayed onLocationLoaded is fired.
Example
var target = { latitude: 43.21, longitude: 6.133 };
Procedural.displayLocation( target );

// Optionally can also supply:
// - viewing angle,
// - a bearing,
// - a distance,
// - animation duration (in seconds)
var target = {
  latitude: 44.5, longitude: 6.3,
  angle: 20, bearing: 30, distance: 1000
  animationDuration: 0.5
};
Procedural.displayLocation( target );
Parameters:
Name Type Description
target Object An Object specifying a longitude and latitude

(static) init(container)

Appends a canvas element to the specified container where the engine will draw its output.
Example
var container = document.getElementById( 'app' );
Procedural.init( {
  container: document.getElementById( 'app' ),
  // For further details see:
  // github.com/felixpalmer/procedural-gl-js/wiki/Data-sources
  datasource: {
    elevation: {
      apiKey: 'GET_AN_API_KEY_FROM_YOUR_ELEVATION_PROVIDER',
      pixelFormat: 'nasadem', // or 'terrain-rgb', 'terrarium'
      urlFormat: 'https://elevation.example.com/tiles/{z}/{x}/{y}.jpg?key={apiKey}',
      attribution: 'Elevation attribution'
    },
    imagery: {
      apiKey: 'GET_AN_API_KEY_FROM_YOUR_IMAGERY_PROVIDER',
      urlFormat: 'https://imagery.example.com/tiles/{z}/{x}/{y}.jpg?key={apiKey}',
      attribution: 'Imagery attribution'
    },
  }
} );
Parameters:
Name Type Description
container HTMLElement

(static) onBoundsFocused()

Callback function for when the transition for `focusOnBounds` completes
Example
Procedural.onBoundsFocused = function () {
  Procedural.orbitTarget();
};

(static) onLocationError()

Callback function for when location data failed to downloaded. This could be because the network request failed, or because the region is not available. See also Core.setDisplayErrors
Example
Procedural.onLocationError = function ( message ) {
  // Handle error
  console.error( message );
};

(static) onLocationFocused()

Callback function for when the transition for `focusOnLocation` completes
Example
Procedural.onLocationFocused = function () {
  console.log( 'Location focused' );
};

(static) onLocationLoaded()

Callback function for when location data has been downloaded and displayed
Example
Procedural.onLocationLoaded = function () {
  var container = document.getElementById( 'app' );
  Procedural.init( container );
};

(static) onUserInteraction()

Callback function for when engine recieves input from the user. Can be used to hide overlays when the user interacts with the map
Example
Procedural.onUserInteraction = function () {
  Procedural.removeOverlay( 'popup' );
}

(static) setDisplayErrors(value)

Configure whether errors should be displayed to the user. See also Core.onLocationError
Parameters:
Name Type Description
value Boolean pass true to show errors, false to only report via API