1

When I am displaying PictureMarkerSymbol it gives below exception in console.

> DOMException: Failed to execute 'texImage2D' on
> 'WebGLRenderingContext': The cross-origin image at "image url here"
> may not be loaded.(…) "Error: Failed to execute 'texImage2D' on
> 'WebGLRenderingContext': The cross-origin image at
> https://webapps-cdn.esri.com/Apps/MegaMenu/img/logo.jpg may not be
> loaded.
>     at Error (native)
>     at Object.makePotTexture (http://js.arcgis.com/4.0/esri/views/SceneView.js:244:181)
>     at Object.texImage2D (http://js.arcgis.com/4.0/esri/views/SceneView.js:241:437)
>     at b.loadGl (http://js.arcgis.com/4.0/esri/views/SceneView.js:238:366)
>     at e.aquire (http://js.arcgis.com/4.0/esri/views/SceneView.js:269:453)
>     at f.aquireIfNotUndefined (http://js.arcgis.com/4.0/esri/views/SceneView.js:84:404)
>     at Object.f.singleTextureGLMaterialConstructor (http://js.arcgis.com/4.0/esri/views/SceneView.js:86:1)
>     at new x (http://js.arcgis.com/4.0/esri/views/SceneView.js:667:213)
>     at h.aquireExt (http://js.arcgis.com/4.0/esri/views/SceneView.js:418:406)
>     at h.aquire (http://js.arcgis.com/4.0/esri/views/SceneView.js:417:465)
>     ----------------------------------------
>     rejected at c (https://js.arcgis.com/4.0/init.js:154:313)
>     at e (https://js.arcgis.com/4.0/init.js:154:65)
>     at f (https://js.arcgis.com/4.0/init.js:153:349)
>     at b.resolve (https://js.arcgis.com/4.0/init.js:155:406)
>     at _loadedHandler (http://js.arcgis.com/4.0/esri/views/SceneView.js:1337:242)
>     at http://js.arcgis.com/4.0/esri/views/SceneView.js:793:83
>     at q.done (http://js.arcgis.com/4.0/esri/views/SceneView.js:793:298)
>     at _doneLoadingCallback (http://js.arcgis.com/4.0/esri/views/SceneView.js:789:529)
>     at z (http://js.arcgis.com/4.0/esri/views/SceneView.js:798:307)
>     at HTMLImageElement.d.onload (http://js.arcgis.com/4.0/esri/views/SceneView.js:790:332)
>     ---------------------------------------- Error
>     at then.c.then (https://js.arcgis.com/4.0/init.js:156:177)
>     at https://js.arcgis.com/4.0/init.js:177:128
>     at _prepareImageResources (http://js.arcgis.com/4.0/esri/views/SceneView.js:1122:284)
>     at _prepareResources (http://js.arcgis.com/4.0/esri/views/SceneView.js:1119:301)
>     at constructor (http://js.arcgis.com/4.0/esri/views/SceneView.js:1133:34)
>     at new <anonymous> (https://js.arcgis.com/4.0/init.js:45:148)
>     at Object.make (http://js.arcgis.com/4.0/esri/views/SceneView.js:1116:186)
>     at constructor (http://js.arcgis.com/4.0/esri/views/SceneView.js:1113:287)
>     at new <anonymous> (https://js.arcgis.com/4.0/init.js:45:148)
>     at e.getOrCreateGraphics3DSymbol (http://js.arcgis.com/4.0/esri/views/SceneView.js:1069:390)"
Improve this question
3
  • can anyone know this issue and is it possible to add PictureMarkerSymbol in 3d map using js 4.0
    – Krish
    Commented Jun 20, 2016 at 9:24
  • It seems a CROSS issues. From the documentation: "To avoid CORS issues with this symbol, do one of the following: Use an image hosted on the same domain as the application. If the image is on a different domain and that server is CORS enabled, add the domain to the corsEnabledServers array. Install a proxy."
    – lele3p
    Commented Jun 20, 2016 at 11:11
  • thnx for the answer, that is criss issue, now I used a local image, but it is not display in my 3D map, I have add the PictureMarkerSymbol as a symbol property in Graphic, but it only display as a point, not the image as follow API point. developers.arcgis.com/javascript/latest/sample-code/sandbox/…
    – Krish
    Commented Jun 21, 2016 at 3:15

2 Answers 2

Reset to default
1


I changed your example using a PictureMarkerSymbol and it works.
The image and the html page are on the same webserver.
Here's the code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>3D Graphics - 4.0</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
  <script src="https://js.arcgis.com/4.0/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <script>
    require([
        "esri/Map",
        "esri/views/SceneView",
        "esri/layers/GraphicsLayer",

        "esri/Graphic",
        "esri/geometry/Point",
        "esri/geometry/Polyline",
        "esri/geometry/Polygon",

        "esri/symbols/PictureMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",

        "dojo/domReady!"
      ],
      function(
        Map, SceneView, GraphicsLayer,
        Graphic, Point, Polyline, Polygon,
        PictureMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol
      ) {

        var map = new Map({
          basemap: "hybrid"
        });

        var view = new SceneView({
          container: "viewDiv",
          map: map,

          camera: { // autocasts as new Camera()
            position: { // autocasts as new Point()
              x: -0.17746710975334712,
              y: 51.44543992422466,
              z: 1266.7049653716385
            },
            heading: 0.34445102566290225,
            tilt: 82.95536300536367
          }
        });

        /*********************
         * Add graphics layer
         *********************/

        var graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

        /*************************
         * Add a 3D point graphic
         *************************/

        // London
        var point = new Point({
            x: -0.178,
            y: 51.48791,
            z: 1010
          }),

          symbol = new PictureMarkerSymbol({
            url: "http://yourserver/logo.jpg",
            width: "8px",
            height: "8px"
          });

        var pointGraphic = new Graphic({
          geometry: point,
          symbol: symbol
        });

        graphicsLayer.add(pointGraphic);

        /****************************
         * Add a 3D polyline graphic
         ****************************/

        var polyline = new Polyline([
            [-0.178, 51.48791, 0],
            [-0.178, 51.48791, 1000]
          ]),

          lineSymbol = new SimpleLineSymbol({
            color: [226, 119, 40],
            width: 4
          });

        var polylineGraphic = new Graphic({
          geometry: polyline,
          symbol: lineSymbol
        });

        graphicsLayer.add(polylineGraphic);

        /***************************
         * Add a 3D polygon graphic
         ***************************/

        var polygon = new Polygon([
            [-0.184, 51.48391, 400],
            [-0.184, 51.49091, 500],
            [-0.172, 51.49091, 500],
            [-0.172, 51.48391, 400],
            [-0.184, 51.48391, 400]
          ]),

          fillSymbol = new SimpleFillSymbol({
            color: [227, 139, 79, 0.8],
            outline: { // autocasts as new SimpleLineSymbol()
              color: [255, 255, 255],
              width: 1
            }
          });

        var polygonGraphic = new Graphic({
          geometry: polygon,
          symbol: fillSymbol
        });

        graphicsLayer.add(polygonGraphic);

      });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>
Improve this answer
1
1

@lele3p is correct. the best option here is to host the image on the same domain as the application.

you can information about CORS and using a proxy as a failsafe in instances where it is either not possible to enable CORS on the web server hosting resources or in legacy browsers like IE9 and < here:

https://developers.arcgis.com/javascript/3/jshelp/ags_proxy.html

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.