LuciadRIA Samples

Browse samples per component: All installed 

Preview

Balloons 

The Balloon sample illustrates the use of balloon widgets on the map. The contents of a balloon can be specified with a string or with valid HTML.

Add balloons to the map by using the showBalloon() method. Remove them from the map by calling hideBalloon() .

The contents of a balloon can be specified with a string or with valid HTML.

Balloons can be anchored to an object (for instance, a Feature from the model which is visualized by a FeatureLayer). Updates of the location of the feature cause the balloon to update as well.

Balloons are styled with the samples/common/balloon/luciad-balloon.css style-sheet. This stylesheet may be replaced with your own custom stylesheet.

 


Preview

Selection on OGC 3D Tiles data 

This sample demonstrates how to do display and do selection on 3D data through OGC 3D Tiles.

The data

This sample shows a Smart Site dataset. The dataset is an industry plant CAD model, made available as Hexagon PPM "BINZ" data through Smart InterOp Publisher. It has been converted to OGC 3D Tiles through LuciadFusion. This process retains metadata information such as linkage, moniker, and featureID.

The OGC 3D Tiles data is then displayed using a TileSet3DLayer.

Selection

The layer has been made selectable, and uses the featureID to distinguish individual objects. When you click on an object, it is highlighted and a balloon is displayed, showing the properties of the selected object. The sample code also shows different ways of listening to selection events, and how to retrieve relevant data from the selected object.

Visual effects

This sample has number of visual effects enabled to enhance the display of CAD data:

  • Anti-aliasing (see map.effects.antiAliasing): avoid aliasing effects on sharp CAD object edges.
  • Regular lighting (see map.effects.light): enhances the 3d visualization.
  • Ambient occlusion (see map.effects.ambientOcclusion): enhances realism by adding soft shadows.
  • Eye-dome lighting (see map.effects.eyeDomeLighting): enhances depth perception by outlining objects.

 


Preview

Camera 

This sample illustrates how to use the Camera API using the regular camera controller augmented with inertia, a First-Person camera controller using user-input and an Orbit camera controller (also called Pole camera). You can switch between the three controllers using the buttons at the bottom of the map. On a mobile browser, only the Inertia and Orbit controllers are available.

The First Person Camera Controller allows the control of the camera and modify its position using a predefined keymap to move and the mouse to change the camera's yaw and pitch. A guide image is displayed in the bottom right corner to show the keymap.

The Orbit camera consists of a camera orbiting around an F16 plane, keeping that point of interest in the center of the view. This controller uses the Animation and AnimationManager API.

 


Preview

Clustering 

The Clustering sample illustrates how to apply clustering to a data set containing a large number of armed events. Depending on the zoom level, the elements will be clustered appropriately, avoiding a cluttered view.

The sample contains a large number of armed events that took place in Africa. When a number of events are close together (in view-space), they become hard to distinguish. Therefore, a cluster is shown instead of the individual events.

It is also possible to compare the original model and the clustering transformed derivative by using the "ENABLE CLUSTERING" check box.

Creating a clustered data set through code is done by creating a ClusteringTransformer , and setting this transformer on a FeatureLayer .

 


Preview

Complex Stroking 

The Complex Stroking sample illustrates how to use the "Complex Stroke" API in LuciadRIA. This is a powerful API that allows you to stroke lines with complex patterns and add decorations at specific locations along the line. For example, you could draw a line with a sawtooth pattern and decorate it with arrows at the start and the end of the line.

When you open the sample, you will see various shapes and lines that are stroked using the Complex Stroke API. Every shape is labeled with an identifier. You can use this identifier to see how the shape is styled in the sample code.

You can select an object to start editing it. Notice how the patterns dynamically follow the shape while editing.

The Cookbook Theme is intended for developers. You can experiment with complex stroked line styles by changing sample snippets, or by creating new complex stroke styles and visualizing the results. You can also edit shapes to check how the complex stroke style is drawn over the vertices of a shape.

For more information please consult the article A step-by-step guide to complex strokes in LuciadRIA available on the Luciad Developer Platform .

 


Preview

COP Sample 

The Common Operational Picture (COP) sample is a showcase of a real-world application built with LuciadRIA and LuciadLightspeed. It combines various capabilities of the two products to provide a COP view for the user.

For more information on how to use the COP sample, please refer to the COP demo guide available in the Developer's Guide section.

The COP client connects to the COP services. A description of the COP services is available here .

 


Preview

Create and Edit 

The Create and Edit sample illustrates how to create vector shapes on the map or modify existing ones via (freehand) map drawing. LuciadRIA supports points, polylines, polygons, circles, ellipses, circular arcs, elliptical arcs, arc bands, geo buffers and extruded shapes.

