Loading...
 

Earth

Earth (WebWidget)

The Earth WebWidget offers the possibility to visualise different types of maps and geographical (statistical) data on a navigable 3D globe. The WebWidget also has a smooth transition from the three-dimensional global plane to the two-dimensional plane zoomed in precisely down to the individual streets and vice versa.

There are numerous use cases for this WebWidget in business applications. For example, you can display the quantity of all customers or suppliers according to their geographical locations and enable interactions with the different locations, displayed as pins on the map.

The WebWidget supports all common cartographic providers, from OpenStreetMap to customised maps. In addition, the WebWidget comes with a standard map of the natural earth if you want to use the WebWidget without a map server.

Earth WebWidget
Earth WebWidget

Use

Web(earth, "earth.html", 0, 0, 800, 600)

Dependencies

  • earth.html
  • earth-directive.js
  • dependencies/earth.css
  • libs/cesium/*

  • thirdparty/dompurify/1.0.8/purify.min.js (comes with MorphIT by default)

Message interface

When describing the direction, the WebWidget is divided into its two components. The WebWidget implemented in HTML, which implements the presentation logic and user interaction in the browser and the WebWidget implemented in InstantView, which supplies the other side with the data from ClassiX and controls it.

Name Parameters Description
Push News (IV→HTML)
set_map Map This message passes a map object to the Web widget as CX_JSON_OBJECT and specifies the map to be drawn on the globe.
set_position Position & {fly?: Boolean} This message transfers a geographical position to the Web widget as CX_JSON_OBJECT, thereby specifying the camera position. Beside the geographical function you can set the parameter fly to true to animate the movement.
set_pins ARRAY(Pin) This message passes a CX_JSON_ARRAY of pin objects to the WebWidget. These objects are drawn on the map as markers (pins) and should serve as interaction elements between the WebWidget and the ClassiX instance.
Events (HTML→IV)
INITIALIZE_SOCKET - The first message that the WebWidget sends once it has initialised. This indicates that the WebWidget is ready to receive and process push messages.
SELECT_SOCKET String This message is triggered when the user double-clicks a marker (pin). It transmits the ID of the marker as a string.

The map object

Field Type Default value Description
mapUrl String "none"

This is the URL to the MapTile server that provides the desired map. A list of servers that use OpenStreetMap as a basis can be found at the following link. In addition, almost all common providers for custom maps are compatible with this web widget.

The format of the URL is arbitrary except for the parameters x,y,z, which should be in the URL in the form {x}, {y}, {z} or ${x}, ${y}, ${z}. Example: https://a.tile.openstreetmap.de/${z}/${x}/${y}.png

If the use of a MapTile server is not desired, "none" can be offered as a string. This will result in the standard offline map of the natural earth being used.

credit String ""

If the map provider requires a specific copyright notice to be displayed at the edge of the WebWidget, as OpenStreetMap does, for example, the IV developer can submit an HTML text here, which will be displayed at the bottom right of the WebWidget.

The position object

Field Type Description
longitude CX_NUMERIC The longitude of the position
latitude CX_NUMERIC The latitude of the position
height CX_NUMERIC The height to the earth's surface in metres

The Pin Object

Field Type Description
id String | Number The unique ID of the marker (pin)
title String The title of the marker that is displayed when the user clicks the marker.
description String A textual description of the marker that is displayed when the user clicks on it.
longitude CX_NUMERIC The longitude of the marker position
latitude CX_NUMERIC The latitude of the position of the marker
color String The colour of the marker as CSS colour string. For example: "red", "#ff0000", "rgb(255,0,0)"