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.

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.

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.
<div id="map">
<div class="logo" id="logo"></div>
</div>
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.
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.
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;
}