You must handle the display of some information types through HTML and CSS instead of through the LuciadRIA API . This is the case when you want to visualize items on top of the map, such as:

  • Logos

  • Mouse locations

  • Attribution notices for data providers

  • Map controls, like zoom buttons

The samples contain numerous examples of components displayed on top of the map. You can look at the Navigation sample, which also demonstrates a Mouse Location component and zoom controls, and the Bing sample, which shows an attribution notice.

navigationsample
Figure 1. the Navigation sample

Components like these are often displayed in an identical manner, no matter if they are displayed inside or outside the map. The only difference is the location of the DOM node that contains the component. The layer control which is added to the map in many samples, such as the the Balloon sample, the Selection sample or the Vertical View sample, uses the same layer control as the Layer Control sample, but wraps it in a DOM node that is positioned inside the map. The visibility of this node can be toggled by clicking on a button. The Layer Control sample displays the layer control outside the map.

foldablelayer
Figure 2. An example of a Foldable Layer Control on top of the map

You can create map overlays by creating a DOM node inside the map node, and positioning it inside the Map node by means of CSS. This is illustrated in Program: Creating a logo overlay node inside the map node. A <div> node with ID logo is created inside the map node.

Program: example CSS for a CSS overlay node shows how the scale indicator node is positioned inside the map node by means of CSS: it is positioned in the bottom left corner of the map, 15 pixels from the border. The Z-index is provided to ensure that the scale indicator is displayed above the map.

Program: example CSS for a CSS overlay node (from common/scaleIndicator/scaleIndicator.css) 
.scaleIndicator {
  width: 150px;
  height: 23px;
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 400;
}

Note that the scale indicator node is positioned in the map with the position:absolute CSS directive. This only works if the parent node is not positioned statically. The default setting of the CSS position directive is static, however. Therefore, the overlayMap parent node is styled with position:relative in Program: overlayMap style: position: [relative|absolute] is required for child overlay nodes to be positioned correctly. Since no offset is configured, the position of the map is the same as it would be with the default position value.

Program: overlayMap style: position: [relative|absolute] is required for child overlay nodes to be positioned correctly 
#map {
  background-color: #181818;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0;
  margin: 0 0;
}