How to add own image to Mapbox

General talk
1

Trying to change image in this code for my own graphics stored on laptop (3dmodel/arrow.gltf).

How to do it?

var loader = new THREE.GLTFLoader();
loader.load(
'https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf',   // HERE
function(gltf) {
this.scene.add(gltf.scene);
}.bind(this)
);
this.map = map;
2

Just a wild guess:
Replace ‘https://…’ with ‘file:///c:/…’ (or other depending on your filesystem)

3

Please help how to do it. My file is stored on C:/desktop and named 3dmodel/arrow.gltf

Complete newbie in this matter.

4

Tried

file:///c/3dmodel/arrow.gltf but doesn’t work :frowning:

5

what about trying with a relative path? Relative to the file that contains the code you showed above.
something like ‘…/images/3dmodel/arrow.gltf’

6

Still no luck.

Though I looked at a console in browser and here is the text : ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

This might cause the problem. How to solve it?

7

At your own risk! → https://lmgtfy.com/?q=how+to+bypass+cors+in+chrome

8

Bit confused. How to do it once, just for a single test?

9

Now getting error:

server responded with a status of 404 (Not Found)

I placed the file on desktop and the code looks like this:

var loader = new THREE.GLTFLoader();
loader.load(
'../arrow.gltf',     // HERE
function(gltf) {
this.scene.add(gltf.scene);
}.bind(this)
);
this.map = map;
10

How are you accessing the webpage with the script?
You do just open that via file:// in your browser, or did you place that webpage on a local apache server and access it via http://localhost ? If you use the latter method, I doubt that placing the image file on the desktop will work

Are you sure that the image file is in the folder above the webpage file? If it is in the same folder you should use ./arrow.gltf or simply arrow.gltf

I am also surprised that you run into CORS problems. That indicates that your webpage file with the script and your icon file are residing on different servers. Is that webpage hosted on e.g. Mapbox? Then you have to somehow transfer your image file to the same server, or place it on another webserver that provides the proper CORS headers. In that case you have to use a http-reference to your image.

If your webpage with the script is on a remote server, it can never access an image file on your local disk. You have to make it available via a webserver. If that webpage is on your local machine, and you access it via file:// , your image file can be on your local disk as well.

These are all pretty basic web development concepts, so perhaps you should read up a bit on those concepts.

11

Tried** ./arrow.gltf** as you said. No I’m getting error** {“message”:“Not Authorized - Invalid Token”}**

:frowning: :frowning:

12

Try IE browser. It has some another view on CORS policy for local files

13

Anything to do with this Mapbox problem: https://github.com/AnalyticalGraphicsInc/cesium/issues/4748 ? (are you accessing Mapbox layers for which you do not have a valid key?)

Does your webapp work without a custom marker?
Can you explain where your components are running?

14

Generated token and added to a code. WORKS! Uuufff :slight_smile:

Many thanks to all of you for a fantastic help and plenty of patience.

PS. used this path eventually /arrow.gltf strangly without any dot in front.

15

That means that the image is uploaded to the root folder of your webspace and not to the same folder as your script/html file