Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cesium doesn't work over the file:// protocol

See original GitHub issue

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <script src="cesium/Build/CesiumUnminified/Cesium.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <style>
    @import url(cesium/Build/CesiumUnminified/Widgets/widgets.css);
    html, body, #cesiumContainer {
        width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script>
    Cesium.BingMapsApi.defaultKey = 'I am not going to post my key here, but pretend this is valid';
    const viewer = new Cesium.Viewer('container');

    const mapData = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom"><Document><name>MaineScubaDiving.kml</name><Style id="sh_water"><IconStyle><scale>1.4</scale><Icon><href>http://maps.google.com/mapfiles/kml/shapes/water.png</href></Icon><hotSpot x="0.5" y="0" xunits="fraction" yunits="fraction"/></IconStyle><ListStyle></ListStyle></Style><Style id="sn_water"><IconStyle><scale>1.2</scale><Icon><href>http://maps.google.com/mapfiles/kml/shapes/water.png</href></Icon><hotSpot x="0.5" y="0" xunits="fraction" yunits="fraction"/></IconStyle><ListStyle></ListStyle></Style><StyleMap id="msn_water"><Pair><key>normal</key><styleUrl>#sn_water</styleUrl></Pair><Pair><key>highlight</key><styleUrl>#sh_water</styleUrl></Pair></StyleMap><Folder><name>Portland Area Scuba Diving</name><open>1</open><Style><ListStyle><listItemType>check</listItemType><ItemIcon><state>open</state><href>:/mysavedplaces_open.png</href></ItemIcon><ItemIcon><state>closed</state><href>:/mysavedplaces_closed.png</href></ItemIcon><bgColor>00ffffff</bgColor><maxSnippetLines>2</maxSnippetLines></ListStyle></Style><Placemark><name>Two Lights (Dyer Cove)</name><LookAt><longitude>-70.19614327088985</longitude><latitude>43.56407610092381</latitude><altitude>0</altitude><heading>0.005721901271317009</heading><tilt>0</tilt><range>1032.924643200811</range><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_water</styleUrl><Point><gx:drawOrder>1</gx:drawOrder><coordinates>-70.19851561266309,43.56518137538722,0</coordinates></Point></Placemark><Placemark><name>Ft Williams</name><description>30-65 Ft Free parking</description><LookAt><longitude>-70.21224393621128</longitude><latitude>43.62602634978145</latitude><altitude>0</altitude><heading>-0.005023411931936011</heading><tilt>22.47331455228214</tilt><range>404.3217940943707</range><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_water</styleUrl><Point><gx:drawOrder>1</gx:drawOrder><coordinates>-70.21297525869396,43.6254352929708,0</coordinates></Point></Placemark><Placemark><name>Biddeford Pool</name><LookAt><longitude>-70.33905163232077</longitude><latitude>43.44545067410524</latitude><altitude>0</altitude><heading>0.2827201332560385</heading><tilt>0</tilt><range>259.679407890024</range><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_water</styleUrl><Point><gx:drawOrder>1</gx:drawOrder><coordinates>-70.33967757616416,43.44522220360595,0</coordinates></Point></Placemark></Folder></Document></kml>';

    Cesium.KmlDataSource.load($.parseXml(mapData),
    {
      camera: viewer.camera,
      canvas: viewer.canvas,
    }).then((dataSource) => {
      viewer.dataSources.add(dataSource);
      viewer.flyTo(dataSource.entities);
    });
  </script>
</body>

In the above minimal example, based on the KML example page, several coordinates, loaded as KML, are plotted with labels on the globe.

Everything works great when the example is loaded through the http:// or https:// protocols. However, if you try to view the example locally by opening the document in chrome (ie loading it via the file:// protocol), the viewer does not render or fly to the added entities.

My guess is that this might be caused by XHR failing to access URLs specified in styles or xmlnss. In any case, it might be nice to fail a bit more gracefully; at least print out a warning if the library is loaded via the file:// protocol.

Issue Analytics

State:
Created 6 years ago
Reactions:2
Comments:5 (4 by maintainers)

Top GitHub Comments

2reactions

mramatocommented, May 18, 2017

Cesium does not support operating over the file:// protocol because Cesium needs to XHR a bunch of resources like textures, EOP data, web worker scripts, and other stuff that’s in the Assets folder.

Just to clarify, Cesium absolutely works with file:// protocols, just not inside of a default sandboxed browser environment for the security reasons you stated. If you use inside Electron, WebView, or any other platform that allows for file access, everything works perfectly fine.

0reactions

filipdnscommented, Dec 3, 2018

Hello, I’m using WebView with Qt and file:// protocols is not accepted… How can I use it? WebEngineView in Qt has localContentCanAccessFileUrls :true in default, when I don’t know how solve my problem…