Click on one of the buttons to start creating a new shape. The following shapes can be created and edited: a point, a polyline, a polygon, a circle by 3 points, a circle by a center point, an ellipse, a circular arc by 3 points, a circular arc by a center point, a circular arc by bulge, an elliptical arc, an arc band and a geo buffer. Finish creating the new object by clicking on the map outside the shape. For polylines, polygons and geo buffers, double-click.

For polylines and polygons you can drag the mouse over the map for freehand drawing. After releasing the mouse, you can continue freehand drawing if you start to drag in the vicinity of the point where you finished.

Select an object to start editing it.

Right-click on an object to show a context menu that allows you to:

  • Edit the shape (similar to selecting the object)
  • Delete the object
  • Create a geo buffer based on the shape (for polylines and polygons)
  • Create an extruded shape based on the shape (for all line and area shapes)

When editing the shape, you can drag the entire shape or move individual vertices by moving the handles. To insert vertices in a polyline, polygon or geo buffer, select the small handle in the middle of the line segment. To delete vertices in a polyline, polygon or geo buffer, press down and hold one editing handles of the shape's points. You can also hold down the Ctrl button, and click on a point's handle to delete it. To finish the editing, click on the map outside the shape.

The features you create and edit are stored on the server. A CustomJSONCodec is used to exchange the features with a server. This codec encodes shapes as GeoJSON except for the shapes that are not covered by the GeoJSON standard. For these shapes the CustomJSONCodec defines a custom encoding and decoding mechanism.

 


Preview

Data Formats 

This sample shows how to load data from the various data formats the LuciadRIA supports on the map.

Usage

  • Use Example data to load some example data on the map.
  • Use Open File to open a local file (GML, GeoJson) or remote URL (GML, GeoJson, KML).
  • Use Connect to WFS to open a WFS type on a remote WFS server.
  • Use Connect to WMS to open a WMS layer on a remote WMS server.
  • Use Add Bing Maps to display Bing Maps.
  • Drag and drop GML or GeoJson files on the map.

Supported formats

Each format has a sample snippet file on how to load the specific data format. See the files named *DataLoader.js .

GeoJson

Use a GeoJsonCodec in your Store .
Use a FeaturePainter to style your data using properties in the GeoJson file.

GML

GML 3.2 data, that adheres to the Simple Feature profile (SF-0).
Use a GMLCodec in your Store .
Use a FeaturePainter to style your data using properties in the GML file.

KML

OGC KML 2.2 data
Use a KMLModel with a KMLLayer .

Support:
  • Features: placemarks: Points, LineString, LinearRing, Polygon, MultiGeometry
  • Styles: LineStyle, PolyStyle, IconStyle (except color modulation), LabelStyle
  • Other: balloons with static html, labels
Limitations:
  • Cross-Origin requests that do not contain an "Access-Control-Allow-Origin" header in the response can not be loaded.
  • KMZ-files, which are zipped KML-files, can not be loaded.
  • Network links are not supported. (i.e. links to other KML files).
  • Styles have to be defined in the KML file itself, they can not be referenced externally.
  • No support for KML schemas or extended data.
WFS

Use a WFSFeatureStore with the appropriate codec ( GeoJsonCodec , GMLCodec or a custom codec).
Use a FeaturePainter to style your data using properties in the WFS response.

When using a WFS server, you can optionally specify an OGC filter as your layer query that is passed along in the WFS request.

WFS data is automatically loading using LoadSpatially , but you can override it to LoadEverything .

WFS data can only be loaded if the WFS Server allows cross domain requests.
For more information on setting up CORS for OGC webservices in LuciadLightspeed, please consult the OGC server LuciadLightspeed developer guide.

This sample uses https://sampleservices.luciad.com/wfs as WSF service, which runs on a LuciadFusion server. This service is for demonstration purposes only. You can use this service only for simple tests and demonstrations. You should not rely on this service in any way.

WMS

With the Tiled option you can choose whether to retrieve the data as a collection of tiles, or as a single image.

  • Tiled WMS is typically faster, but may have less visual quality because images can be rescaled.
    Use a WMSTileSetModel with WMSTileSetLayer .
  • Non-tiled WMS will have better visual quality, but a whole new image for the entire screen has to be loaded each time.
    Use a WMSImageModel with WMSImageLayer .
    Non-tiled WMS is not yet supported on a WebGLMap.

This sample has a controller ( FeatureInfoController ) that will highlight a WMS feature on mouse over, and will shows its properties in a balloon on select.

This sample uses https://sampleservices.luciad.com/wms as WMS service, which runs on a LuciadFusion server. This service is for demonstration purposes only. You can use this service only for simple tests and demonstrations. You should not rely on this service in any way.

WMTS

See the sample code WMTSTileSetModel , in combination with RasterTileSetLayer .

This sample uses https://sampleservices.luciad.com/wmts as WMTS service, which runs on a LuciadFusion server. This service is for demonstration purposes only. You can use this service only for simple tests and demonstrations. You should not rely on this service in any way.

