====== Example using MapObjects in Esri/JS ======

===== Rendering lines =====

Below is an example of creating an esri/js Polyline geometry.
  * [[https://developers.arcgis.com/javascript/3/jsapi/polyline-amd.html|esri/js Polyline]]

<code javascript>
/**
 * Create an esri/js geometry for a mapObject line.
 */
getGeometryForLine: function(mapObject) {
    // Create path coordinates
    var parts = []
    for (var i=0; i<mapObject.spatialLine.parts.size(); i++) {
        var coordinates = [];
        var part = mapObject.spatialLine.parts.get(i);
        for (var j=0; j<part.points.size(); j++) {
            var point = part.points.get(j);
            coordinates.push([point.x,point.y,point.z]);
        }
        parts.push(coordinates);
    }
    // Create polygon
    return new Polyline(parts.length==1 ? parts[0] : parts);
};
</code>

Below is an example of creating an esri/js Symbol.
  * [[https://developers.arcgis.com/javascript/3/jsapi/simplelinesymbol-amd.html|esri/js SimpleLineSymbol]]
  * [[https://developers.arcgis.com/javascript/3/jsapi/color-amd.html|esri/js Color]]

<code javascript>
/**
 * Create an esri/js symbol for rendering a mapobject line.
 */
getSymbolForLine: function(mapObject) {
    var color = this.defaultColor;
    var lineWidth = mapObject.lineWidth || this.defaultLineWidth;
    if (mapObject.color) {
        var a = mapObject.color.alpha/255;
        var r = mapObject.color.red;
        var g = mapObject.color.green;
        var b = mapObject.color.blue;
        color = new Color([r,g,b,a]);
    }
    return new SimpleLineSymbol(
        SimpleLineSymbol.STYLE_SOLID,
        color,
        lineWidth
    );
},
</code>

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

Below is an example of creating an esri/js Polygon geometry.
  * [[https://developers.arcgis.com/javascript/3/jsapi/polygon-amd.html|esri/js Polygon]]

<code javascript>
/**
 * Create an esri/js geometry for a mapObject area.
 */
getGeometryForArea: function(mapObject) {
    // Create parts of lists of coordinates.
    var parts = [];
    for (var i=0; i<mapObject.spatialArea.parts.size(); i++) {
        var coordinates = [];
        var part = mapObject.spatialArea.parts.get(i);
        for (var j=0; j<part.points.size(); j++) {
            var point = part.points.get(j);
            coordinates.push([point.x,point.y,point.z]);
        }
        parts.push(coordinates);
    }
    // Create polygon
    return new Polygon(parts.length==1 ? parts[0] : parts);
};
</code>

Below is an example of creating an esri/js filling Symbol.
  * [[https://developers.arcgis.com/javascript/3/jsapi/simplefillsymbol-amd.html|esri/js SimpleFillSymbol]]
  * [[https://developers.arcgis.com/javascript/3/jsapi/color-amd.html|esri/js Color]]

<code javascript>
/**
 * Create an esri/js symbol for rendering a mapobject area.
 */
getSymbolForArea: function(mapObject) {
    var fillColor = this.defaultFillColor;

    if (mapObject.fillColor) {
        var a = mapObject.fillColor.alpha/255;
        var r = mapObject.fillColor.red;
        var g = mapObject.fillColor.green;
        var b = mapObject.fillColor.blue;
        fillColor = new Color([r,g,b,a]);
    }

    return new SimpleFillSymbol(
        SimpleFillSymbol.STYLE_SOLID,
        this.getSymbolForLine(mapObject),
        fillColor
    );
};
</code>

===== Rendering points =====

And here is an example of creating an esri/js symbol using this WKT path : 
  * [[https://developers.arcgis.com/javascript/3/jsapi/simplemarkersymbol-amd.html|esri/js SimpleMarkerSymbol]]

<code javascript>
/**
 * Create an esri symbol for rendering a mapobject point.
 */
getSymbolForPoint: function(mapObject) {

    var color = this.defaultColor;
    var fillColor = this.defaultFillColor;
    var symbolSize = mapObject.symbolSize || this.defaultSymbolSize;
    var lineWidth = mapObject.lineWidth || this.defaultLineWidth;

    if (mapObject.color) {
        var a = mapObject.color.alpha/255;
        var r = mapObject.color.red;
        var g = mapObject.color.green;
        var b = mapObject.color.blue;
        color = new Color([r,g,b,a]);
    }

    if (mapObject.fillColor) {
        var a = mapObject.fillColor.alpha/255;
        var r = mapObject.fillColor.red;
        var g = mapObject.fillColor.green;
        var b = mapObject.fillColor.blue;
        fillColor = new Color([r,g,b,a]);
    }

    if (mapObject.symbolPath) {

        var parts = this.getSymbolPath(mapObject);
        var maxDistance = parts[0];
        var symbolPath = parts[1];

        var symbol = new SimpleMarkerSymbol();
        symbol.setSize(maxDistance*2);
        symbol.setPath(symbolPath);
        symbol.setColor(fillColor)
        symbol.setOutline(this.getSymbolForLine(mapObject));
        return symbol;
        
    } else {
    
        // Get symbol name, fall back on "circle".
        var predefinedNames = ["circle"];
        var symbolName = predefinedNames.indexOf(mapObject.symbolName)>=0 ? mapObject.symbolName : "circle";
        
        if (symbolName=="circle") {
            // The default symbol.
            var symbolName = SimpleMarkerSymbol.STYLE_CIRCLE;
            return new SimpleMarkerSymbol(symbolName,symbolSize,this.getSymbolForLine(mapObject),color,lineWidth),fillColor);
        }
    } 
};
</code>