====== Map Suite Adornments ======

===== Video Overview =====
{{youtube>LhTeEDfR1xg?large |Web API Adornments Learning Sample}}
<div newline></div>
<div download_viewsource_buttons tryitonline>
{{filehistory:webapieditionsample_adornments_cs_20160106.zip|C# Project}}
[[source_code_webapieditionsample_adornments.zip|View Source]]
[[http://samples.thinkgeo.com/WebApiEdition/SampleTemplates/Adornments/leaflet/|Try It Online(Leaflet)]]
[[http://samples.thinkgeo.com/WebApiEdition/SampleTemplates/Adornments/openlayers/|Try It Online(Openlayers)]]
</div>

=====Overview=====
Map Suite supports adornments which are graphical items that appear on top of your map and remain in a fixed position even as you pan and zoom. They are often informational, and include things like titles, scale bars, north arrows and legends. This is very helpful to viewers to better understand the context of the map.  

=====Types of Adornments=====

There are seven types of adornment that are supported in Map Suite Core: Scale Bar Adornment, Scale Line Adornment, Scale Text Adornment,Logo Adornment, Graticule Adornment, Magnetic Declination Adornment, and Legend Adornment.

In this learning sample we will go over some of the most popular adornment types:

====Scale Bar Adornment====
Display scale bars on the map and shows the scale ratio and unit.
<div captionwithborder floatright>
{{webapiedition:scalebaradornment.png?300|Border}}
</div>
\\
<div newline></div>
<div newline></div>



====Scale Line Adornment====
Display scale line on the map and shows the scale ratio and unit.
<div captionwithborder floatright>
{{webapiedition:scalelineadornment.png?300|Border}}
</div>
<div newline></div>
<div newline></div>

====Scale Text Adornment====
Display scale text on the map.It show the scale ratio  and unit.
<div captionwithborder floatright>
{{webapiedition:scaletextadornment.png?300|Border}}
</div>
<div newline></div>
<div newline></div>
  
====Logo Adornment====
Allows you to add logos, images, etc. You can change the position by using the Adornment Layer's properties.
<div captionwithborder floatright>
{{webapiedition:logoadornment.png?300|Border}}
</div>
<div newline></div>
<div newline></div>
  
====Graticule Adornment====
Graticule adornment can show meridians and parallels at various intervals based on the zoom level.
<div captionwithborder floatright>
{{webapiedition:graticuleadornment.png?300|Border}}
</div>
<div newline></div>
<div newline></div>
  
====Magnetic Declination Adornment====
Allows you to add north arrows and can be used for showing the angle of the horizontal plane between magnetic north (the direction in which the north end of a compass corresponds to the direction of the Earth's magnetic field lines) and true north (the direction along a meridian towards the geographic North Pole).
<div captionwithborder floatright>
{{webapiedition:magneticdeclinationadornment.png?300|Border}}
</div>
<div newline></div>
<div newline></div>
  
====Legend Adornment====
Legend gives context to the user; it describes the features being displayed on the map. 
<div captionwithborder floatright>
{{webapiedition:legendadornment.png?300|Border}}
</div>
<div newline></div>
<div newline></div>



=====A Look at the Code=====

There are two projects in the Visual Studio solution; one using Leaflet javascript mapping library and the other using OpenLayers. In each project the AdornmentsController contains the function that loads each adornment type. The functions shows how to build a adornment layer. The RefreshAdornmentLayer function and RefreshSchoolPoiLayer function will show two different drawing styles.