I'd like to report a broken functionality, I cannot create the ElevationLayer in webworker anymore, ending with the error of: {name: "ReferenceError", message: "document is not defined", details: undefined} Webworker file (excerpt) Calculator . prototype . startViewshed = function ( data , connection ) { if ( ! elevationLayer || elevationLayer . url !== data . url ) { // --> Error happens here elevationLayer = new ElevationLayer ( { url : data . url } ) ; } . . . . . . I need to create the ElevationLayer so I can create an elevationSampler and run the analysis on it. Apparently, the 4.11 version does require a 'document' to be available, whereas it wasn't a requirement for 4.10 version of ElevationLayer class. Please advise the relevant workaround for this issue. Thank you.

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; } } }

ESRI JS API 4.11: webworkers: document is not defined

Anonymous User

I'd like to report a broken functionality, I cannot create the ElevationLayer in webworker anymore, ending with the error of:

{name: "ReferenceError", message: "document is not defined", details: undefined}

Webworker file (excerpt)

Calculator<SPAN class="punctuation token">.</SPAN>prototype<SPAN class="punctuation token">.</SPAN>startViewshed <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">,</SPAN> connection<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>elevationLayer <SPAN class="operator token">||</SPAN> elevationLayer<SPAN class="punctuation token">.</SPAN>url <SPAN class="operator token">!==</SPAN> data<SPAN class="punctuation token">.</SPAN>url<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="comment token">// --> Error happens here</SPAN>
    elevationLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ElevationLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
      url<SPAN class="punctuation token">:</SPAN> data<SPAN class="punctuation token">.</SPAN>url
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="punctuation token">}</SPAN>

<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

I need to create the ElevationLayer so I can create an elevationSampler and run the analysis on it. Apparently, the 4.11 version does require a 'document' to be available, whereas it wasn't a requirement for 4.10 version of ElevationLayer class.

Please advise the relevant workaround for this issue. Thank you.

Find more posts tagged with

Accepted answers

All comments

UndralBatsukh

Hi there,

The issue is fixed at version 4.12. I apologize that this fix was not listed in the release notes.

Anonymous User

Has this been really resolved ? I can't see it in the release ntoes
Release notes for 4.12 | ArcGIS API for JavaScript 4.12

UndralBatsukh

Hi there,

This bug has been addressed at JS API version 4.12. This version will be released later this month.

UndralBatsukh

Hi there,

A developer on the team was able to reproduce the issue you are describing. We created an issue for this and thank you for bringing this issue to our attention.

Anonymous User

I've tried your sample, it didn't work. I'm 100% sure it's 4.11 that I'm pulling.

Anonymous User

Hi Undral,

do you have a sandbox somewhere? For me it's simply not working with 4.11, 4.10 works fine. What browser you are using?

UndralBatsukh

Hi there,

I am not able to reproduce the issue using our workers framework which uses webworkers. I am able to create a new instance of ElevationLayer without errors. The following is super simplified version of the test app.

Worker script
<SPAN class="token function">define</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
    <SPAN class="string token">"esri/layers/ElevationLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"esri/core/promiseUtils"</SPAN>
  <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>ElevationLayer<SPAN class="punctuation token">,</SPAN> promiseUtils<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="keyword token">return</SPAN> <SPAN class="punctuation token">{</SPAN>
      createPoints<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">var</SPAN> url <SPAN class="operator token">=</SPAN> data<SPAN class="punctuation token">.</SPAN>url<SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">var</SPAN> elevationLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ElevationLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          url<SPAN class="punctuation token">:</SPAN> data<SPAN class="punctuation token">.</SPAN>url
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">return</SPAN> elevationLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">load</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
          console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"layer"</SPAN><SPAN class="punctuation token">,</SPAN> elevationLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

          <SPAN class="keyword token">return</SPAN> promiseUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">resolve</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
            data<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
              sr<SPAN class="punctuation token">:</SPAN> elevationLayer<SPAN class="punctuation token">.</SPAN>spatialReference<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toJSON</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
            <SPAN class="punctuation token">}</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
        <SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">catch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>error<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">return</SPAN> promiseUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">resolve</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
            data<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
              error<SPAN class="punctuation token">:</SPAN> error
            <SPAN class="punctuation token">}</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>
    <SPAN class="punctuation token">}</SPAN>
  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

HTML APP  
<SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/4.11/"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>

  <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
    <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
      <SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/layers/ElevationLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/core/workers/workers"</SPAN>
    <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>
      Map<SPAN class="punctuation token">,</SPAN> MapView<SPAN class="punctuation token">,</SPAN> ElevationLayer<SPAN class="punctuation token">,</SPAN> workers
    <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>

      <SPAN class="keyword token">var</SPAN> local <SPAN class="operator token">=</SPAN> window<SPAN class="punctuation token">.</SPAN>location<SPAN class="punctuation token">.</SPAN>href<SPAN class="punctuation token">.</SPAN><SPAN class="token function">substring</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> window<SPAN class="punctuation token">.</SPAN>location<SPAN class="punctuation token">.</SPAN>href<SPAN class="punctuation token">.</SPAN><SPAN class="token function">lastIndexOf</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'/'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">var</SPAN> workerUrl <SPAN class="operator token">=</SPAN> local <SPAN class="operator token">+</SPAN> <SPAN class="string token">"/createPointsWorker.js"</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"oceans"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
        map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
        zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4</SPAN><SPAN class="punctuation token">,</SPAN>
        center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">100</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">35</SPAN><SPAN class="punctuation token">]</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">var</SPAN> url <SPAN class="operator token">=</SPAN> <SPAN class="string token">"https://sampleserver6.arcgisonline.com/arcgis/rest/services/ScientificData/SeaTemperature/ImageServer"</SPAN>

      view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">var</SPAN> params <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
          url<SPAN class="punctuation token">:</SPAN> url
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="token function">executeWorker</SPAN><SPAN class="punctuation token">(</SPAN>params<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">function</SPAN> <SPAN class="token function">executeWorker</SPAN><SPAN class="punctuation token">(</SPAN>params<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>workerUrl<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">var</SPAN> connection<SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">return</SPAN> workers<SPAN class="punctuation token">.</SPAN><SPAN class="token function">open</SPAN><SPAN class="punctuation token">(</SPAN>workerUrl<SPAN class="punctuation token">)</SPAN>
          <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>conn<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>params<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            connection <SPAN class="operator token">=</SPAN> conn<SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">return</SPAN> connection<SPAN class="punctuation token">.</SPAN><SPAN class="token function">invoke</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"createPoints"</SPAN><SPAN class="punctuation token">,</SPAN> params<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
          <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>results<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            connection<SPAN class="punctuation token">.</SPAN><SPAN class="token function">close</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"results from the workers"</SPAN><SPAN class="punctuation token">,</SPAN> results<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN>body<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewDiv"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator token">></SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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.