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, such as zoom buttons

The samples contain several examples of items displayed on top of the map. The Navigation sample, for instance, also demonstrates a Mouse Location component and zoom controls. The Bing sample shows an attribution notice.

navigationsample
Figure 1. the Navigation sample

You can also display items on top of the map, no matter if they’re inside or outside the map. The only difference is the location of the DOM node that contains the component. Samples such as the Balloon sample, the Selection sample, or the Vertical View sample, use the same layer control as the Layer Control sample, but wrap it in a DOM node positioned inside the map. You can toggle the visibility of that node by clicking 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, and positioning it inside the Map node through CSS. Program: Creating a logo overlay node inside the map node illustrates how you can do that. It creates a <div> node with ID logo inside the map node.

Program: example CSS for a CSS overlay node shows how you can position the scale indicator node inside the map node through CSS. The sample positions it in the bottom left corner of the map, 15 pixels from the border. By providing the Z-index, you make sure to display the scale indicator 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 sample positions the scale indicator node in the map with the position:absolute CSS directive. This only works if you don’t position the parent node statically, but the default setting of the CSS position directive is static. That’s why Program: overlayMap style: position: [relative|absolute] is required to position child overlay nodes correctly styles the overlayMap parent node with position:relative. Because it doesn’t configure any offset, 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 to position child overlay nodes correctly 
#map {
  background-color: #181818;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0;
  margin: 0 0;
}