PrintTemplate - Polylines show with no colour, Points are fine

[AndrewMurdoch1]

Good Day (Editing to push back up the forum)

I integrated a print template to capture the maps in our software.  When I capture polylines they render without colour, but if I capture points, they render just fine, is there something I have to set when building the polylines to in order for the capture to grab the colour? 

I've attached some sample captures showing the difference:

The legend / feature layer information at the bottom is correct, with the correct name and colour being shown, so I don't think this is a feature layer issue, this is my print template code, and I've tried using PDF, it renders the same way;

printMap() {
  const usePrintTask = true;
  if (usePrintTask) {
    const printTask = this.PrintTask({
      url: 'https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task'
    });

    const template = new this.PrintTemplate({
      format: 'jpg',
      layout: 'a4-landscape',
      layoutOptions: {
        titleText: 'DOT ESRI Map',
        authorText: 'Infrasol'
      }
    });

    const params = new this.PrintParameters({
      view: this._view,
      template: template
    });

    printTask.execute(params).then(this.printResult, this.printError);
  } else {
    this._view.takeScreenshot().then( (res) => {
      console.log('Res');
      console.log(res);

      const w = window.open('about:blank');
      const image = new Image();
      image.src = res.dataUrl;
      setTimeout(() => {
        w.document.write(image.outerHTML);
      },  0);
    });
  }
}

printResult(result) {
  console.log('Result');
  console.log(result);

  console.log(result.url);
  window.open(result.url);
}

printError(err) {
  console.log('ESRI Print Task Error: ', err);
}

Have I done anything clearly wrong?

Thanks

[Noah-Sager]

Can you share a simple sample showing this in action? What is the code used to create the polylines? What is the behavior if you just use the print widget? What is the version of the JS API?

[AndrewMurdoch1]

Thanks for the reply:

API Version: 4.14
Example Print Task:

Example using the Print Widget

Example using the screenshot (Works but doesn't have the template)

I generate the polyline geoJSON with this:

if (coordinateText) {
  const _temp = WKT.parse(coordinateText);
  if (_temp) {
    let geometry;
    switch (_temp.type) {
      case 'LineString':
        geometry = {
          type: 'polyline',
          paths: 'coordinates' in _temp ? _temp.coordinates : null,
        }
        break;
      case 'Polygon':
        geometry = {
          type: 'polygon',
          rings: 'coordinates' in _temp ? _temp.coordinates : null,
        }
        break;
      default:
        break;
    }

    return {
      geometry: _.cloneDeep(geometry),
      attributes: {
        ObjectID: randomObjectID,
        colour: _.cloneDeep(entry.colour),
      }
    };
  }
}

Then I build the Feature Layers with:

  buildFeatureSettings(geometryType, data, colour) {
    return {
      source: data,
      renderer: this.buildRenderSettings(data, colour, geometryType.toString().includes('point')),
      fields: this._fields,
      objectIdField: 'ObjectID',
      geometryType: geometryType,
      spatialReference: {
        wkid: 4326
      },
      title: 'Random Title'
    };
  }

  buildRenderSettings(data, colour: string, marker = false) {
    return {
      type: 'simple',
      symbol: {
        style: marker ? 'circle' : null,
        type: marker ? 'simple-marker' : 'simple-fill',
        size: marker ? 12 : 30,
        color: _.cloneDeep(colour),
        outline: {
          width: 4,
          color: _.cloneDeep(colour),
        }
      },
    }
  }

Thanks for you assistance, I can try throwing together a code sample a bit later.

Thanks

[Noah-Sager]

Yeah, a working simple sample will help to figure out what's occurring. My hunch has to do with how the features are getting added to the map.

[AndrewMurdoch1]

GitHub - docmur/esri-printtask-issue 

If you run that project and press the print button you'll get:

[AndrewMurdoch1]

Any idea what the issue might be?

[Noah-Sager · Accepted solution]

Couple things come to mind:

1) Are you using a SimpleFillSymbol for the polyline? That symbol is for polygons.

SimpleFillSymbol | ArcGIS API for JavaScript 4.16 

2) The style is set to "null" on line 274, which is not a valid value.

SimpleFillSymbol | ArcGIS API for JavaScript 4.16 

3) Looks like you're using version 4.14. The current version is 4.16. Can you also test with 4.16?

[AndrewMurdoch1]

Good Day

Thanks for the suggestions, that was the problem! 

When I changed it to simple-line the problem went away.  I removed the style: null, it wasn't relevant for our actual code base and the same problem persisted on 4.16.

Thanks for your help.

[Noah-Sager · Accepted solution]

Excellent, glad we got it figured out. Feel free to mark this question as answered, even if you provided the answer yourself.