How to show center point icon on a Map?

Shane_ · ‎01-31-2018

Hi, I'm showing a map from an MVC application using the js 4.6 api. The SceneView displays fine, at the correct zoom level and center point:

var view = new SceneView({
container: "map_canvas", map: map, scale: 50000, center: [@Model.LONGITUDE, @Model.LATITUDE]
});

I also need to display an icon at the center point of the map, with a label, which is clickable to show its attributes. I tried to do this using:

var features = [{

geometry:{type: "point",x: @Model.LONGITUDE,y: @Model.LATITUDE},

attributes:{ObjectID: 1,DepArpt: "KATL",MsgTime: Date.now(),FltId: "UAL1"}

}];

var pointsLayer = new FeatureLayer({
source: features
});

map.addLayer(pointsLayer);

I don't get any error but the point doesn't show up. Any help would be appreciated. Thanks!

Here's the rest of the code:

RobertScheitlin__GISP · ‎01-31-2018

Shane,

There is no need to use a FeatureLayer for this instead use a Graphic:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Add Graphics to a SceneView - 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/Map",
        "esri/views/SceneView",
        "esri/layers/GraphicsLayer",
        "esri/Graphic",

        "dojo/domReady!"
      ],
      function(
        Map, SceneView, GraphicsLayer, Graphic
      ) {

        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 = {
          type: "point", // autocasts as new Point()
          x: -0.178,
          y: 51.48791,
          z: 0
        };

        markerSymbol = {
          type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
          color: [226, 119, 40],
          outline: { // autocasts as new SimpleLineSymbol()
            color: [255, 255, 255],
            width: 2
          }
        };

        var graphic = new Graphic({
          geometry: point,
          symbol: markerSymbol
        });
        graphic.attributes = {
          "name": "Spruce",
          "family": "Pinaceae",
          "count": 126
        };
        graphic.popupTemplate = {
          content: "<p>Name, <b>{name}</b></p>" +
            "<ul><li>Tree family: {family}</li>" +
            "<li>Count: {count}</li><ul>"
        };

        graphicsLayer.add(graphic);

      });
  </script>
</head>

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

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

View solution in original post

KenBuja · ‎01-31-2018

The order of the modules you're loading in require don't match the arguments in the function. You're missing several modules (Draw, Point, CartographicLineSymbol), some arguments are out of order (Graphic, Color), and not including arguments (FeatureLayer)

require([
"esri/Map",
"esri/views/SceneView",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/PictureFillSymbol",
"esri/Color",
"esri/Graphic",
"esri/layers/FeatureLayer",
"dojo/dom", "dojo/on", "dojo/domReady!"
], function (Map, SceneView, Draw, Point, SimpleMarkerSymbol, SimpleLineSymbol, PictureFillSymbol, CartographicLineSymbol, Graphic, Color, dom, on) {

RobertScheitlin__GISP · ‎01-31-2018

Shane,

There is no need to use a FeatureLayer for this instead use a Graphic:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Add Graphics to a SceneView - 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/Map",
        "esri/views/SceneView",
        "esri/layers/GraphicsLayer",
        "esri/Graphic",

        "dojo/domReady!"
      ],
      function(
        Map, SceneView, GraphicsLayer, Graphic
      ) {

        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 = {
          type: "point", // autocasts as new Point()
          x: -0.178,
          y: 51.48791,
          z: 0
        };

        markerSymbol = {
          type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
          color: [226, 119, 40],
          outline: { // autocasts as new SimpleLineSymbol()
            color: [255, 255, 255],
            width: 2
          }
        };

        var graphic = new Graphic({
          geometry: point,
          symbol: markerSymbol
        });
        graphic.attributes = {
          "name": "Spruce",
          "family": "Pinaceae",
          "count": 126
        };
        graphic.popupTemplate = {
          content: "<p>Name, <b>{name}</b></p>" +
            "<ul><li>Tree family: {family}</li>" +
            "<li>Count: {count}</li><ul>"
        };

        graphicsLayer.add(graphic);

      });
  </script>
</head>

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

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

Shane_ · ‎01-31-2018

Thanks Robert. Worked a treat!