Error loading 3D Map

[Gemeapp]

Description

When I try to load the map I get the following error

Steps to Reproduce

I just created created this simple html page

<div style="position: relative">
    <div id="map" style="height: 400px"></div>
</div>

and then called this in my controller

L.Wrld.map("map", "my key", {
  center: [37.7858, -122.401],
  zoom: 16
});

Expected behavior: [What you expect to happen]
I expected to see a map
Actual behavior: [What actually happens]
Getting just a blank page due to the above javascript error
Reproduces how often: [What percentage of the time does it reproduce?]
ALl the time

Additional Information

Any additional information, configuration or data that might be necessary to reproduce the issue, e.g.:

• What device, operating system & web browser are you using?
• A simple https://jsfiddle.net link that reproduces the problem. (Please remove any sensitive credentials or API keys before posting, though! For convenience, you can fork & modify this JSFiddle https://jsfiddle.net/1348xhej/)

I am getting this error in Chrome, and it seems it could be that the plugin are setting these headers and that is not allowed:
http://www.w3.org/TR/XMLHttpRequest/#the-setrequestheader-method

But I might just miss the real point as running it on my android browser i get a lot of files not found:

file://webgl-cdn1.eegeo.com/chunk/v3.0/us/2016_09_20_california_buildings_003/Ground/0/1/1/3/1/2/3/2/1/3/0/2/2/2/Ground.hcff?appinfo=Undefined%1F712172522aba50fad073946d0b4f4e4a%1F1225%1F1fb69cf6ac665b2d7d84da945ee15a9a45e30fcb%1FUndefined%1FUndefined%1FJavascript%1FUndefined%1FUndefined%1FJavascript

So are there a place I should define some variables that are undefined in the above url

[tim-jenks]

Hi @Gemeapp,

Given the file:// path below, I strongly suspect that you are loading our maps from a file on disk, and not over HTTP or HTTPS.

The following jsfiddle shows the problem not reproducing: https://jsfiddle.net/1348xhej/ - please insert your API key and hit run.

Specifically I'd recommend the following:

Upload your HTML somewhere, or view it locally. I recommend not loading directly from the file system but using a local loopback web server. Save your HTML as index.html, and in the same folder, run: python -m SimpleHTTPServer 8000 You can then visit http://localhost:8000/ in your browser.

More assistance can be found here: https://www.sitepoint.com/3d-maps-with-eegeo-and-leaflet/

I'm going to close this issue - please re-open if this does not solve the issue with additional reproduction steps.

[ThorvaldAagaard]

I am running my app on a device, and you have probably spotted the problem, as I have seen that in another situation. Somewhere in your code there is an url like

//webgl-cdn1.eegeo.com/chunk/v3.0/us/2016_09_20_california_buildings_003/Ground/0/1/1/3/1/2/3/2/1/3/0/2/2/2/Ground.hcff?

and then the protocol used for loading the app is inherited (file://)

As I am also targeting a browser I have used that for testing, and here the start looks ok, but I still run into problems

I am testing on Chrome Version 61.0.3163.79 (Officiel version) (64-bit)

[ThorvaldAagaard]

By the way I can get the same error using jsfiddle

but on jsfiddle the map is shown despite the error.

So it is probably just an issue with the html.

In fiddle I can see som script changing the height of the div-tag, and that is not included on my page, and the map-div element stays a 0 height

[tim-jenks]

Hi @ThorvaldAagaard
As you mention file:// protocol is unsupported just now, the work-around is to host via a loopback webserver mentioned in comment just above here with a python loopback server.

Can you confirm you're not running via file:// ?

[ThorvaldAagaard]

On android and IOS as native app it is using file, and if that isn't supported, i have no business case.

But i have made a version in the browser that does not use file:// just to test. And as shown in fiddle you should look at the error in the console.

I my webapp the map is not displaed and probably due to the missing height

[ThorvaldAagaard]

Ok, I have now confirmed that the 2 error messages from the browser is not my problem, but the height is.

I have made a 1000 px high, and the map is shown but only 5px high.

It would still be nice to get rid of the error messages, but what is needed for controlling the height?

Manually changing the heigt in the DOM-tree gives this result

[jlunderwood]

Our examples (e.g. https://docs.wrld3d.com/wrld.js/latest/docs/examples/) set the height of the map via a style tag on the containing div. In practice, this value would come from a stylesheet for the page.

You are correct that the "Refused to set unsafe header" errors should not affect display of the map. Unfortunately these are generated by a library we use and are currently outside our control.

[ThorvaldAagaard]

I am setting a height on the div tag, but after adding the map it looks like the div tag height was minimized. But I will give it a new try.

The issue with the protocol you inheret from how the app is loaded, thus preventing the map to be used on devices, is that also a library issue

[jlunderwood]

The problem with using wrld.js through a file:// URL is due to browser security restrictions on loading data from the local filesystem. For running on a device, we recommend our Android SDK or iOS SDK.

[ThorvaldAagaard]

I am using Ionic (PhoneGap), that targets both platforms in a webview, so using the specific SDK's are not an option. All that is needed is that the library should not inherit the protocol but force http or https

But as Ionic also targets a browserplatform I have uploaded a version to https://geme-cce67.firebaseapp.com/#/mapdemo - Here you can see my problem with displaying the 3D-world - The hieght of the map div is set to 75%

[tim-jenks]

@ThorvaldAagaard we will schedule a fix to the file:// protocol inference as soon as we can.

I'm not sure about your height problem, our maps display in a div & surface that's dimensions are completely in your control, can you please confirm that this is not an issue with your styling, and if it is not an issue with your styling provide a smaller reproduction?

[ThorvaldAagaard]

It seems to be a timing issue with the loading of the my page, so you can just ignore the height issue.

[tim-jenks]

Adding to roadmap to schedule file:// protocol isssues

[si458]

Hi,
was the any fix for the file:// issue?,
im using cordova (main code for phonegap/ionic),
which loads the index.html as file:// and the wrld.js is still trying to load the map from file://webgl-cdn1.eegeo.com/mobile-theme-new/ instead of http:// or https://

[tim-jenks]

This is scheduled for fixing - issue is still present.

For phonegap we have managed to circumvent this previously: https://github.com/wrld3d/wrld-phonegap

[si458]

ive already tried the phonegap repo and it doesnt work either,
i cant even get it to BUILD :(

[si458]

ok managed to get the repo to build,

1. had to remove ALL plugins as they arnt need in any which way
2. if you use the latest wrld.js from the /dist/latest/wrld.js, it generates the file:// error
3. if you use the included eegeo.js it works fine, so the has been a change in the js file over the past year
4. /early_access/latest/wrld.js DOES NOT EXIST, so have been unable to test this