Latest Contributions by BruceGreen

I am using ArcGIS API for JS 3.14 and I would like to present the selected Marker with this symbol: currently I am getting all markers surrounded with simple Square like the left side clicked in below image Can you please let me know where to set this? ... View more

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? ... View more

ArcGIS API is using This Demo to illustrate how Point clustering works with JSON data. In my case I am generating some point graphics from MySQL Database by a jQuery AJAX request like following code: As you can see I am storing the data in `project` and then access to `project.Longitude, project.Latitude` to create the points    request.done(function( mapInfo) {         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('//JSON Data');                 var pointGraphic = new Graphic(point, pointSymbol).setInfoTemplate(pointInfoTemplate);                 points.push(pointGraphic);     }     for (i = 0; i < points.length; ++i) {             map.graphics.add(points);     }     });` Can you please let me know how I can bind this points with Cluster Points in ArcGIS API sample? Thanks ... View more

Can you please let me know if it is possible to bind our custom DOM into the geometry point instead of ArcGIS API SimpleMarkerSymbol()? I tried to do this like this var point = new Point(-126.687482, 54.793577); var pointSymbol = '<div class="marker"></div>'; but it is not doing the job! here is the whole code ar point = new Point(-126.687482, 54.793577); var pointSymbol = '<div class="marker"></div>'; var pointAttributes = {city: "Albuquerque", state: "New Mexico"}; var pointInfoTemplate = new InfoTemplate("Albuquerque"); var pointGraphic = new Graphic(point, pointSymbol, pointAttributes).setInfoTemplate(pointInfoTemplate);   thePoints.push(pointGraphic);   console.log(thePoints) map.on('load', function () {   for (i = 0; i < thePoints.length; ++i) {   map.graphics.add(thePoints);   } }); ... View more

Can you please let me know if it is possible to update ArcGIS API Basemap by using jQuery. I am looking for a hack to bind updating of a array to update the basemap option in the map object Here is what I have tried <select id="base-map-options">   <option value="0">Imagery</option>   <option value="1">Topographic With Lable</option> </select>  var map; var basemap = ['topo','streets','imagarey'] require([ "esri/map",           "esri/layers/ArcGISDynamicMapServiceLayer",           "dojo/domReady!" ],          function(Map) { map = new Map("mapDiv", {                                center: [-126.687482, 54.793577],                                zoom: 5,                                basemap: basemap[0]            });  $("#base-map-options").on("change", function () {    basemap[$('option:selected').val()];   }); }); as you can see I am trying to update selected index in basemap[] through    $("#base-map-options").on("change", function () {     basemap[$('option:selected').val()];    }); but I don't know how to bind this to basemap property of the map object? thanks ... View more