arcgis-js-apiesri-maps

I wrote this code to show the marker on my Esri's Arcgis map in javascript, but this doesn't work, Please describe the problem here in my code?


I need the explanation of proper implementation of Graphic and GraphicLayer into my arcgis map intergation

    { <script src="https://js.arcgis.com/4.12/"></script>
      <script>
       require([
        "esri/Map",
        "esri/graphic",
        "esri/views/MapView",
        "esri/geometry/Point",
        "esri/graphic",
        "esri/symbols/PictureMarkerSymbol",
        "esri/layers/GraphicsLayer",
        "esri/dijit/BasemapToggle",
        "esri/dijit/HomeButton"],
         function (Map, MapView, Point, Graphic, GraphicsLayer, 
              PictureMarkerSymbol) {

         var map = new Map({
             basemap: "hybrid"

         });
         on(map, "load",addgraphics);

         var view = new MapView({
            container: "viewDiv",
            map: map,
            center: [72.952335,19.180190],
            zoom: 15
        });

        var marker = new PictureMarkerSymbol('http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png', 32, 32);

        function addgraphics(){
            var markerPoint = new Point([72.952335,19.180190]);
            var storepoint = new Graphic(markerPoint,marker);
            var layer = new GraphicsLayer();
            layer.add(storepoint);
            view.addLayer(layer);

        }

    });

}

I expect the output should a map with the marker on the specified Latitude and Longitude. The Output is the blank blank, which is i think wrong.


Solution

  • Check this example. https://codepen.io/mcantonbul/pen/vYBdVmQ

    The error is that the layers are added to the "Map" object, not "MapView" object.

    view.addLayer(layer);
    

    to

    map.add(layer);
    

    and

    var markerPoint = new Point([72.952335,19.180190]);
    

    to

    var markerPoint = new Point({x:72.952335,y:19.180190});