Bing Maps

Use BingMapsTileSetModel with RasterTileSetLayer .

LuciadFusion

Use FusionTileSetModel with RasterTileSetLayer .
You can load imagery data as well as elevation data.
Elevation data has no effect in a 2D map.

This sample uses https://sampleservices.luciad.com/lts as LuciadFusion service, which runs on a LuciadFusion server. This service is for demonstration purposes only. You can use this service only for simple tests and demonstrations. You should not rely on this service in any way.

OGC 3D Tiles

Use OGC3DTilesModel with Tileset3DLayer .
You can load 3D tiled mesh data (In B3DM format) as well as Point Cloud data (In PNTS format). The Marseille 3D mesh data used in this sample has been created by Airbus with Airbus Street Factory.
Sometimes data density can be lower or higher than reported. Do not hesitate to manipulate the quality factor to find the right balance between precision and performance.
OGC 3D Tiles is only supported on a WebGL accelerated map.

This sample uses https://sampleservices.luciad.com/ogc/3dtiles as OGC 3D Tile service, which runs on a LuciadFusion server. This service is for demonstration purposes only. You can use this service only for simple tests and demonstrations. You should not rely on this service in any way.

Hexagon Smart Point Cloud (HSPC)

Use HSPCTilesModel with Tileset3DLayer .
You can load point cloud data in the HSPC format with this API.
The default quality factor might not be perfect for every dataset. Do not hesitate to manipulate the quality factor to find the right balance between precision and performance.
HSPC is only supported on a WebGL accelerated map.

Google Maps

See the Google Maps and Google Layer Widget sample for how to add Google Maps data to you map.

 


Preview

LuciadRIA WebGLMap support 

The WebGL support sample gives you an overview of supported features, unsupported features and limitations of a WebGLMap due to the capabilities of your device and browser.

You can include the report when you submit a support question.

 


Preview

Dual Map Sample 

This sample illustrates the power of the Model-View separation in LuciadRIA by showing two synchronized views based on the same data.

There is a 2D map on the left and a 3D map on the right. Selection is automatically synchronized between the two maps. You can edit shapes on the left map, and the changes will be applied to the right map.

The toolbar on both maps allows you to create various shapes. Creating new shapes is similar to the "Create and Edit" sample.

The context menu allows you to extrude an existing flat shape, turning it into a 3D volume.

 


Preview

ECDIS 

This sample shows an ECDIS layer served over WMS by a LuciadFusion server. The user interface allows you to customize the ECDIS visualization. The visualization parameters are sent to the WMS server using SLD.

See WMSTileSetModel . sldBody and WMSImageModel . sldBody .

For instance, you can change the color scheme by clicking on the Day , Dusk or Night buttons.

The sample also illustrates the use of WMS GetFeatureInfo requests to retrieve feature information for selected features. Select the corresponding checkbox to retrieve and show feature information for a clicked location on the map.

ECDIS S-57 ENC dataset provided by NOAA . For demo purpose only.

 


Preview

Extruded Shapes 

The Extruded Shapes sample illustrates how to use extruded shapes to visualize a city landscape. The buildings are styled according to their height, using a thematic color range.

See ExtrudedShape on how to create extrusions based on a base shape and a minimum and maximum height.

 


Preview

First Sample 

The First Sample shows a simple web page that contains a map.

The map contains 3 layers:

  • an OGC WMS raster layer
  • a vector layer containing city features
  • a grid layer showing a lon-lat grid

 


Preview

Geolocate OGC 3D Tiles 

This sample shows you how to geolocate an OGC 3D Tiles dataset on the globe. The prerequisite for this is that the sample dataset is not already georeferenced. In the case of an OGC 3D Tiles, this means that its metadata does not use the Region element, but instead a Box without a root level transform.

When an OGC 3D Tiles dataset is not georeferenced, its reference will be "LUCIAD:XYZ", which is a cartesian reference that does not contain geospatial information. The "LUCIAD:XYZ" reference does however say something about its axes: All axes are expressed in meters, and are pointing in specific directions:

  • X-axis: East
  • Y-axis: North
  • Z-axis: Up
With this basic sense of direction, it is possible to geolocate and orient the dataset as needed, using the GeoLocateController

Internally, the GeoLocateController creates an Affine3DTransformation , which is a transformation that can convert the "LUCIAD:XYZ" reference into a geospatial reference "EPSG:4978", an earth-centered, earth-fixed geocentric reference.

Usage
  • Click and drag the building icon onto the map. This will generate a new layer at the position of the mouse.
  • When active, you can drag around the building by hovering over it and dragging the base plane around.
  • When active, drag around the outer circle of the building to change its orientation.
  • To move the building up and down, look at it from its side, and drag the vertical controls up and down.
  • Click on the fitting buttons in the corner of the map to move the camera to convenient geolocating angles.
