nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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 Web Map Task'
    });

    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

Find more posts tagged with

Accepted answers

Noah Sager

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

Noah Sager

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?

All comments

Noah Sager

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

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

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

Any idea what the issue might be?

AndrewMurdoch1

GitHub - docmur/esri-printtask-issue

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

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

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

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?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.