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

BruceGreen · ‎09-04-2015

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);           
    
    
    }

RobertScheitlin__GISP · ‎09-04-2015

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>

View solution in original post

RobertScheitlin__GISP · ‎09-04-2015

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>

BruceGreen · ‎09-04-2015

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

RobertScheitlin__GISP · ‎09-04-2015

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