Community

How to show center point icon on a Map?

1513
3
Jump to solution
01-31-2018 08:03 AM
Shane_
by
New Contributor II
‎01-31-2018 08:03 AM

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:

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

<style>
#map_canvas img {
max-width: none;
}
</style>

<div id="map_canvas" style="height: 550px;"></div>

<script>
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) {
var map = new Map({
basemap: "hybrid", //streets, satellite, hybrid, topo, gray, dark-gray, oceans, osm, national-geographic
ground: "world-elevation",
sliderStyle: "large"
});

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎01-31-2018 08:18 AM

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

3 Replies
KenBuja
by MVP Esteemed Contributor
MVP Esteemed Contributor
‎01-31-2018 08:14 AM

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
by MVP Emeritus
MVP Emeritus
‎01-31-2018 08:18 AM

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_
by
New Contributor II
‎01-31-2018 10:43 AM

Thanks Robert. Worked a treat!

0 Kudos