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

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. 

//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 WebGLMap(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 WebGLMap
const map = new WebGLMap("map", {
  reference: worldReference
});

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

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
});