Data

The Marseille 3D mesh data used in this sample was created by Airbus with Airbus Street Factory. The dataset is available as OGC 3D Tiles services, hosted by our LuciadFusion server on https://sampleservices.luciad.com/ . You can use these services only for simple tests and demonstrations. You should not rely on either of them in any way. The non-geospatial dataset of the buildings were creating by Somnit and ztrztr on http://www.sketchfab.com

 


Preview

Google Maps 

Show Google Maps image data on the map using a GoogleImageModel .

To use this sample, you have to run it with your Google credentials. Pass in your application key with the key query parameter by appending ?key=MYKEY to the URL. See below for more info about authentication.

Depending on the type of account you are using, different image size, pixel density, and request count limits apply. This means that the map will not always be able to show the most appropriate data for the current extent of the map. When such limits are reached, the map will attempt to show a lower-resolution image from a lower scale to completely fill the screen.

When constructing the model, you can supply configuration parameters for each type of authentication:

  • public application key authentication: configure the model by setting the requestParameters.key property.
  • business account authentication : configure the model by setting the requestParameters.client property. You will also need to set the serviceUrl parameter to point to the signing proxy. This proxy, which is a servlet deployed with the samples, will sign your request with a private key associated with the business account. For more information on how the signing process works, please refer to the developer guide.

Please review the Google Maps/Google Earth APIs Terms of Service to determine if your application is permitted to use the Google web services.

 


Preview

GoogleLayer Widget 

To use this sample, you have to run it with your Google credentials. Pass in your application key with the key query parameter by appending ?key=MYKEY to the URL.

By using a GoogleLayer , you can embed a Google Map inside a LuciadRIA map. This approach is different from using a GoogleImageModel because it embeds an entire Google Maps map inside the LuciadRIA map instead of just retrieving the image data from a webservice. In effect, we place the Google Map widget inside the LuciadRIA widget.

The advantage of using a GoogleLayer is that having a Google Application Key is sufficient to embed this layer. There are no other restrictions on usage. In contrast, when using a GoogleImageModel , Google's pricing model takes into account the amount of request that are made to the map service.

There are some limitations to using this approach. The main one is that the constraints of navigating a Google Map carry over to the LuciadRIA map

  • The minimum and maximum scale range is restricted to the supported google levels
  • The map cannot be configured to scales in between zoom levels
  • The map cannot be panned beyond the world bounds
  • The zoom and pan behaviour of the Google Map cannot always be synced with the zoom and pan behaviour of the LuciadRIA map. Because of this, the google layer will be made transparent during animations.

Click the buttons to change the map type of the layer.

 


Preview

3D Icons 

The 3D icons sample illustrates how to display and style 3D icons (meshes).

The sample shows the San Francisco area brought to life by the use of 3D icons. Landmarks like the Golden Gate Bridge and Alcatraz prison are clearly recognizable. The scene is further decorated with military aircraft and carrier.

These 3D models are provided for sample purposes only and should not be used in an application that is violating the 3D Warehouse General Model License Agreement . 3D Warehouse General Model License Agreement provides that “You may not, and you may not permit anyone else to […] aggregate any content (including Models) obtained from 3D Warehouse for redistribution, or use or distribute any content obtained from 3D Warehouse in a mapping or geographic application or service, except as expressly authorized under this License Agreement.”

This sample also demonstrates some easily configurable simple 3D icons. A dome encases Alcatraz Island, while aircraft circle it. The aircraft have a field of view which is visualized by a cone.

There are a number of ways to define a 3D icon. You can

  • specify a URL to a GLTF file.
  • create a simple configurable 3D icon using Simple3DMeshFactory .
  • create a 3D icon at the triangle level with MeshFactory .
All 3d icons are painted using a FeaturePainter in combination with a Icon3DStyle .

 


Preview

Image viewer 

This sample shows how to visualize non-georeferenced images into a CRS:1-referenced map.

To view different images in the sample, simply drag and drop images from your desktop to the application. This will replace the existing image and load the image. Images are limited to the jpg, jpeg and png formats.

Navigation also works as it would on a regular georeferenced map. You can pan, zoom and rotate the map to see your image from different angles and zoom-levels.

The map you are seeing is projected in the CRS:1 reference. This reference is a special projection that works in pixel-space. In the CRS:1 reference, each world unit is one pixel in size.

This sample also demonstrates how you can annotate these images. Click on one of the buttons in the toolbar to draw a shape on top of the image.

 


Preview

Labeling 

This sample demonstrates how to paint decluttered labels for points, polylines and polygons. The sample uses three layers with vector data from the US. Each of these layers uses a separate painter that defines the specific styling that should be applied to the vector data.

To paint labels, every painter overrides the FeaturePainter.paintLabel() method and uses the LabelCanvas to paint labels. Depending on the properties of a feature, different styling for both the label and its shape is applied.

