Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error loading 3D Map #40

Open
Gemeapp opened this issue Sep 1, 2017 · 17 comments
Open

Error loading 3D Map #40

Gemeapp opened this issue Sep 1, 2017 · 17 comments
Labels
bug
Milestone

Comments

@Gemeapp
Copy link

@Gemeapp Gemeapp commented Sep 1, 2017

Description

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

image

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 tim-jenks added the bug label Sep 2, 2017
@tim-jenks

This comment has been minimized.

Copy link

@tim-jenks tim-jenks commented Sep 2, 2017

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.

@tim-jenks tim-jenks closed this Sep 2, 2017
@ThorvaldAagaard

This comment has been minimized.

Copy link

@ThorvaldAagaard ThorvaldAagaard commented Sep 5, 2017

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
image

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

@ThorvaldAagaard

This comment has been minimized.

Copy link

@ThorvaldAagaard ThorvaldAagaard commented Sep 5, 2017

By the way I can get the same error using jsfiddle

image

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

This comment has been minimized.

Copy link

@tim-jenks tim-jenks commented Sep 6, 2017

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:// ?

@tim-jenks tim-jenks reopened this Sep 6, 2017
@ThorvaldAagaard

This comment has been minimized.

Copy link

@ThorvaldAagaard ThorvaldAagaard commented Sep 6, 2017

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

This comment has been minimized.

Copy link

@ThorvaldAagaard ThorvaldAagaard commented Sep 6, 2017

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.

image

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
image

@jlunderwood

This comment has been minimized.

Copy link
Contributor

@jlunderwood jlunderwood commented Sep 7, 2017

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

This comment has been minimized.

Copy link

@ThorvaldAagaard ThorvaldAagaard commented Sep 7, 2017

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

This comment has been minimized.

Copy link
Contributor

@jlunderwood jlunderwood commented Sep 7, 2017

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

This comment has been minimized.

Copy link

@ThorvaldAagaard ThorvaldAagaard commented Sep 10, 2017

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

This comment has been minimized.

Copy link

@tim-jenks tim-jenks commented Sep 11, 2017

@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

This comment has been minimized.

Copy link

@ThorvaldAagaard ThorvaldAagaard commented Sep 11, 2017

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

@tim-jenks

This comment has been minimized.

Copy link

@tim-jenks tim-jenks commented Sep 13, 2017

Adding to roadmap to schedule file:// protocol isssues

@tim-jenks tim-jenks added this to the 0.5 milestone Sep 13, 2017
@tim-jenks tim-jenks added this to Scheduled in wrld.js roadmap Sep 13, 2017
@si458

This comment has been minimized.

Copy link

@si458 si458 commented Jan 10, 2018

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 comment has been minimized.

Copy link

@tim-jenks tim-jenks commented Jan 10, 2018

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

This comment has been minimized.

Copy link

@si458 si458 commented Jan 10, 2018

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

@si458

This comment has been minimized.

Copy link

@si458 si458 commented Jan 10, 2018

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants
You can’t perform that action at this time.