Legend class

Legend()

Legend is a JavaScript class available in the JavaScript library.
It allows you to easily manage the legend available through the JavaScript library.

To enable this legend, you must first add this bit of HTML code to the body of your HTML.

HTML

<!-- LEGEND -->	
				
<div id="legend" class="z-depth-1 white closedLegend">

  <div class="blue darken-1 valign-wrapper legendOpenClose">
    <i id="legendOpenCloseIcon" class="material-icons valign white-text legendClose">keyboard_arrow_right</i>
  </div>

  <div class="white legendInformation">
    <ul class="legendList">
    </ul>
  </div>

</div>

To render the legend, you'll also need to add some CSS and JS to your HTML to ensure everything is displayed properly.

Make sure you add the CSS link to Material Google icons :

• Google Material Icons

HTML

<!-- Import Google Icon Font -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

You will also need to include 3 SVGs to your project. To host them, you'll need to add them to an images folder, that must be at the same level as your HTML file.
You can download them using the links below :

• legendItemRaster.svg
• legendItemStyleByAttribute.svg
• legendItemThematic.svg

Finally, make sure you've included the small portion of CSS code to your style.css file, as specified in the Getting started.

Once you've included all this, you'll need to specify an additional parameter (initLegend) in your YoumapsAPI instantiation. Once initLegend is set to true, the Legend class will be instantiated automatically. If not set or set to false, the legend is not enabled.

After you've enabled the legend, each time you'll call displayMapdata or hideMapdata, the mapdata item will be automatically added/removed from the legend. No any action is required on your part.
Note that the legend object is accessible directly through your YoumapsAPI object, as shown below.

JavaScript

function onYoumapsApiLoaded(){
  console.log("YoumapsAPI loaded!");
  var legend = youmasApi.legend;
}
  
var mapOptions = {	
  center : new google.maps.LatLng(48.858386, 2.343435), // Paris,
  zoom : 11,
  minZoom : 6,
  maxZoom : 17
};

var youmapsApi = new YoumapsAPI(
  {
    techID : <YOUR_TECH_ID>, 
    initMapboards : true,
    initLegend : true,
    mapDivId : "map",
    mapOptions : mapOptions
  },
  onYoumapsApiLoaded
);