Decoration Layers

The DecorationLayer class provides a convenient way to add images, text and pins over certain locations in a map. The title of the DecorationLayer, which is provided in the constructor reflects the label of this layer in the layer controller.

JavaScript

var captions = new m.DecorationLayer("Captions");

The visibility of a DecorationLayer is set with its visible property. By default layers are visible. Add each new DecorationLayer to the layers property of the MapView:

JavaScript

view.layers.add(captions);

The number of layers you can add is unlimited.

Each DecorationLayer has a decorations list-property, which holds Bubble or Marker instances. When you have just a few Decoration-instances to add (Bubble-s or Marker-s) you can add them directly to the decorations property of the MapView. This is the default Decoration-s collection for the map, which can be used when only a few Decoration-s are required to avoid the overhead from using DecorationLayer-s.

Markers

The Marker class is used to render pins or images over the map. Images are specified using the imageSrc property that points to the URL of the image on the server. The text property specifies the tooltip of the image. The location of the Marker, using its geographical latitude and longitude - is propvided in the constructor:

JavaScript

// add a decoration layer for marker images
var markers = new m.DecorationLayer("Images");
markers.visible = false;
view.layers.add(markers);// create some markers with images
var mark = new m.Marker(new m.LatLong(-22.951916, -43.210487));
mark.imageSrc = "./images/christ_redeemer.png";
mark.text = "Christ the Redeemer";
markers.decorations.add(mark);

An "empty" Marker that has only its location set (no image or text) renders as a pin. Pins are drawn with a color that reflects the current map theme. You can customize their style through the CSS style of the theme.

var pin = new m.Marker(new m.LatLong(-22.951916, -43.210487));
pins.decorations.add(pin);
view.layers.add(pins);

A map with pins on certain locations of interest.

Bubbles

Bubble-class instances are rendered as text that can be on a single or multiple lines as specified by the multiline property. Each Bubble has a location and text properties that specify where and what is rendered. The offset property allows you to shift the Bubble if overlaps an image for example. 

JavaScript

// add a decoration layer for info bubbles
var bubbles = new m.DecorationLayer("Info bubbles");
bubbles.visible = false;
view.layers.add(bubbles);// create some bubbles showing an HTML string
var bubble = new m.Bubble(new m.LatLong(-22.951916, -43.210487));
bubble.text = "<p>Christ the Redeemer</p>The statue weighs 635 metric tons (625 long, 700 short 
tons), </br> and is located at the peak of the 700-metre (2,300 ft) Corcovado mountain </br> in 
the Tijuca Forest National Park overlooking the city of Rio de Janeiro. </br> A symbol of 
Christianity across the world, the statue has also become a cultural icon </br> of both Rio de 
Janeiro and Brazil, and is listed as one of the New 7 Wonders of the World.";
bubbles.decorations.add(bubble);

Here is a Bubble that simply renders a caption:

JavaScript

var caption = new m.Bubble(new m.LatLong(-22.951916, -43.210487), 
  "Christ the Redeemer");
caption.multiline = false;
caption.offset = new d.Point(0, 30);

Bubble instances can also use the cssClass property to change their style.

The layer controller allows the user to choose which layer with decorations is rendered. You can hide it this way:

JavaScript

view.showLayerController = false;

A map with images and single-line captions.