The state labels are repositioned whenever a previous label location becomes invisible in the current view. You can deactivate this behavior for in-path labeling by using InPathLabelStyle with the inView property set to false. In this case, the labels are placed in the center of the shape. They are not redrawn if a label threatens to go off-screen. Additionally labels for the River layer are repeated along polyline geometries using OnPathLabelStyle .

In addition, the state labels are drawn with the InPathLabelStyle#restrictToBounds style property. The flag indicates if the label should be painted outside of the bounds of its painted shape or not. This flag is not supported in hardware-accelerated maps.

 


Preview

Layer Control 

The Layer Control sample provides a GUI component that allows you to manage layers on the map:

  • Toggle the visibility of layers and layer groups. Note that the elevation layer cannot be made visible in 2D.
  • Drag and drop layers to their new position. A white line indicates where a dragged layer or layer group will be dropped when you release the mouse button. If you try to drop a selection somewhere you're not allowed to drop it, a warning is displayed in your console. This could happen when the position would violate the ordering constraints imposed by layers of type BASE . These layers always need to be positioned at the bottom.
  • Right clicking on the layer shows a context menu with different options.
    • Add new layer groups inside other layer groups
    • Toggle selectability of layers
    • Turn on and off label layers
    • Remove layers and layer groups

The layer control component can be positioned in any HTML-div node.

 


Preview

Multispectral Analysis 

This sample shows two multi-spectral rasters of Las Vegas on top of each-other. The two datasets are from 2000 and 2003, and the sample allows you to instantly compare the two using a slider.

The raster data is served over WMS by a LuciadFusion server. The data is not pre-processed. The selected bands are sent to the WMS server using SLD.

Usage

  • Use band selection to see an individual band in grey-scale.
  • Use combinations to see interesting combinations of bands in color. Explanation of the selected combination is displayed on the right.
  • Use the cross-fade slider to instantly see the difference between the data from 2000 and 2003.
  • Select the blue pins: each show a balloon with something interesting at that location.

Details

The band selection is passed to the WMS server using the SLD_BODY parameter of the WMS request. It contains an SE <RasterSymbolizer> tag with SE <ChannelSelection> .

See WMSTileSetModel . sldBody and WMSImageModel . sldBody .

The cross-fade slider makes use of the RasterTileSetLayer . rasterStyle functionality.

 


Preview

Navigation 

This example shows how you can use the map.mapNavigator to change the center position and the scale of the map. It also shows how you can limit navigation by setting a navigation constraint on the map.

Press the zoom and pan buttons on the map to perform an animated zoom and pan.

Use the dropdown to set a rectangle on the map beyond which you cannot navigate the map. This is useful to limit the map to certain areas.

The river layer is a WMS layer served by LuciadFusion.

 


Preview

OGC 3D Tiles 

This sample shows how to load 3D tiles with meshes and point cloud data on the map. The map supports both the 3D and 2D projections. This sample contains also a 3D ruler controller that displays various measurements: distance of 3D line segments, angles between points, orthogonal distances, heights over terrain, and area surface, depending on the selected measurement mode. To start a measurement tool, turn on the 3D ruler controller and click on the map in order to add new points for measurement. Each additional click adds a new segment to measure. You can change the measurement mode on the measurement panel.

Usage
  • Click Marseille Railway Station dataset to load the point cloud dataon the map.
  • Use 3D ruler controller to measure distances, angles and surface of area.
  • Use styling expressions for the Point Cloud layer to modify the size, color, and visibility of individual points.
  • Use Quality slider for each layer individually to apply the level of detail multiplication factor for the geometric error that determines the how detailed tiles should be loaded.
Features
3D data

Use OGC3DTilesModel with a TileSet3DLayer .
You can load 3D tileset data on 2D and 3D WebGLMap maps.
Note: The elevation data has no effect in a 2D map.

3D ruler

The 3D ruler uses Map.getViewToMapTransformation API with LocationMode.CLOSEST_SURFACE mode. This transformation object provides for the given view position a map point on the closest surface, that is a 3D object represented by meshes, point cloud points, extrudes shapes, or terrain.
This transformation is used on 3D maps only.

Graphic effects

The Effects tool shows various graphic effects that can be applied on a 3D scene, like the sunlight with shadows, camera focus depth or ambient occlusion.

Expression based styling

The TileSet3DLayer allows to set PointCloudStyle that defines the expression based styles for the point cloud data.
The are three types of expressions:

  • colorExpression property defines colors for point cloud point. By default colors are defined in the tile data. If no color is defined, LuciadRIA paints them in white. You should use ExpressionFactory to define an expression that evaluates to a color value, e.g. based on attributes in the batch table section of the PNTS data.
  • visibilityExpression property is a filter that determines point cloud data visibility. You should use ExpressionFactory to define an expression that evaluates to a boolean value.
  • scaleExpression property controls point size. By default points are visualized as rectangles of size 3 on 3 pixels. You should use ExpressionFactory to define an expression that evaluates to a number value, that is interpreted as scale factor. The scale factor of value 1 preserves the original size, a value greater than 1 enlarges points, and a value lesser than 1 makes points smaller.

