<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Consolas;
panose-1:2 11 6 9 2 2 4 3 2 4;}
@font-face
{font-family:inherit;
panose-1:0 0 0 0 0 0 0 0 0 0;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:#0563C1;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:#954F72;
text-decoration:underline;}
p
{mso-style-priority:99;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:12.0pt;
font-family:"Times New Roman",serif;}
code
{mso-style-priority:99;
font-family:"Courier New";}
pre
{mso-style-priority:99;
mso-style-link:"HTML Preformatted Char";
margin:0in;
margin-bottom:.0001pt;
font-size:10.0pt;
font-family:"Courier New";}
span.HTMLPreformattedChar
{mso-style-name:"HTML Preformatted Char";
mso-style-priority:99;
mso-style-link:"HTML Preformatted";
font-family:"Courier New";}
p.msonormal0, li.msonormal0, div.msonormal0
{mso-style-name:msonormal;
mso-style-priority:99;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:12.0pt;
font-family:"Times New Roman",serif;}
p.mb0, li.mb0, div.mb0
{mso-style-name:mb0;
mso-style-priority:99;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:12.0pt;
font-family:"Times New Roman",serif;}
span.EmailStyle23
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:windowtext;}
span.relativetime
{mso-style-name:relativetime;}
span.hljs-string
{mso-style-name:hljs-string;}
span.hljs-tag
{mso-style-name:hljs-tag;}
span.hljs-name
{mso-style-name:hljs-name;}
span.hljs-attr
{mso-style-name:hljs-attr;}
span.javascript
{mso-style-name:javascript;}
span.hljs-keyword
{mso-style-name:hljs-keyword;}
span.hljs-class
{mso-style-name:hljs-class;}
span.hljs-title
{mso-style-name:hljs-title;}
span.hljs-builtin
{mso-style-name:hljs-built_in;}
span.EmailStyle34
{mso-style-type:personal-reply;
font-family:"Calibri",sans-serif;
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang="EN-US" link="#0563C1" vlink="#954F72">
<div class="WordSection1">
<p style="margin-top:0in;background:white;vertical-align:baseline"><span style="font-size:11.5pt;font-family:"Arial",sans-serif;color:#242729">I am upgrading my app from OpenLayers 4.6.4 to 6.1.1 and I can't figure out how to extend Tile in OL6. My code is
as follows which works in OL 4.6.4. </span><span style="font-size:11.5pt;font-family:"Arial",sans-serif;color:#1F497D"> </span><span style="font-size:11.5pt;font-family:"Arial",sans-serif;color:#242729">What would I do to achieve the same thing in OpenLayers
6?<o:p></o:p></span></p>
<p style="margin-top:0in;background:white;vertical-align:baseline;margin-bottom:var(--s-prose-spacing);font-variant-ligatures: normal;font-variant-caps: normal;font-variant-numeric: inherit;font-variant-east-asian: inherit;font-stretch: inherit;line-height:inherit;box-sizing: inherit;orphans: 2;widows: 2;-webkit-text-stroke-width: 0px;text-decoration-style: initial;text-decoration-color: initial;word-spacing:0px">
<span style="font-size:11.5pt;font-family:"Arial",sans-serif;color:#242729">My error is:
</span><span style="font-size:11.5pt;font-family:"inherit",serif">Uncaught TypeError: Class extends value undefined is not a constructor or null<br>
</span><span style="font-size:11.5pt;font-family:"Arial",sans-serif;color:#242729"><br>
index.html that includes OL6.1.1 is:<o:p></o:p></span></p>
<pre style="vertical-align:baseline;margin-bottom:calc(var(--s-prose-spacing) + 0.4em);font-variant-ligatures: normal;font-variant-caps: normal;font-variant-numeric: inherit;font-variant-east-asian: inherit;font-stretch: inherit;box-sizing: inherit;max-height: 600px;background-color:var(--highlight-bg);border-radius: 5px;color:var(--highlight-color);overflow-wrap: normal;orphans: 2;widows: 2;-webkit-text-stroke-width: 0px;text-decoration-style: initial;text-decoration-color: initial;overflow:auto;word-spacing:0px"><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"><link rel=</span></code><span class="hljs-string"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">"stylesheet"</span></span><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> href=</span></code><span class="hljs-string"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">"ol.css"</span></span><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">><o:p></o:p></span></code></pre>
<pre style="vertical-align:baseline"><span class="hljs-tag"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"><</span></span><span class="hljs-name"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">script</span></span><span class="hljs-tag"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> </span></span><span class="hljs-attr"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">src</span></span><span class="hljs-tag"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">=</span></span><span class="hljs-string"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">"ol.js"</span></span><span class="hljs-tag"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">></</span></span><span class="hljs-name"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">script</span></span><span class="hljs-tag"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">></span></span><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"><o:p></o:p></span></code></pre>
<pre style="vertical-align:baseline"><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"><o:p> </o:p></span></code></pre>
<pre style="vertical-align:baseline"><span class="hljs-tag"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"><</span></span><span class="hljs-name"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">div</span></span><span class="hljs-tag"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> </span></span><span class="hljs-attr"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">tabindex</span></span><span class="hljs-tag"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">=</span></span><span class="hljs-string"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">"700"</span></span><span class="hljs-tag"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> </span></span><span class="hljs-attr"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">id</span></span><span class="hljs-tag"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">=</span></span><span class="hljs-string"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">"map"</span></span><span class="hljs-tag"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> </span></span><span class="hljs-attr"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">class</span></span><span class="hljs-tag"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">=</span></span><span class="hljs-string"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">"map"</span></span><span class="hljs-tag"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">></</span></span><span class="hljs-name"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">div</span></span><span class="hljs-tag"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">></span></span><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"><o:p></o:p></span></code></pre>
<pre style="vertical-align:baseline"><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"><o:p> </o:p></span></code></pre>
<pre style="vertical-align:baseline"><span class="hljs-tag"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"><</span></span><span class="hljs-name"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">script</span></span><span class="hljs-tag"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> </span></span><span class="hljs-attr"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">type</span></span><span class="hljs-tag"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">=</span></span><span class="hljs-string"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">"module"</span></span><span class="hljs-tag"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">></span></span><span class="javascript"><o:p></o:p></span></pre>
<pre style="vertical-align:baseline"><span class="javascript"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> </span></span><span class="hljs-keyword"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">import</span></span><span class="javascript"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> MapView </span></span><span class="hljs-keyword"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">from</span></span><span class="javascript"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> </span></span><span class="hljs-string"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">'./mapview.js'</span></span><span class="javascript"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">;<o:p></o:p></span></span></pre>
<pre style="vertical-align:baseline"><span class="javascript"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"><o:p> </o:p></span></span></pre>
<pre style="vertical-align:baseline"><span class="javascript"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> </span></span><span class="hljs-keyword"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">var</span></span><span class="javascript"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> mv = </span></span><span class="hljs-keyword"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">new</span></span><span class="javascript"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> MapView();<o:p></o:p></span></span></pre>
<pre style="vertical-align:baseline"><span class="hljs-tag"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"></</span></span><span class="hljs-name"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">script</span></span><span class="hljs-tag"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">></span></span><code><span style="font-family:"inherit",serif"><o:p></o:p></span></code></pre>
<p style="margin-top:0in;background:white;vertical-align:baseline;margin-bottom:var(--s-prose-spacing);font-variant-ligatures: normal;font-variant-caps: normal;font-variant-numeric: inherit;font-variant-east-asian: inherit;font-stretch: inherit;line-height:inherit;box-sizing: inherit;orphans: 2;widows: 2;-webkit-text-stroke-width: 0px;text-decoration-style: initial;text-decoration-color: initial;word-spacing:0px">
<span style="font-size:11.5pt;font-family:"Arial",sans-serif;color:#242729"><o:p> </o:p></span></p>
<p style="margin-top:0in;background:white;vertical-align:baseline"><span style="font-size:11.5pt;font-family:"Arial",sans-serif;color:#242729">My map view class contains the following (which works in OpenLayers 4):<o:p></o:p></span></p>
<pre style="vertical-align:baseline;font-variant-ligatures: normal;font-variant-caps: normal;font-variant-numeric: inherit;font-variant-east-asian: inherit;font-stretch: inherit;box-sizing: inherit;max-height: 600px;background-color:var(--highlight-bg);border-radius: 5px;color:var(--highlight-color);overflow-wrap: normal;orphans: 2;widows: 2;-webkit-text-stroke-width: 0px;text-decoration-style: initial;text-decoration-color: initial;overflow:auto;word-spacing:0px"><span class="hljs-keyword"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">class</span></span><span class="hljs-class"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> </span></span><span class="hljs-title"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">CanvasTile</span></span><span class="hljs-class"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> </span></span><span class="hljs-keyword"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">extends</span></span><span class="hljs-class"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> </span></span><span class="hljs-title"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">ol</span></span><span class="hljs-class"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">.</span></span><span class="hljs-title"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">Tile</span></span><span class="hljs-class"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> </span></span><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">{<o:p></o:p></span></code></pre>
<pre style="vertical-align:baseline"><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> </span></code><span class="hljs-keyword"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">constructor</span></span><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">(tileCoord, state, src, crossOrigin, tileLoadFunction, options) {<o:p></o:p></span></code></pre>
<pre style="vertical-align:baseline"><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> </span></code><span class="hljs-builtin"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">super</span></span><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">(tileCoord, state, options);<o:p></o:p></span></code></pre>
<pre style="vertical-align:baseline"><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> </span></code><span class="hljs-builtin"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">this</span></span><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">.canvas = </span></code><span class="hljs-builtin"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">document</span></span><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">.createElement(</span></code><span class="hljs-string"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">'canvas'</span></span><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">);<o:p></o:p></span></code></pre>
<pre style="vertical-align:baseline"><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> </span></code><span class="hljs-builtin"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">this</span></span><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">.tileLoadFunction = tileLoadFunction;<o:p></o:p></span></code></pre>
<pre style="vertical-align:baseline"><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> </span></code><span class="hljs-builtin"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">this</span></span><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">.src = src;<o:p></o:p></span></code></pre>
<pre style="vertical-align:baseline"><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> }<o:p></o:p></span></code></pre>
<pre style="vertical-align:baseline"><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"><o:p> </o:p></span></code></pre>
<pre style="vertical-align:baseline"><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> getCanvas() {<o:p></o:p></span></code></pre>
<pre style="vertical-align:baseline"><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> </span></code><span class="hljs-keyword"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">return</span></span><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> </span></code><span class="hljs-builtin"><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">this</span></span><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">.canvas;<o:p></o:p></span></code></pre>
<pre style="vertical-align:baseline"><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in"> }<o:p></o:p></span></code></pre>
<pre style="vertical-align:baseline"><code><span style="font-family:"inherit",serif;border:none windowtext 1.0pt;padding:0in">}</span></code><span style="font-family:Consolas"><o:p></o:p></span></pre>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Ashley Mort<o:p></o:p></p>
<p class="MsoNormal"><span style="font-size:10.0pt">Sr. Software Engineer<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:9.0pt">972-638-6317 office<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:9.0pt">814-571-3039 cell<o:p></o:p></span></p>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
</body>
</html>