Community
Select to view content in your preferred language

Conflict Between Regular Point Marker and Cluster Points

2944
1
09-02-2015 09:45 AM
BruceGreen
by
Occasional Contributor
‎09-02-2015 09:45 AM

I have two functions `

createPoints(); and addClusters();

to create points and cluster points from JSON point values and I am switching the map presentation (Points<-->Cluster) by suing a Chechbox like :

 if($("input[type='checkbox'][name='clusterPoints']").is(':checked')) {
       createPoints();
   }else{ addClusters();}

  $("input[type='checkbox'][name='clusterPoints']").change(function(){
    if($(this).is(':checked')){
        map.removeLayer(clusterLayer);
        map.graphics.show();
    }
    else{
        map.graphics.hide();
        addClusters();
        }
 });

now after switching from Cluster to Points, I am missing the points InfoTemplate(); (not poping up on points on click) but the Cluster PopupTemplate(s) work fine . Here is the how code:

            function createPoints(){
                for (var i = 0; i < mapInfo.length; i++) {
                var project = mapInfo;
                var point = new Point(project.Longitude, project.Latitude); 
                var pointSymbol = new SimpleMarkerSymbol(); 
                pointSymbol.setStyle(SimpleMarkerSymbol.STYLE_CIRCLE);
                pointSymbol.setSize(12);
                var pointInfoTemplate = new InfoTemplate(); 
                pointInfoTemplate.setTitle("Project Details");
                pointInfoTemplate.setContent('<div class="list-group marker-info"> <a href="#" class="list-group-item"><div class="row"><span class="col-md-7 marker-info-txt">Project</span><span class="col-md-3 marker-info-txt"><strong>'+project.ProjectID+'</strong></span></div></a> <a href="#" class="list-group-item"><div class="row"><span class="col-md-7 marker-info-txt">Road Length</span><span class="col-md-3 marker-info-txt"><strong>'+project.RoadLength+'</strong></span></div></a> <a href="#" class="list-group-item"><div class="row"><span class="col-md-7 marker-info-txt">Powerline Length</span><span class="col-md-3 marker-info-txt"><strong>'+project.PowerLineLength+'</strong></span></div></a> <a href="#" class="list-group-item"><div class="row"><span class="col-md-7 marker-info-txt">Penstock</span><span class="col-md-3 marker-info-txt"><strong>'+project.Penstock+'</strong></span></div></a> <a href="#" class="list-group-item"><div class="row"><span class="col-md-7 marker-info-txt">Installed Capacity</span><span class="col-md-3 marker-info-txt"><strong>'+project.InstalledCapacity+'</strong></span></div></a><a href="#" class="list-group-item"><div class="row"><span class="col-md-7 marker-info-txt">Annual Firm Energy</span><span class="col-md-3 marker-info-txt"><strong>'+project.AnnualFirmEnergy+'</strong></span></div></a><a href="#" class="list-group-item"><div class="row"><span class="col-md-7 marker-info-txt">Cost Of Energy</span><span class="col-md-3 marker-info-txt"><strong>'+project.CostOfEnergy+'</strong></span></div></a><a href="#" class="list-group-item"><div class="row"><span class="col-md-7 marker-info-txt">Footprint</span><span class="col-md-3 marker-info-txt"><strong>'+project.Footprint+'</strong></span></div></a><a href="#" class="list-group-item"><div class="row"><span class="col-md-7 marker-info-txt">Cost Per Year</span><span class="col-md-3 marker-info-txt"><strong>'+project.CostPerYear+'</strong></span></div></a></div> ');
                var pointGraphic = new Graphic(point, pointSymbol).setInfoTemplate(pointInfoTemplate);
                points.push(pointGraphic);
                }
                for (i = 0; i < points.length; ++i) {
                map.graphics.add(points);
        }
                    }


    function addClusters() {
     var project=[];
     for (var i = 0; i < mapInfo.length; i++) {
                project.push(mapInfo);
     }
      var photoInfo = [];
            var wgs = new SpatialReference({
              "wkid": 4326
            });


  photoInfo.data = arrayUtils.map(mapInfo, function(p) {
    var latlng = new Point(parseFloat(p.Longitude), parseFloat(p.Latitude), wgs);
    var webMercator = webMercatorUtils.geographicToWebMercator(latlng);
    var attributes = {
         "Project ID":  p.ProjectID,
         "Road Length": p.RoadLength,
         "Powerline Length": p.PowerLineLength,
         "Penstock": p.Penstock,
         "Installed Capacity": p.InstalledCapacity,
         "Annual Firm Energy": p.AnnualFirmEnergy,
         "Cost Of Energy": p.CostOfEnergy,
         "Footprint": p.Footprint,
         "Cost Per Year": p.CostPerYear,
        
        
    };
  return {
        "x": webMercator.x,
        "y": webMercator.y,
        "attributes": attributes
  };
  });
        var popupTemplate = new PopupTemplate({
              "title": "Project Details",
              "fieldInfos": [{
                "fieldName": "Project ID",
                visible: true
              }, {
                "fieldName": "Road Length",
                 visible: true
              }, {
                "fieldName": "Powerline Length",
                 visible: true
              },
                            {
                "fieldName": "Penstock",
                 visible: true
              },
                             {
                "fieldName": "Installed Capacity",
                 visible: true
              },
                             {
                "fieldName": "Annual Firm Energy",
                 visible: true
              },
                             {
                "fieldName": "Cost Of Energy",
                 visible: true
              },
               {
                "fieldName": "Footprint",
                 visible: true
              },
                            {
                "fieldName": "Cost Per Year",
                 visible: true
              }],
              "mediaInfos": [{
                "title": "",
                "caption": "",
                "type": "image",
                "value": {
                  "sourceURL": "{Image}",
                  "linkURL": "{Link}"
                }
              }]
            });
       clusterLayer = new ClusterLayer({
              "data": photoInfo.data,
              "distance": 100,
              "id": "clusters",
              "labelColor": "#fff",
              "labelOffset": 10,
              "resolution": map.extent.getWidth() / map.width,
              "singleColor": "#888",
              "singleTemplate": popupTemplate
            });
            var defaultSym = new SimpleMarkerSymbol().setSize(4);
            var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");


            var picBaseUrl = "http://static.arcgis.com/images/Symbols/Shapes/";
            var blue = new PictureMarkerSymbol(picBaseUrl + "BluePin1LargeB.png", 32, 32).setOffset(0, 15);
            var green = new PictureMarkerSymbol(picBaseUrl + "GreenPin1LargeB.png", 64, 64).setOffset(0, 15);
            var red = new PictureMarkerSymbol(picBaseUrl + "RedPin1LargeB.png", 72, 72).setOffset(0, 15);
            renderer.addBreak(0, 2, blue);
            renderer.addBreak(2, 200, green);
            renderer.addBreak(200, 1001, red);


            clusterLayer.setRenderer(renderer);
            map.addLayer(clusterLayer);


            // close the info window when the map is clicked
            map.on("click", cleanUp);
            // close the info window when esc is pressed
            map.on("key-down", function(e) {
              if (e.keyCode === 27) {
                cleanUp();
              }
            });
             function cleanUp() {
            map.infoWindow.hide();
            clusterLayer.clearSingles();
          }


          function error(err) {
            console.log("something failed: ", err);
          }


          window.showExtents = function() {
            var extents = map.getLayer("clusterExtents");
            if ( extents ) {
              map.removeLayer(extents);
            }
            extents = new GraphicsLayer({ id: "clusterExtents" });
            var sym = new SimpleFillSymbol().setColor(new Color([205, 193, 197, 0.5]));


            arrayUtils.forEach(clusterLayer._clusters, function(c, idx) {
              var e = c.attributes.extent;
              extents.add(new Graphic(new Extent(e[0], e[1], e[2], e[3], map.spatialReference), sym));
            }, this);
            map.addLayer(extents, 0);
          };
  
}

 if($("input[type='checkbox'][name='clusterPoints']").is(':checked')) {
       createPoints();
   }else{ addClusters();}
  $("input[type='checkbox'][name='clusterPoints']").change(function(){
    if($(this).is(':checked')){
        map.removeLayer(clusterLayer);
        map.graphics.show();
    }
    else{
        map.graphics.hide();
        addClusters();
        }
 });  

Can you please let me know why this is happening and how I can fix this? Am using correct functions ` map.graphics.hide();` and map.removeLayer(clusterLayer); to clear map for next presentation in check box switch?

code.txt.zip
8 KB
0 Kudos
1 Reply
BruceGreen
by
Occasional Contributor
‎09-02-2015 09:47 AM

For what ever reason part of code in points

pointInfoTemplate.setTitle("Project Details");

                pointInfoTemplate.setContent('<div class="list-group marker-info"> <a href="#" class="list-group-item"><div class="row"><span class="col-md-7 marker-info-txt">Project</span><span class="col-md-3 marker-info-txt"><strong>'+project.ProjectID+'</strong></span></div></a> <a href="#" class="list-group-item"><div class="row"><span class="col-md-7 marker-info-txt">Road Length</span><span class="col-md-3 marker-info-txt"><strong>'+project.RoadLength+'</strong></span></div></a> <a href="#" class="list-group-item"><div class="row"><span class="col-md-7 marker-info-txt">Powerline Length</span><span class="col-md-3 marker-info-txt"><strong>'+project.PowerLineLength+'</strong></span></div></a> <a href="#" class="list-group-item"><div class="row"><span class="col-md-7 marker-info-txt">Penstock</span><span class="col-md-3 marker-info-txt"><strong>'+project.Penstock+'</strong></span></div></a> <a href="#" class="list-group-item"><div class="row"><span class="col-md-7 marker-info-txt">Installed Capacity</span><span class="col-md-3 marker-info-txt"><strong>'+project.InstalledCapacity+'</strong></span></div></a><a href="#" class="list-group-item"><div class="row"><span class="col-md-7 marker-info-txt">Annual Firm Energy</span><span class="col-md-3 marker-info-txt"><strong>'+project.AnnualFirmEnergy+'</strong></span></div></a><a href="#" class="list-group-item"><div class="row"><span class="col-md-7 marker-info-txt">Cost Of Energy</span><span class="col-md-3 marker-info-txt"><strong>'+project.CostOfEnergy+'</strong></span></div></a><a href="#" class="list-group-item"><div class="row"><span class="col-md-7 marker-info-txt">Footprint</span><span class="col-md-3 marker-info-txt"><strong>'+project.Footprint+'</strong></span></div></a><a href="#" class="list-group-item"><div class="row"><span class="col-md-7 marker-info-txt">Cost Per Year</span><span class="col-md-3 marker-info-txt"><strong>'+project.CostPerYear+'</strong></span></div></a></div> ');

is not showing in above post! Please check the full code in attached file?

0 Kudos