Data

The Marseille 3D mesh data used in this sample was created by Airbus with Airbus Street Factory. The train station lidar data was created by Flying-Cam for Altametris and SNCF Réseau. Both datasets are available as OGC 3D Tiles services, hosted by our LuciadFusion server on https://sampleservices.luciad.com/ . You can use these services only for simple tests and demonstrations. You should not rely on either of them in any way.

 


Preview

Parameterized Lines 

The Parameterized Lines sample illustrates how to flexibly style and filter polylines via a dedicated painter. Any attribute can be used to thematically style the data. All calculations are performed client-side and use WebGL.

The sample shows a dataset of flight to and from New York.
Each flight has a couple of properties:

  • Id : its callsign
  • Class : the class of aircraft, for example Turboprop
  • Type : the aircraft type, for example Airbus A320
Each flight also has properties at each point on its line, representing the state of the aircraft at that time:
  • Heading : the direction (azimuth)
  • Speed : the speed over ground
  • Climb rate : the vertical speed
  • Fuel burn : the fuel consumption

The buttons allow you to choose different visualization styles.

  • Fuel burn shows a gradient along each flight, where higher fuel consumption is in red
  • Climb rate shows a gradient along each flight, where steep descent is in blue and steep ascent in red
  • Class colors each flight according the class of aircraft
For each mode, you tweak the visualization using the UI.
Also for each mode can enable density painting.

See ParameterizedLinePainter for details on how to use this kind of styling.

  • Use rangeColorMap change color along each line based on a property
  • Use rangeWindow to filter out parts of each line
  • Use propertyColorExpressions to color whole lines based on properties
  • Use FeaturePainter.density to enable density

 


Preview

Projection 

This sample shows how you can configure the reference of the map. For FeatureModels , the reference of the model and the reference of the map do not need to be the same. For TileSetModels , the reference of the model and the reference of the map must match when using software rendering ( Map ), but not when using hardware-accelerated rendering ( WebGLMap ).

Use the combo-box to select a new reference for the map. For a full list of all supported references, please consult the API documentation of the ReferenceProvider .

 


Preview

Raster re-projection 

The Raster Reprojection sample demonstrates client side raster re-projection in LuciadRIA. It shows two maps that are constructed using exactly the same data and code path. Only the reference of the maps differs.

The sample will use Bing imagery if available. If not, it uses an online LuciadFusion server with detailed imagery in San Francisco and Los Angeles.

 


Preview

Ruler Controller 

The Ruler Controller sample shows how to create a new custom controller.

In this sample, a ruler controller is created that displays the total distance of all line segments drawn by the user on the map. To start a measurement, click on the map and move the mouse around. Each additional click adds a measurement point. Double click to end the measurement.

 


Preview

Selection and Filtering 

This sample demonstrates various API features of selection and filtering in LuciadRIA. This includes:

  • Listening to the onSelectionChanged event on a FeatureLayer .
  • Styling non-selected and selected features using the same painter.
  • Filtering of objects with a predicate function.

You can select an object by clicking on its visualized shape or on its label. Only objects in layers that are selectable can be selected. If a selected object does not pass the feature filter evaluation, it automatically gets deselected.

Use the slider to filter cities by population. The slider is a HTML5 form input control. The exact behavior depends on the browser. In some browsers, the values are updated continuously, while in others there will only be an update after the slider button has been released.

 


Preview

Smart Data Loading 

This sample demonstrates how to handle large vector data sets by organizing that data according to multiple scale levels and configuring a loading strategy. This is illustrated by a number of Feature Layers that visualize large OpenStreetMap datasets: places, roads, buildings, and points of interest in Belgium.

A QueryProvider lets you define what kind of data should be presented at different scales. For example, at a large scale you only want to show highways, while at a smaller scale, you also want to see local roads. On a 2D map, different data will be loaded depending on the scale you're looking at. In the sample this is combined with the LoadSpatially loading strategy, which only loads the data for the current view extent. If the LoadEverything loading strategy is used, all the data for that scale level would be loaded.

In 3D scenes the LoadSpatially loading strategy will load data for multiple scales: data on the horizon is visualized with a larger scale because it is farther away from the camera. The sample illustrates this by loading and displaying only highways on the horizon, while close to the camera also the local roads are loaded and shown. Consult the LoadSpatially JSDoc for more information on how the loading strategy uses the QueryProvider to achieve this.

The sample shows the total number of features that are loaded into the WorkingSet of all layers. This counter is updated when you navigate over the map, as new data is loaded when scale level zones change.

