Javascript: adding markers to custom esri web map

Question

Hello I am currently using my own map to create a javascript/html web application. What I have done so far is reference my id in the javascript, following this tutorial ArcGIS: Webmap by ID. The map is showing up using the following script on my HTML page

    <script>
    var textSymbol, picSymbol;
    require([
      "dojo/parser",
      "dojo/ready",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dojo/dom",
      "esri/map",
      //// map
      // "esri/graphic",
      //  "esri/symbols/PictureMarkerSymbol",
      //  "esri/symbols/TextSymbol",
      //  "esri/geometry/Point",
      //  "esri/SpatialReference",
      //  "esri/tasks/ProjectParameters",
      //  "esri/tasks/GeometryService",
      ////
      "esri/urlUtils",
      "esri/arcgis/utils",
      "esri/dijit/Legend",
      "esri/dijit/Scalebar",
      "esri/dijit/LocateButton", //
      "esri/layers/FeatureLayer",
      ////
      //"dojo/on",
      ////
      "dojo/domReady!"
    ], function (
      parser,
      ready,
      BorderContainer,
      ContentPane,
      dom,
      Map,
      //
      //Graphic, PictureMarkerSymbol, TextSymbol, Point, SpatialReference, ProjectParameters, GeometryService,
      //
      urlUtils,
      arcgisUtils,
      Legend,
      Scalebar,
      LocateButton, //
      FeatureLayer,
      //
      on
        //
    ) {
        ready(function () {

            parser.parse();

            //if accessing webmap from a portal outside of ArcGIS Online, uncomment and replace path with portal URL
            //arcgisUtils.arcgisUrl = "http://pathto/portal/sharing/content/items";
            arcgisUtils.createMap("7f975854312c4ca9a50aa5933c4a782e", "map").then(function (response) {
                //update the app
                dom.byId("title").innerHTML = response.itemInfo.item.title;
                dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;

                var map = response.map;

                //// adding in the markers
                //var jsonString = { locations: [{ latitude: 51.6220455, longitude: 4.54404212, textToDisplayOnThePictureMarkerSymbol: 34 }, { latitude: 51.8838877, longitude: 4.7527823578, textToDisplayOnThePictureMarkerSymbol: 50 }] };
                //jsonString = jsonString.locations;
                //picSymbol = new PictureMarkerSymbol('http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png', 60, 60);
                //map.on("ready", function (evt) {
                //    for (var i = 0; i < jsonString.length; i++) {
                //        var geometryPoint = new Point(jsonString[i].longitude, jsonString[i].latitude, new SpatialReference(4326));
                //        textSymbol = new TextSymbol(jsonString[i].textToDisplayOnThePictureMarkerSymbol).setOffset(0, -4);
                //        map.graphics.add(new Graphic(geometryPoint, picSymbol));
                //        map.graphics.add(new Graphic(geometryPoint, textSymbol));
                //    }
                //});
                //// end marker codes


                //add the scalebar
                var scalebar = new Scalebar({
                    map: map,
                    scalebarUnit: "english"
                });

                // location button
                geoLocate = new LocateButton({
                    map: map
                }, "LocateButton");
                geoLocate.startup();

                //add the legend. Note that we use the utility method getLegendLayers to get
                //the layers to display in the legend from the createMap response.
                var legendLayers = arcgisUtils.getLegendLayers(response);
                var legendDijit = new Legend({
                    map: map,
                    layerInfos: legendLayers
                }, "legend");
                legendDijit.startup();


            });
        });
    });
</script>

If you noticed the areas that are commented out, I was tryna add markers to my map, but they are not displaying for some weird reason. Is there a map type difference that's causing this situation or any other factors? Or do I have to add in a new layer? I am very new to all these and javascript so I am not exactly sure how the sequence will affect the codes as well - I only know that the require scripts and the functions have to be in the same sequence. Please help!

Answer 1

There were several things wrong with what you had there. I've created a jsfiddle with a working example of your code: http://jsfiddle.net/j84bqy4v/ Here are the main changes that I made:

1. Basically you don't need a lot of what you were doing so I removed things like dojo/ready, map on load, etc.
2. Map on load is a good thing to use but it wasn't firing I think because the map was already loaded by the time the createMap function returns.
3. You also had your lat/long values backwards and they were also no where near where your map was centered so once I got them adding correctly they were showing up somewhere near Europe instead in Singapore where the map is centered. I put in some different arbitrary points that were within the visible extent of the map.
4. Also, your jsonString wasn't a json string but a javascript object. I simplified it to just be an array of objects.

Here is the code:

Javascript

require([
    "dojo/parser",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dojo/dom",
    "esri/map",
    "esri/graphic",
    "esri/symbols/PictureMarkerSymbol",
    "esri/symbols/TextSymbol",
    "esri/geometry/Point",
    "esri/SpatialReference",
    "esri/tasks/ProjectParameters",
    "esri/tasks/GeometryService",
    "esri/urlUtils",
    "esri/arcgis/utils",
    "esri/dijit/Legend",
    "esri/dijit/Scalebar",
    "esri/dijit/LocateButton",
    "esri/layers/FeatureLayer",
    "dojo/on",
    "dojo/domReady!"], 
function (
    parser, BorderContainer, ContentPane, dom, Map,
    Graphic, PictureMarkerSymbol, TextSymbol, Point, SpatialReference, ProjectParameters, GeometryService,
    urlUtils, arcgisUtils, Legend, Scalebar, LocateButton, FeatureLayer,
    on) {
    parser.parse();

    //if accessing webmap from a portal outside of ArcGIS Online, uncomment and replace path with portal URL
    //arcgisUtils.arcgisUrl = "http://pathto/portal/sharing/content/items";
    arcgisUtils.createMap("7f975854312c4ca9a50aa5933c4a782e", "map").then(function (response) {
        //update the app
        dom.byId("title").innerHTML = response.itemInfo.item.title;
        dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;

        var map = response.map;

        //// adding in the markers
        var locations = [{
            latitude: 1.382,
            longitude: 103.949,
            text: 34
        }, {
            latitude: 1.380,
            longitude: 103.952,
            text: 50
        }];
        var picSymbol = new PictureMarkerSymbol(
                'http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png', 60, 60);

            for (var i = 0; i < locations.length; i++) {
                var geometryPoint = new Point(locations[i].longitude, locations[i].latitude);
                var textSymbol = new TextSymbol(locations[i].text).setOffset(0, -4);
                map.graphics.add(new Graphic(geometryPoint, picSymbol));
                map.graphics.add(new Graphic(geometryPoint, textSymbol));
            }
        //// end marker codes

        //add the scalebar
        var scalebar = new Scalebar({
            map: map,
            scalebarUnit: "english"
        });

        // location button
        geoLocate = new LocateButton({
            map: map
        }, "LocateButton");
        geoLocate.startup();

        //add the legend. Note that we use the utility method getLegendLayers to get
        //the layers to display in the legend from the createMap response.
        var legendLayers = arcgisUtils.getLegendLayers(response);
        var legendDijit = new Legend({
            map: map,
            layerInfos: legendLayers
        }, "legend");
        legendDijit.startup(); 
    });
});