# KML image overlays cause WebGL crash in 1.44

**URL:** <https://community.cesium.com/t/kml-image-overlays-cause-webgl-crash-in-1-44/6842>\
**Category:** CesiumJS\
**Created:** [April 26, 2018, 9:56pm UTC](https://community.cesium.com/t/kml-image-overlays-cause-webgl-crash-in-1-44/6842 "2018-04-26T21:56:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rezn8d](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/rezn8d/32/11391_2.png) [@rezn8d](https://community.cesium.com/u/rezn8d)\
**Post date:** [April 26, 2018, 9:56pm UTC](https://community.cesium.com/t/kml-image-overlays-cause-webgl-crash-in-1-44/6842/1 "2018-04-26T21:56:30Z")

</div>

1. A concise explanation of the problem you're experiencing.

When loading KML files that include image overlays, "WebGL hit a snag" in Chrome. Typically, image loads correctly, shows on globe. Then perfomance slows dramatically (typically after ten to twenty seconds) followed by WebGL crash. This problem presented itself when upgrading from Cesium 1.39 to 1.44. Here is the error:  
  
Cesium.js:23 An error occurred while rendering. Rendering has stopped.  
undefined  
TypeError: Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'.  
TypeError: Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'.  
&nbsp;&nbsp;&nbsp;&nbsp;at f ([http://climateviewer.org/lib/cesium/1.44/Cesium.js:22:267365](http://climateviewer.org/lib/cesium/1.44/Cesium.js:22:267365))  
&nbsp;&nbsp;&nbsp;&nbsp;at y ([http://climateviewer.org/lib/cesium/1.44/Cesium.js:22:270502](http://climateviewer.org/lib/cesium/1.44/Cesium.js:22:270502))  
&nbsp;&nbsp;&nbsp;&nbsp;at d.\_bind ([http://climateviewer.org/lib/cesium/1.44/Cesium.js:22:271517](http://climateviewer.org/lib/cesium/1.44/Cesium.js:22:271517))  
&nbsp;&nbsp;&nbsp;&nbsp;at V ([http://climateviewer.org/lib/cesium/1.44/Cesium.js:23:46011](http://climateviewer.org/lib/cesium/1.44/Cesium.js:23:46011))  
&nbsp;&nbsp;&nbsp;&nbsp;at k.draw ([http://climateviewer.org/lib/cesium/1.44/Cesium.js:23:49646](http://climateviewer.org/lib/cesium/1.44/Cesium.js:23:49646))  
&nbsp;&nbsp;&nbsp;&nbsp;at n.execute ([http://climateviewer.org/lib/cesium/1.44/Cesium.js:22:240533](http://climateviewer.org/lib/cesium/1.44/Cesium.js:22:240533))  
&nbsp;&nbsp;&nbsp;&nbsp;at d.executeCopyColor ([http://climateviewer.org/lib/cesium/1.44/Cesium.js:23:546276](http://climateviewer.org/lib/cesium/1.44/Cesium.js:23:546276))  
&nbsp;&nbsp;&nbsp;&nbsp;at it ([http://climateviewer.org/lib/cesium/1.44/Cesium.js:23:725822](http://climateviewer.org/lib/cesium/1.44/Cesium.js:23:725822))  
&nbsp;&nbsp;&nbsp;&nbsp;at lt ([http://climateviewer.org/lib/cesium/1.44/Cesium.js:23:727634](http://climateviewer.org/lib/cesium/1.44/Cesium.js:23:727634))  
&nbsp;&nbsp;&nbsp;&nbsp;at ut ([http://climateviewer.org/lib/cesium/1.44/Cesium.js:23:727792](http://climateviewer.org/lib/cesium/1.44/Cesium.js:23:727792))  
x.showErrorPanel @ Cesium.js:23  
(anonymous) @ Cesium.js:23  
i.raiseEvent @ Cesium.js:18  
ut @ Cesium.js:23  
we.render @ Cesium.js:23  
x.render @ Cesium.js:23  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23  
requestAnimationFrame (async)   
r @ Cesium.js:22  
t @ Cesium.js:23

​2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

EXAMPLE ANIMATION FILE: [http://tropic.ssec.wisc.edu/real-time/atlantic/movies/kml/tiles/RT.atlantic.g8irn.tiles-8.kml](http://tropic.ssec.wisc.edu/real-time/atlantic/movies/kml/tiles/RT.atlantic.g8irn.tiles-8.kml)

VIEW LIVE EXAMPLE OF CRASH:

> **[ClimateViewer Maps • Live Earth Monitoring & Educational Resources](http://climateviewer.org/index.html?layersOn=cimss-irnhc)**
>
> Real-time atmospheric and geophysical monitoring with educational maps covering climate change, pollution, privacy, exploration, migration, geosciences, architecture, green energy solutions, sunken ships, airplane crash sites, weather modification,...

EXAMPLE SINGLE IMAGE FILE: [http://climateviewer.org/layers/kml/2018/honshu\_tsunami\_2011-03-11.kmz](http://climateviewer.org/layers/kml/2018/honshu_tsunami_2011-03-11.kmz)

VIEW LIVE EXAMPLE OF CRASH:

> **[ClimateViewer Maps • Live Earth Monitoring & Educational Resources](http://climateviewer.org/index.html?layersOn=fuku-tsunami)**
>
> Real-time atmospheric and geophysical monitoring with educational maps covering climate change, pollution, privacy, exploration, migration, geosciences, architecture, green energy solutions, sunken ships, airplane crash sites, weather modification,...

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I am trying to display live data from various weather and climate sources, along with mapping pollution using image overlays in KML format.

MY CODE:

function loadKml(layerId, geoDataSrc, proxy, zoom, markerImg, markerScale, markerLabel, markerMod, noList, timeline, rectangle, noClamp) {  
&nbsp;&nbsp;&nbsp;&nbsp;if (proxy) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var resource = new Cesium.Resource({  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url: geoDataSrc,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;proxy: {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;getURL: function (geoDataSrc) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return proxyURL + encodeURIComponent(geoDataSrc);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new Cesium.KmlDataSource.load(resource, {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//sourceUri: geoDataSrc,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;camera: viewer.scene.camera,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;canvas: viewer.scene.canvas,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clampToGround: noClamp  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}).then(function (geoData) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('loaded proxied kml');  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (markerMod) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;modKML(layerId, geoData, markerLabel, markerScale, noList, proxy);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('modified proxied kml');  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[//console.log](https://console.log)(geoData.entities);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;viewer.dataSources.add(geoData); // add to map  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;activeLayers[layerId] = geoData; // store for removal  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (zoom === true) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;viewer.flyTo(geoData);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loaded(layerId, timeline, rectangle);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, function (error) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loadError(layerId, geoDataSrc, error);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); // end then  
&nbsp;&nbsp;&nbsp;&nbsp;} else {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new Cesium.KmlDataSource.load(geoDataSrc, {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;camera: viewer.scene.camera,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;canvas: viewer.scene.canvas,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clampToGround: noClamp  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}).then(function (geoData) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('loaded kml');  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (markerMod) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;modKML(layerId, geoData, markerLabel, markerScale, noList);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('modified kml, no proxy');  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} // end markerMod  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;viewer.dataSources.add(geoData);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;activeLayers[layerId] = geoData;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (zoom === true) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;viewer.flyTo(geoData);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loaded(layerId, timeline, rectangle);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, function (error) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loadError(layerId, geoDataSrc, error);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); // end then  
&nbsp;&nbsp;&nbsp;&nbsp;} // end proxy  
}

noClamp = false, therefore clamptoground is off for these layers.

modKML allows me to build lists of markers, but is not used on these layers with the issue:

function modKML(layerId, geoData, markerLabel, markerScale, noList, proxy) {  
&nbsp;&nbsp;&nbsp;&nbsp;[//console.log](https://console.log)(noList);  
&nbsp;&nbsp;&nbsp;&nbsp;var entities = geoData.entities.values,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;items, markerList;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('nolist - ' + noList);  
&nbsp;&nbsp;&nbsp;&nbsp;if (noList === false) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var layerTarget = \(&#39;\.&#39; \+ layerId \+ &#39;\-details&#39;\); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;markerList = ('\<div class="details ' + layerId + '-list marker-list" /\>').insertAfter(layerTarget);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;items = ;  
&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i \< entities.length; i++) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var entity = entities[i];  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[//console.log](https://console.log)(entity);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (typeof entity.billboard !== 'undefined' && typeof entity.billboard.image !== 'undefined') {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (typeof entity.name != 'undefined') {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name = entity.name;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name = 'unnamed location';  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (markerLabel == 'none') {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var label = new Cesium.LabelGraphics();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label.text = "";  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;entity.label = label;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('removed kml label');  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (markerScale) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;entity.billboard.scale = markerScale;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;entity.billboard.width = 32;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;entity.billboard.height = 32;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[//entity.label.text](https://entity.label.text) = '';  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;entity.billboard.alignedAxis = Cesium.Cartesian3.ZERO;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;entity.billboard.scaleByDistance = defaultScaleByDistance;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (noList === false) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var v = entity.position.getValue();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var carto = Cesium.Ellipsoid.WGS84.cartesianToCartographic(v);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var lon = Cesium.Math.toDegrees(carto.longitude);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var lat = Cesium.Math.toDegrees(carto.latitude);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[//console.log](https://console.log)(lon, lat);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var name,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bcolor,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rgba,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hex;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (typeof entity.billboard.color != 'undefined') {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('marker has color');  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var t = entity.billboard.color.getValue();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var blkstr = ;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.each(t, function(idx2,val2) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (idx2 === 'red' || idx2 === 'green' || idx2 === 'blue') {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//var str = idx2 + ":" + val2;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;blkstr.push(val2 \* 255);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rgba = blkstr.join(", ");  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hex = rgb2hex('rgba(' + rgba + ',1)');  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hex = 'none';  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[//console.log](https://console.log)(hex);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//hex = 'none';

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var icu = entity.billboard.image.getValue().\_url;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[//console.log](https://console.log)(icu);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;items.push('\<li data-lon="' + lon + '" data-lat="' + lat + '"\>\<canvas width="20" height="20" class="marker-icon" data-src="' + icu + '" data-tint="' + hex + '"\>\</canvas\> &nbsp;' + name + '\</li\>');  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;} // end for loop

&nbsp;&nbsp;&nbsp;&nbsp;[//console.log](https://console.log)('loop kml complete');  
&nbsp;&nbsp;&nbsp;&nbsp;if (noList === false) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\(&#39;&lt;h5&gt;&lt;i class=&quot;fa fa\-fw fa\-map\-marker&quot;&gt;&lt;/i&gt; Map Markers &lt;span&gt;Click to fly to location&lt;/span&gt;&lt;/h5&gt;&#39;\)\.appendTo\(markerList\); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;('\<ol/\>', {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'class': 'markers',  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html: items.join('')  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}).appendTo(markerList);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\(&#39;\.&#39; \+ layerId \+ &#39;\-list li&#39;\)\.click\(function \(\) \{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var lon = (this).attr('data-lon');  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var lat = $(this).attr('data-lat');  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;viewer.camera.flyTo({  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;destination: Cesium.Cartesian3.fromDegrees(lon, lat, 1500.0)  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\(&#39;\.&#39; \+ layerId \+ &#39;\-list li canvas\.marker\-icon&#39;\)\.each\(function \(\) \{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var hexColor = (this).attr('data-tint');  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var icUrl = $(this).attr('data-src');

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var tintCanvas = document.createElement('canvas');  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tintCanvas.width = 20;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tintCanvas.height = 20;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var tintCtx = tintCanvas.getContext('2d');

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var ctx = $(this)[0].getContext('2d');  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var x = 0;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var y = 0;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var pic = new Image();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (hexColor !== 'none') {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pic.onload = function () {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tintCtx.fillStyle = hexColor;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tintCtx.fillRect(x,y,20,20);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tintCtx.globalCompositeOperation = "destination-atop";  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tintCtx.drawImage(pic, x, y);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.drawImage(pic, x, y, pic.width = 20, pic.height = 20);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.globalAlpha = 0.9;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.drawImage(tintCanvas, x, y);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pic.onload = function () {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.drawImage(pic, x, y, pic.width = 20, pic.height = 20);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.globalAlpha = 1;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.drawImage(tintCanvas, x, y);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pic.src = icUrl;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});  
&nbsp;&nbsp;&nbsp;&nbsp;}  
}

4. The Cesium version you're using, your operating system and browser.  
Cesium version 1.44  
Windows 7 64bit ultimate  
Chrome Version 65.0.3325.181 (Official Build) (64-bit)

---

<div class="post-metadata">

**Author:** ![Gabby\_Getz](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/gabby_getz/32/7838_2.png) [@Gabby\_Getz](https://community.cesium.com/u/Gabby_Getz)\
**Post date:** [May 1, 2018, 3:31pm UTC](https://community.cesium.com/t/kml-image-overlays-cause-webgl-crash-in-1-44/6842/2 "2018-05-01T15:31:10Z")

</div>

Hi there,

I was unable to duplicate the error in the app on my machine.

Can you put together a simple [Sandcastle demo](https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=Hello%20World.html&label=Showcases) to duplicate the error on your system? That will help us track down the issue here.

Thanks!

Gabby

---

<div class="post-metadata">

**Author:** ![rezn8d](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/rezn8d/32/11391_2.png) [@rezn8d](https://community.cesium.com/u/rezn8d)\
**Post date:** [May 19, 2018, 5:06pm UTC](https://community.cesium.com/t/kml-image-overlays-cause-webgl-crash-in-1-44/6842/3 "2018-05-19T17:06:12Z")

</div>

Devs were able to confirm, made an issue on github. Is flagged high importance:  
[https://github.com/AnalyticalGraphicsInc/cesium/issues/6567](https://github.com/AnalyticalGraphicsInc/cesium/issues/6567)