Learn how to include large vector datasets. Use scale levels to control data download size and to style points, lines and polygons according to your business rules.

 


Preview

Symbology Encoding 

This sample demonstrates Symbology Encoding in LuciadRIA. The sample loads a number of layers that are each styled using a Symbology Encoding definition.

It is possible to modify the Symbology Encoding definition for a layer and re-apply the styling information on the layer. By selecting a layer in the layer control, the corresponding style file is displayed in the code editor next to the map. When you are done making modifications, you can click the "Apply Style" button, or type Ctrl-Enter (⌘-Enter on Mac) to apply the style on the corresponding layer.

Note that the Symbology Encoding specification does not allow you to specify a different style for selected features. To be able to differentiate between selected objects, the generated painter is equipped with default selection behavior. Please refer to luciad/view/feature/FeaturePainterUtil.addSelection() and the developer guide for more information about selection styling.

 


Preview

Terrain Services 

The terrain services sample illustrates how LuciadRIA supports streaming and visualization of worldwide high-resolution terrain. Imagery is draped over the terrain for a realistic 3D experience.

There are two layers:

  • An Elevation layer, which is visualized as 3D terrain
  • A Aerial imagery layer with detailed imagery in San Francisco and Los Angeles
Both layers use data provided by a LuciadFusion server that is available online for sample purposes only.

See FusionTileSetModel and RasterTileSetLayer on how to add terrain data to your map.

The height read-out makes use of the height service if it is available. If not, height data of the model is used.

If the LOS service is enabled, you have access to two additional layers:

  • An LOS circle layer, which highlights the radius where the LOS is calculated
  • A LOS data layer, which shows the output of the LOS service

The LOS service provides a visibility calculation from a person's point of view. The calculation is based on a digital terrain model. The result of the calculation provides information on what may be visible when looking around from the given location. Each color represents the minimum height range a person or object needs to be in to be visible. Actual values and colors used by the service to interpret the result are available in a legend.

For more details on the height and LOS services, you can visit the official documentation here .

 


Preview

Timeline 

This sample shows how to use a LuciadRIA Map to display time-based data and expression-based styling.

Data

The sample shows an overview of world-wide earthquakes from 2000 to 2011, as well as the tectonic plates of the planet. Both are GML files that are styled and filtered using properties from the files.

The dot size indicates the earthquake's magnitude : larger dots for stronger quakes.
The dot color indicates the earthquake's depth : quakes near the surface are red, deeper quakes are yellow to blue.

The sample also shows a timeline with the earthquakes and a histogram.
The histogram shows the accumulated magnitudes of the visible earthquakes per month.

The sample offers playback functionality, activated by the corresponding button.
In playback mode, the styling dynamically changes based on the time of the earthquake and the time index indicated by the vertical line in the timeline view. Only earthquakes that happened shortly before the indicated time index are displayed.

Usage

You can navigate (zoom and pan) the timeline.
The spatial map and the timeline are linked:

  • The spatial map displays only earthquakes in the time range visible on the timeline.
  • The timeline displays only earthquakes in the area visible on the map.
  • Selection is synchronized.
  • The histogram is updated with the visible earthquakes.

Details

The timeline is based on a LuciadRIA "non-georeferenced" map. It is a regular Map that you can add layers to, but it doesn't have a spatial reference. Instead, the map shows data over time.
Either the geometry in your model can be expressed in that time reference, or you can use a ShapeProvider to make time-based geometry on the fly.
See TimeSlider for details.

The spatial map displays the earthquakes with a ParameterizedPointPainter instead of the regular FeaturePainter. It illustrates that you can not only achieve a similar visualization using expressions but also make use of fast filtering, immediate density and dynamic styling.
See EarthquakesParameterizedPointPainter for details.

 


Preview

Tracks 

The Track Display sample illustrates how to display 5000 moving tracks received via a web-socket. Density analysis can be applied in a static way on the trajectories or dynamically on the moving tracks.

There are two datasets:

  • Tracks : 5000 moving tracks, pushed from a server over a web-socket.
  • Routes : the routes each of these tracks is moving over.
You can enable dynamic density , showing density over the moving tracks.
You can also enable static density , showing density over the routes.

For more information about pushing changes over web sockets, see WebSocketNotifier .
For more information on density painting, see FeaturePainter.density .

 


Preview

Trajectories 

The Trajectories sample illustrates the use of the trajectory painter. Flight trajectories are dynamically animated over time, or can be filtered based on attribute information. Density styling is automatically applied. All calculations are performed client side and use WebGL.


Preview

Vertical View 

This sample demonstrates how a map with a cartesian reference can be used to create a vertical view. The sample shows a regular map containing airspaces and plane trajectories. The vertical view illustrates which airspaces are crossed by the selected trajectory, and allows to easily identify the locations and altitudes at which the aircraft enters and leaves those airspaces.

