Example using MapObjects in Esri/JS

Below is an example of creating an esri/js Polyline geometry.

• esri/js Polyline

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

Below is an example of creating an esri/js Symbol.

• esri/js SimpleLineSymbol
• esri/js Color

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

Below is an example of creating an esri/js Polygon geometry.

• esri/js Polygon

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

Below is an example of creating an esri/js filling Symbol.

• esri/js SimpleFillSymbol
• esri/js Color

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

And here is an example of creating an esri/js symbol using this WKT path :

• esri/js SimpleMarkerSymbol

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