none
Spatial Data Service and Thematic Maps RRS feed

  • Question

  • I cannot solve the random filling in polygons with color.  Can you point me to a consultant who can look at my code?

    JavaScript code, ASP.NET, SQL Server.

    Multiple polygons (say 50 U.S. counties) that fill in seemingly at random on each re-fresh of page.  About once in 35 tries the polygons are all filled in correctly.  When the polygon is filled in, it is always with the correct color.  All polygon outlines are always correct.  Pushpins for all polygons are always correct.  Everything is in one layer.

    David

    Tuesday, August 21, 2018 7:20 PM

All replies

  • Hi David,

    Maybe we can start simple and work up to what you want to accomplish.  There is a simple color change sample at https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/setpolygonoptions

    Are you using this method?  Are you comfortable sharing a code snippet that can be placed in the interactive SDK to reproduce what you are seeing?  See the "How to use the Interactive SDK section" at https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/Overview

    Sincerely,

    IoTGirl


    Wednesday, August 22, 2018 5:13 PM
    Owner

  • OK, Here is the relevant code: part of a about 300 lines of code.  We are plotting U.S. counties by color based on their values.  The values are sorted in VB code behind and passed to the javascript code as: strCounties1, strCounties2, etc.  each group is given a separate color (4 colored polygons; groups 2,3,4,5).  The sorting does the correct sorting; the values are correctly passed to the javascript code; the polygons are correctly drawn; pushpins show the correct values so I know the values are being passed correctly (that code not shown). 
    When a polygon does have a color, it is the correct color.  It is just that many times no color is shown for some polygons.  Each refresh of the page shows a different set of polygons colored correctly, usually about 50% of total.  If there are less than about 20 counties everything colors correctly.  When the number of counties gets into the 40+ range (say the state of Texas) the problems begin.
    Thanks for any help.
    Code follows:
            case "MMM":
                            //Loop through all the counties
                 // document.getElementById('Textbox_strCounties').value = areatype + ":  16 FOR DC";

                  var geoDataRequestOptions = {
                      entityType: 'AdminDivision2',
                       //getAllPolygons: true               
                  };         
                 // var countyCodeTest = '<%=strCounties2%>';
                 // document.getElementById('Textbox_strCounties').value = countyCodeTest;        
                          var returnStr1 = '<%=strCounties1%>';
                  var countyCodes1 = returnStr1.split("|");
                  var returnChange = '<%=strChange%>';
                  document.getElementById('Textbox_strCounties').value = countyCodes1;
                  document.getElementById('Textbox_strCounties0').value = ZipCity;
                           
                  map = new Microsoft.Maps.Map('#myMap', {
                      liteMode: true
                  });

                var lat = parseFloat(document.getElementById('Latitude').value);
                  var long = parseFloat(document.getElementById('Longitude').value);
                  var z2 = parseFloat(document.getElementById('Zoom').value);
                  map.setView({ zoom: z2, center: new Microsoft.Maps.Location(lat, long) });
                  switch (returnChange) {
                      case "0":
                          var color1 = 'rgba(255,255,255,.2)';  //white
                          var color2 = 'rgba(144,238,144,.3)';   //light green
                          var color3 = 'rgba(0,128,0,.4)';   //green
                          var color4 = 'rgba(0,100,0,.6)';   //dark green - lighter
                          var color5 = 'rgba(0,100,0,.8)';   //dark green - darker
                          break;
                      case "1":
                          var color1 = 'rgba(255,255,255,.2)';  //white
                          var color2 = 'rgba(128,0,0,.8)';   //maroon
                          var color3 = 'rgba(128,0,0,.4)';   //light maroon
                          var color4 = 'rgba(144,238,144,.4)';     //light green
                          var color5 = 'rgba(144,238,144,.6)';   //green
                      case "2":
                          var color1 = 'rgba(255,255,255,.2)';  //white
                          var color2 = 'rgba(128,0,0,.6)';   //maroon
                          var color3 = 'rgba(128,0,0,.3)';   //light maroon
                          var color4 = 'rgba(144,238,144,.5)';   //light green
                          var color5 = 'rgba(0,128,0,.6)';   //green
                   
                          break;
                      default: ;//alert("Not Found");
                  }
                 // document.getElementById('Textbox_strCounties1').value = len;
                  // var countyCodes = ['Williamson, TN', 'Davidson, TN', 'Cheatham, TN', 'Dickson, TN', 'Montgomery, TN', 'Robertson, TN', 'Rutherford, TN', 'Sumner, TN', 'Wilson, TN', 'Allen, KY', 'Logan. KY', 'Simpson, KY', 'Warren, KY'];
                  // var countyCodes = [Calgary County, ALBERTA, CAN, Banff--Jasper--Rocky Mountain House County, ALBERTA, CAN, Red Deer County, ALBERTA, CAN, Edmonton County, ALBERTA, CAN]
                 
                  if (document.getElementById('txtMap8').value > 0) {
                      var layer1 = new Microsoft.Maps.Layer();
                      var layer2 = new Microsoft.Maps.Layer();
                      var layer3 = new Microsoft.Maps.Layer();
                      var layer4 = new Microsoft.Maps.Layer();
                      var layer5 = new Microsoft.Maps.Layer();
                      var returnObjMAX = '<%=strObjMAX%>';
                      var returnStr1 = '<%=strCounties1%>';
                      var returnStr2 = '<%=strCounties2%>';
                      var returnStr3 = '<%=strCounties3%>';
                      var returnStr4 = '<%=strCounties4%>';
                      var returnStr5 = '<%=strCounties5%>';
                      //var returnStr6 = '<%=strCounties6%>';
                      var countyCodes1 = returnStr1.split("|");
                      var countyCodes2 = returnStr2.split("|");
                      var countyCodes3 = returnStr3.split("|");
                      var countyCodes4 = returnStr4.split("|");
                      var countyCodes5 = returnStr5.split("|");
                      var returnVstr = "";
                      var returnVstr1 = '<%=strValue1%>';
                      var returnLat1 = '<%=strLat1%>';
                      var returnLong1 = '<%=strLong1%>';
                      var returnName1 = '<%=strName1%>';
                      var returnFIPS1 = '<%=strFIPS1%>';               
                      var countyV1 = returnVstr1.split("|");
                      var countyLat1 = returnLat1.split("|");
                      var countyLong1 = returnLong1.split("|");
                      var countyName1 = returnName1.split("|");
                      var FIPS1 = returnFIPS1.split("|");

                      //2ND set of polygons - BECAUSE LEVEL START WITH 2ND
                      Microsoft.Maps.loadModule('Microsoft.Maps.SpatialDataService', function () {
                          //Use the GeoData API manager to get the boundary
                          Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(countyCodes2, geoDataRequestOptions, map, function (data) {
                              if (data.results && data.results.length > 0) {
                                  for (var i = 0, len2 = data.results[0].Polygons.length; i < len2; i++) {
                                      data.results[0].Polygons[i].setOptions({ fillColor: color2 });
                                  }
                                  layer2.add(map.entities.push(data.results[0].Polygons));
                              }
                          });                
                      });
                    
                      //3RD set of polygons -
                      Microsoft.Maps.loadModule('Microsoft.Maps.SpatialDataService', function () {
                          //Use the GeoData API manager to get the boundary
                          Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(countyCodes3, geoDataRequestOptions, map, function (data) {
                              if (data.results && data.results.length > 0) {
                                  for (var i = 0, len2 = data.results[0].Polygons.length; i < len2; i++) {
                                      data.results[0].Polygons[i].setOptions({ fillColor: color3 });
                                  }
                                  layer3.add(map.entities.push(data.results[0].Polygons));
                              }
                          });
                      });
                      //4TH set of polygons -
                      Microsoft.Maps.loadModule('Microsoft.Maps.SpatialDataService', function () {
                          //Use the GeoData API manager to get the boundary
                          Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(countyCodes4, geoDataRequestOptions, map, function (data) {
                              if (data.results && data.results.length > 0) {
                                  for (var i = 0, len2 = data.results[0].Polygons.length; i < len2; i++) {
                                      data.results[0].Polygons[i].setOptions({ fillColor: color4 });
                                  }
                                  layer4.add(map.entities.push(data.results[0].Polygons));
                              }
                          });
                      });

                      //5TH set of polygons -
                      Microsoft.Maps.loadModule('Microsoft.Maps.SpatialDataService', function () {
                          //Use the GeoData API manager to get the boundary
                          Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(countyCodes5, geoDataRequestOptions, map, function (data) {
                              if (data.results && data.results.length > 0) {
                                  for (var i = 0, len2 = data.results[0].Polygons.length; i < len2; i++) {
                                      data.results[0].Polygons[i].setOptions({ fillColor: color5 });
                                  }
                                  layer5.add(map.entities.push(data.results[0].Polygons));
                              }
                          });
                      });
                      //Layer2.add(map.entities.push(data.results[0].Polygons));
                      //map.layers.insert(layer2);
                     
                      //document.getElementById('Textbox_strCounties2').value = countyCodes1;
                      document.getElementById('Textbox_strCounties2').value = countyCodes2; 
                      document.getElementById('Textbox_strCounties3').value = countyCodes3;  
                      document.getElementById('Textbox_strCounties4').value = countyCodes4;
                      document.getElementById('Textbox_strCounties5').value = countyCodes5;

    Thursday, August 23, 2018 11:07 PM
  • Hi dcmap,

    I had a member of the maps team review the thread and he thinks the volume of requests and polygons should not be a problem so he suspects either a logic issue or a timeout somewhere is causing the issue.

    Can you simplify and just draw your dataset in all one color to see where the failure/timeout may be occurring behind the scenes?

    Sincerely,

    IoTGirl

    Friday, August 24, 2018 4:08 PM
    Owner
  • Thanks for the suggestion.  I tried using just one color on all polygons (usually 30-100) and the problem remains; random filling in of color when number of polygons gets over about 20. 

    Could problem be in web configuration file?  Some issue with .Netframework?

    Any help is appreciated.

    David

    Monday, August 27, 2018 6:19 PM
  • Hi David,

    Is this something you can step through?  I have seen multi county maps rendered without issue so it must be something in the steps you are taking.  If 20 is the barrier, if you draw 20 then start debugging is there something specific going on at that point? 

    PS I changed the zip list at https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/sdsloadmultipleboundaries to

    var zipCodes = ['98004', '98005', '98007', '98008', '98039','98052','98053','98033','98034','98074',
     '98101', '98102', '98103', '98104', '98105', '98106', '98107', '98108', '98109', '98112', '98075',
     '98115', '98116', '98117', '98118', '98119', '98121', '98122', '98125', '98126', '98133', '98027',
     '98134', '98136', '98144', '98146', '98154', '98164', '98174', '98177', '98178', '98195', '98199',
     '98040', '98029', '98006', '98059', '98056'];

    and then hit the green arrow to draw and you can see the renderer at work.

    Sincerely,

    IoTGirl



    Wednesday, August 29, 2018 3:58 PM
    Owner