The trajectories are represented by a green polyline in both the regular map and the vertical view. The airspaces are represented by polygons. The airspaces have a minimum and maximum height property. Those heights represent the lower and upper altitude bounds of the airspace.

When you select a trajectory, the vertical view will be updated for that specific track. The X-axis represents the distance along the trajectory (0 meter meaning the start of the track) and the Y-axis represents the altitude. This allows to determine the height of the aircraft at any location along its trajectory.

The vertical view also shows the airspaces whose boundaries are crossed by the aircraft, represented as rectangles. The lower and upper height of the rectangle (the y-coordinates) are determined by the minimum and maximum height of the airspace. The x-coordinates are determined by the location where the trajectory enters and leaves the airspace. When the aircraft passes below/above a certain airspace, the polyline in the vertical view will pass underneath/above the corresponding rectangle. When the aircraft enters the airspace, the polyline will enter the corresponding rectangle. Airspaces of which the boundaries are not crossed by the aircraft will not be shown in the vertical view.

Note that the airtrack and airspace layers in the vertical view use the same models as the corresponding layers on the regular map. The conversion from the Feature contained in the model to the shape which is shown in the vertical view is done by configuring a ShapeProvider on the FeatureLayer (see the AirspaceShapeProvider and TrajectoryShapeProvider classes). More information about the ShapeProvider concept can be found in the Developer's Guide.

Due to the sharing of the model between vertical view and map, updates to the trajectory on the map (right click | Edit and double click afterwards to confirm) are immediately visible in the vertical view.

Navigation is possible in both the vertical view and the map view. Note that the vertical view allows to zoom in/out on a specific axis as well, without altering the scale on the other axis (non-uniform scaling/zooming). Use the mouse wheel next to the axis just outside the view to zoom in/out on that particular axis. Using the mouse wheel inside the view scales both axes at the same time.

The airspaces are drawn with borders that are styled using BorderStyle API. The BorderStyle decorates the outline of a closed shape with the inner and the outer border style.

To show the icons and labels in the border of the vertical view, the painter of the airspaces implements the optional paintBorderBody and paintBorderLabel methods. These two methods correspond to two paint representations PaintRepresentation.BORDER_BODY and PaintRepresentation.BORDER_LABEL .

 

Preview

Constructive Geometry 

This sample illustrates the application of the operators union, intersection and difference to groups of shapes. All calculations are performed client side.

Constructive geometry operations can be applied by using the context menu. At least two shapes must be selected. To select multiple shapes, click on them while holding down the shift key.

To create new shapes use the toolbar buttons. To edit shapes right click on them and select 'edit'.

The constructive geometry operations are calculated using a ConstructiveGeometry instance which is created through a ConstructiveGeometryFactory .

 

Preview

Military Symbols Overview 

This sample shows all supported military symbols for the MS2525 and APP6 standards. The sample allows you to toggle between various parameters and standards, to see what effect they have on styling.


Preview

Military Symbology 

A sample that demonstrates the modeling, visualization, editing and creation of military icons and tactical graphics, for the MS2525 and APP6 standards. Note that for this sample to run correctly, you will also need the Military Symbology Component of LuciadLightspeed. Please refer to the developer guide for more details.

The sample starts up with a few tactical graphics and icons already initialized on a map. Clicking on a feature will display a panel containing some of its properties. Modifying the properties can be done in this panel. The panel itself is part of sample. (Have a look at the cop/spotreports/SpotReportInfoPanelMilSym module).

To create a new icon or graphic, type a symbol name in the creation panel on the top of the view. Selecting an item from that list will start the creation process. Click on the map to draw your new military symbol. This panel is also part of sample. (Have a look at the symbology/CreationPanel module).

To edit an existing symbol, right-click the symbol and select edit. For devices that don't support right-click (such as touch-based devices), select a symbol and press "Edit Symbol" in the properties panel.

Not all modifiers that can be edited with the editing panel will change the visual presentation of the symbol. They only change the modifier of the object. This is for example the case for the "Country" modifier. This changes the attributes of the domain object, but does not change the visualization of the object. This is because the symbology standards, such as MS2525b, do not specify a change in visualization for all possible modifiers of the symbol.

This sample also demonstrates how to cluster military symbols. The following rules are applied:

  • Units of different affiliation are not clustered together
  • Units of different category are not clustered together. For example, ground units will not be clustered together with air units
  • If a cluster contains several instances of the same military symbol, the symbol's icon will be used to represent the cluster, only bigger and with a label indicating the number of elements in the cluster.
  • If a cluster contains different military symbols, a simple round icon with a label indicating the number of elements will be used.
  • Sea Surface, Sea Subsurface and MineWarfare units will not be clustered
  • A cluster must contain at least 2 military symbols.