PrintTemplate - Polylines show with no colour, Points are fine

1082
8
Jump to solution
07-28-2020 09:50 AM
AndrewMurdoch1
Occasional Contributor II

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

0 Kudos
2 Solutions

Accepted Solutions
Noah-Sager
Esri Regular Contributor

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?

View solution in original post

Noah-Sager
Esri Regular Contributor

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

View solution in original post

8 Replies
Noah-Sager
Esri Regular Contributor

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?

0 Kudos
AndrewMurdoch1
Occasional Contributor II

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

0 Kudos
Noah-Sager
Esri Regular Contributor

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
Occasional Contributor II

GitHub - docmur/esri-printtask-issue 

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

0 Kudos
AndrewMurdoch1
Occasional Contributor II

Any idea what the issue might be?

0 Kudos
Noah-Sager
Esri Regular Contributor

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
Occasional Contributor II

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
Esri Regular Contributor

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