Add WebStyleSymbol into graphicslayer

TubaKumbara · ‎04-10-2018

Hello.

var webStyleSymbol = new WebStyleSymbol({
name: "Ambulance",
styleName: "EsriRealisticTransportationStyle"
});

I want to add a 3D ambulance icon into a graphicslayer.

I'm facing "Failed to create symbol from style" error.

I tried some codes but failed always. Can anyone help me please?

RobertScheitlin__GISP · ‎04-10-2018

Tuba,

You are attempting to use this in a WebScene right? Also you can utilize the APIs autocasting by using:

// Referencing a web style via styleName
var webStyleSymbol = {
  type: "web-style",  // autocasts as new WebStyleSymbol()
  styleName: "EsriRealisticTransportationStyle",
  name: "Ambulance"
};‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

TubaKumbara · ‎04-10-2018

Thanks for the answer. Yes in sceneview, But i don't know what i'm doing wrong

I want to add this symbol into clicked mouse position and clicked elevation height

here is my code,

on map mouse click event

var point = {
type= "point",
x: e.mapPoint.longitude,
y: e.mapPoint.latitude,
z: myHeight // came from elevation query
}
var webStyleSymbol = {
type: "web-style", // autocasts as new WebStyleSymbol()
styleName: "EsriRealisticTransportationStyle",
name: "Ambulance"
};
var gr = new Graphic {
geometry: point,
symbol: webStyleSymbol
}
myGraphicsLayer.graphics.add(gr);

But i see nothing

RobertScheitlin__GISP · ‎04-10-2018

Tuba,

Here is a sample where I add a ambulance to a Graphics layer based on hard coded coordinates:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Visualize features with realistic WebStyleSymbols - 4.6</title>

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

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

  <script>
    require([
      "esri/WebScene",
      "esri/views/SceneView",

      "esri/layers/FeatureLayer",
      "esri/layers/GraphicsLayer",
      "esri/Graphic",

      "esri/tasks/support/Query",

      "dojo/domReady!"
    ], function(WebScene, SceneView, FeatureLayer, GraphicsLayer, Graphic, Query) {

      // Create the web scene
      var map = new WebScene({
        basemap: "satellite",
        ground: "world-elevation"
      });

      // Create the view
      var view = new SceneView({
        container: "viewDiv",
        map: map,
        camera: {
          position: {
            latitude: 39.957011,
            longitude: -75.169457,
            z: 26
          },
          tilt: 78,
          heading: 315
        },
        environment: {
          lighting: {
            date: new Date("June 15, 2015 16:00:00 EDT"),
            directShadowsEnabled: true,
            ambientOcclusionEnabled: true
          }
        }
      });

      /**********************************************
       * Add layer containing transportation features
       **********************************************/

      // var transportationRenderer = {
      //   type: "simple", // autocasts as new UniqueValueRenderer()
      //   symbol: {
      //     type: "web-style", // autocasts as new WebStyleSymbol()
      //     name: "Ambulance",
      //     styleName: "EsriRealisticTransportationStyle"
      //   },
      //   visualVariables: [{
      //     type: "rotation",
      //     // cars need to have a rotation field so that they are aligned to the street
      //     field: "ROTATION"
      //   }, {
      //     type: "size",
      //     field: "SIZE",
      //     axis: "depth"
      //   }]
      // };

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

      var point0 = {
        type: "point", // autocasts as new Point()
        x: -75.1701625078934,
        y: 39.957308192519122
      };

      var pointGraphic = new Graphic({
        geometry: point0,
        symbol: {
          type: "web-style", // autocasts as new WebStyleSymbol()
          name: "Ambulance",
          styleName: "EsriRealisticTransportationStyle"
        },
        attributes: {
          ObjectID: 0,
          SIZE: 12,
          ROTATION: 100
        }
      });

      myGraphicsLayer.add(pointGraphic);

      // var fields = [{
      //   name: "ObjectID",
      //   alias: "ObjectID",
      //   type: "oid"
      // }, {
      //   name: "ROTATION",
      //   alias: "Rotation",
      //   type: "integer"
      // }, {
      //   name: "CATEGORY",
      //   alias: "Category",
      //   type: "string"
      // }, {
      //   name: "SIZE",
      //   alias: "Size",
      //   type: "integer"
      // }];
      //
      // var point = {
      //   type: "point", // autocasts as new Point()
      //   x: -75.1701625078934,
      //   y: 39.957308192519122
      // };
      // var gra = {
      //   geometry: point,
      //   attributes: {
      //     ObjectID: 1,
      //     SIZE: 12,
      //     ROTATION: 100
      //   }
      // }
      //
      // lyr = new FeatureLayer({
      //   source: [gra], // autocast as an array of esri/Graphic
      //   // create an instance of esri/layers/support/Field for each field object
      //   fields: fields, // This is required when creating a layer from Graphics
      //   objectIdField: "ObjectID", // This must be defined when creating a layer from Graphics
      //   renderer: transportationRenderer, // set the visualization on the layer
      //   spatialReference: {
      //     wkid: 4326
      //   },
      //   geometryType: "point", // Must be set when creating a layer from Graphics
      //   elevationInfo: {
      //     mode: "on-the-ground"
      //   }
      // });

      //map.add(lyr);

    });
  </script>
</head>

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

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

TubaKumbara · ‎04-11-2018

Thanks for helpfull code Robert.

I copied your whole sample code and paste it into a html document.

I tried on 2 different machines (no internet access) but i'm still getting error.

Failed to load https://www.arcgis.com/sharing/rest/portals/self?f=json&culture=tr-tr: The 'Access-Control-Allow-Origin' header has a value 'null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.
[esri.symbols.WebStyleSymbol] #fetchSymbol() Failed to create symbol from style

I have no internet access on my computers.

I tried your sample code on JSFIDDLE. This is working good.

Esri JS API 4.6 TEMPLATE - JSFiddle

is web-style-symbols need to internet connection?

RobertScheitlin__GISP · ‎04-11-2018

Tuba,

As far as I know YES they do.

TubaKumbara · ‎04-18-2018

I think that we should be able to add webstylesymbol without internet connection.

ShuqiaoZhang · ‎06-24-2021

Hello, thank you for the sample code! It helped me a lot.

However, the following parameters seem to have no effect:

attributes: {
  ObjectID: 0,
  SIZE: 12,
  ROTATION: 100
}

No matter how I set the ROTATION parameter, the model always points to the north. I would like to ask if it is possible to rotate the model? Thank you!