topic Re: How to show center point icon on a Map? in ArcGIS JavaScript Maps SDK Questions

How to show center point icon on a Map?

Shane_ — Wed, 31 Jan 2018 16:03:02 GMT

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:

Re: How to show center point icon on a Map?

KenBuja — Wed, 31 Jan 2018 16:14:21 GMT

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) {

Re: How to show center point icon on a Map?

RobertScheitlin__GISP — Sat, 11 Dec 2021 18:24:10 GMT

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to show center point icon on a Map?

Shane_ — Wed, 31 Jan 2018 18:43:13 GMT

Thanks Robert. Worked a treat!