In LuciadRIA, the view component of the Model-View-Controller architecture is the map. The map manages:

  • The layers that visualize the loaded vector and raster data

  • The transformation from reference coordinates to screen coordinates and the other way round

  • The map controllers used to interact with the map and the data

  • The map size

Choosing between a Canvas map and a WebGL map

LuciadRIA comes with two types of maps:

  • Canvas map: a 2D map based on a HTML5 Canvas.

  • WebGL map: a 2D or 3D map which is rendered with WebGL.

The table below provides an overview of the main characteristics of both map types:

Canvas map WebGL map

Technology

CPU-based rendering using HTML Canvas

GPU-based rendering using WebGL

Supports a 2D map

Supports a 3D map

Hardware requirements

No special requirements. CPU and RAM specifications decide performance.

Requires a dedicated GPU. See Hardware and software requirements.

Works on low-end hardware

Raster warping support

The majority of the LuciadRIA API works independently of the map type you use.

This makes it easy to offer your application in two versions, or to switch from one map type to another in the future.

Creating a map

A map is always created on a DOM node. The DOM node is a mandatory parameter to the map constructor. The constructor creates the necessary DOM structures to display the map, and hooks into several DOM events to realize an interactive map.

Creating a canvas map

//The HTML page should have a dom node with this id, e.g.
// <div id="map" />
const domNodeID = "map";

//Create the map and specify the dom node id
const map = new Map(domNodeID);

By default, the map visualizes geographical data in an equidistant cylindrical projection. If you want to use another projection, you can configure the Map reference using the reference property in the option hash:

//Use the factory method of the ReferenceProvider module to create
//the polar-stereographic reference
const worldReference = getReference("EPSG:3995");

//Pass that reference in the constructor of the map
const map = new Map("map", {
  reference: worldReference
});

It’s impossible to change the map reference at runtime.

Creating a WebGL map

A WebGL map supports both a 2D map and a 3D map, depending on the reference you supply in the constructor. These are illustrations of both:

Creating a 3D WebGL map
//The HTML page should have a dom node with this id, e.g.
// <div id="map" />
const domNodeID = "map";

//To create a 3D map, use the 3D Geocentric reference which is
//created using the factory method of the ReferenceProvider module
const geocentricReference = getReference("EPSG:4978");

//Create the map and specify the dom node id
const map = new WebGLMap(domNodeID, {
  reference: geocentricReference
});
Creating a 2D WebGL map with a polar stereographic reference
//Use the factory method of the ReferenceProvider module to create
//a 2D polar-stereographic reference
const worldReference = getReference("EPSG:3995");

//Pass that reference in the constructor of the map
const map = new WebGLMap("map", {
  reference: worldReference
});