topic Re: Having issue On Loading All JSON Data into Markers Layer With in For Loop in ArcGIS JavaScript Maps SDK Questions

Having issue On Loading All JSON Data into Markers Layer With in For Loop

BruceGreen — Sat, 11 Dec 2021 15:15:22 GMT

I have a code like below which is suppose to add over 600 points into a GraphicLayer `projectsG` and eventually add the `projectsG` to `layer1` and `map` but I am not sure what I am doing wrong in

    projectsG = new esri.Graphic(project, symbol).setInfoTemplate(projectInfoTemplate);
    }
    console.log(thepoints);
    layer1 = new esri.layers.GraphicsLayer();
    for (i = 0; i < points.length; ++i) {
        layer1.add(projectsG);
    }

part which only adds the Last project into the map! Can you please take a look at following code and let me know what I am doing wrong in looping?

      var layer1, 
      var thepoints=[];
      var projectInfoTemplate;
      var projectsG;
    
    var points = [
       {
          "ProjectID":"15260",
          "Longitude":"-118.641508",
          "Latitude":"51.949915",
       },
       {
          "ProjectID":"17043",
          "Longitude":"-125.444557",
          "Latitude":"51.097552",
       },
       ....
          {
          "ProjectID":"13009",
          "Longitude":"-130.257086",
          "Latitude":"56.882834",
       },
       {
          "ProjectID":"17088",
          "Longitude":"-124.160699",
          "Latitude":"50.897618",
       }
    ];


    function drawSeries1() {
    for (var i = 0; i < points.length; i++) {
        var projects = points;
        var project = new esri.geometry.Point(projects.Longitude, projects.Latitude);                  
        project = esri.geometry.geographicToWebMercator(project);
    
        var symbol = new esri.symbol.PictureMarkerSymbol("e-Chartreuse.png", 32, 32);
        projectInfoTemplate = new InfoTemplate(); 
        projectInfoTemplate.setTitle("Project Details");
        projectInfoTemplate.setContent('<div>Some Att Here</div> ');
        
        projectsG = new esri.Graphic(project, symbol).setInfoTemplate(projectInfoTemplate);
        thepoints.push(projectsG);
    }
    console.log(thepoints);
    layer1 = new esri.layers.GraphicsLayer();
    for (i = 0; i < points.length; ++i) {
        layer1.add(projectsG);
    }
    map.addLayer(layer1);           
    
    
    }

Re: Having issue On Loading All JSON Data into Markers Layer With in For Loop

RobertScheitlin__GISP — Sat, 11 Dec 2021 15:15:25 GMT

Behrouz,

This code is legacy style so you should really consider moving the code to AMD style. Otherwise you are looping through your points twice and you are doing geographicToWebMercator when a Point geometry can be created using the lat lon. Several things in your code could be optimized.

Here is the code in AMD:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Sample Points</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
    <style>
      html, body, #map {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
    </style>
    <script src="http://js.arcgis.com/3.14/"></script>
    <script>
      var map;

      require([
        "esri/map", "esri/geometry/Point", "esri/layers/GraphicsLayer",
        "esri/symbols/PictureMarkerSymbol", "esri/graphic",
        "dojo/_base/array", "esri/InfoTemplate",
        "dojo/domReady!"
      ], function(
        Map, Point, GraphicsLayer,
        PictureMarkerSymbol, Graphic,
        arrayUtils, InfoTemplate
      ) {

        map = new Map("map",{
          basemap: "topo",
          center: [ -120, 54 ],
          zoom: 6,
          minZoom: 2
        });

        map.on("load", mapLoaded);

        function mapLoaded(){
          var layer1, mp, att;

          var points = [
             {
                "ProjectID":"15260",
                "Longitude":"-118.641508",
                "Latitude":"51.949915",
             },
             {
                "ProjectID":"17043",
                "Longitude":"-125.444557",
                "Latitude":"51.097552",
             },
             {
                "ProjectID":"13009",
                "Longitude":"-130.257086",
                "Latitude":"56.882834",
             },
             {
                "ProjectID":"17088",
                "Longitude":"-124.160699",
                "Latitude":"50.897618",
             }
          ];
          var symbol = new PictureMarkerSymbol("images/e-Chartreuse.png", 32, 32);
          layer1 = new GraphicsLayer();
          var infoTemplate = new InfoTemplate("Project Details","${*}");

          arrayUtils.forEach(points, function(project){
            att = {
              "Project Id": project.ProjectID,
              "Longitude": project.Longitude,
              "Latitude": project.Latitude
            };
            mp = new Point(project.Longitude, project.Latitude);
            var projGra = new Graphic(mp, symbol, att);
            layer1.add(projGra);
          });

          layer1.setInfoTemplate(infoTemplate);
          map.addLayer(layer1);
        }
      });
    </script>
  </head>
  <body class="claro">
    <div id="map"></div>
  </body>
</html>

Re: Having issue On Loading All JSON Data into Markers Layer With in For Loop

BruceGreen — Sat, 05 Sep 2015 00:19:20 GMT

Thanks Robert but can you please let me know what the AMD is?

Re: Having issue On Loading All JSON Data into Markers Layer With in For Loop

RobertScheitlin__GISP — Sat, 05 Sep 2015 00:33:28 GMT

Behrouz,

Here is a blog and another link that will help. The abc’s of AMD | ArcGIS Blog

Learn more about AMD! | The Dojo Toolkit Blog