Rendering MapObjects

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

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.

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.

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.

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

/**
 * 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];
},