====== Rendering MapObjects ======

This page describes how render a MapObject instance on the Third-Party Reference Map.

<note>Make sure you can easily add new mapobject layers, because new object types for Measurements and Vector Overlays will be added in next versions.</note>


===== Rendering Lines =====

The ''spatialLine'' property is a CoordinatePath instance containing one or more CoordinateLine instances.  Each CoordinateLine instance holds a list of Coordinate instances defining the outline of a single line.

Legend properties : 
  * color : the outline color.
  * lineWidth : the outline width in 96dpi pixels.

===== Rendering Areas =====

The ''spatialArea'' property is a CoordinatePath instance containing one or more CoordinateLine instances.  Each CoordinateLine instance holds a list of Coordinate instances defining the outline of a single area.

Legend properties : 
  * color : the outline color.
  * lineWidth : the outline width in 96dpi pixels.
  * fillColor : the fill color.

===== Rendering Points =====

The ''spatialPoint'' property is a symbol at a specific coordinate.

Legend properties : 
  * symbolName : the name of a preset symbol.
  * symbolPath : the path of a symbol.
  * symbolSize : the size of the symbol in 96dpi pixels.
  * color : the symbol outline color.
  * lineWidth : the symbol outline width in 96dpi pixels.
  * fillColor : the symbol fill color.

The symbol is to be rendered inside a square with size ''symbolSize''.  The center of the square should be placed on the coordinate defined by ''spatialPoint''.

Possible symbolName values : 
  * ''circle'' : a filled circle.

<note>If both symbolName and symbolPath are undefined, a "circle" symbol must be rendered.</note>

Below is an example of creating a WKT string from a symbolPath : 

<code javascript>
/**
 * Create an SVG path from a mapobject symbol path.
 */
getSymbolPath: function(mapObject) {

    if (!mapObject.symbolPath) return null;

    var maxX = 0;
    var maxY = 0;

    // create path
    var path = "";
    for (var i=0; i<mapObject.symbolPath.parts.size(); i++) {
        var part = mapObject.symbolPath.parts.get(i);
        for (var j=0; j<part.points.size(); j++) {
            var point = part.points.get(j);

            maxX = Math.max(Math.abs(point.x),maxX);
            maxY = Math.max(Math.abs(point.y),maxY);

            var type = j==0 ? "M" : "L";
            path += type+point.x+","+point.y;
        }
    }

    // create contour
    var maxDistance = Math.max(maxX,maxY);
    var list = [-maxDistance,maxDistance,maxDistance,maxDistance,maxDistance,-maxDistance,-maxDistance,-maxDistance];
    var contour = "M"+list[0]+","+list[1]+"M"+list[2]+","+list[3]+"M"+list[4]+","+list[5]+"M"+list[6]+","+list[7];
    return [maxDistance,contour+path];
},
</code>