CODEWITHSUNDEEP
javascriptcssgoogle-fusion-tables
andy
andy

Reputation: 2077

Legend not corresponding to colours on the Map. Fusion Tables

I am using the fusion tables API to style maps. However in the legend, some countries (Uganda and Mozambique) are not showing the correct colours displayed in the legend.

Link to the map

Here is the code for displaying the legend 

    <style type="text/css">
  #legend {
    background-color: #FFF;
    margin: 10px;
    padding: 5px;
    width: 150px;
  }

  #legend p {
    font-weight: bold;
    margin-top: 3px;
  }

  #legend div {
    clear: both;
  }

  .color {
    height: 12px;
    width: 12px;
    margin-right: 3px;
    float: left;
    display: block;
  }
    #map-canvas{

        width: 700px;
        height: 650px;

    }
</style>

Code fot displaying the map

function initialize() {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(-2.358937, 27.618881),
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var layer = new google.maps.FusionTablesLayer({
      query: {
        select: 'geometry',
        from: '1MXudMo9A8yUjpO89hkac74LzGEKPyA_tDzkWJ3hl'
      }
    });
    layer.setMap(map);

    initSelectmenu();
    for (column in COLUMN_STYLES) {
      break;
    }
    applyStyle(map, layer, column);
    addLegend(map);

    google.maps.event.addDomListener(document.getElementById('selector'),
        'change', function() {
          var selectedColumn = this.value;
          applyStyle(map, layer, selectedColumn);
          updateLegend(selectedColumn);
    });
  }

Upvotes: 0

Views: 73

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117334

The column 'Total No of Points' has been set to the type Text, the comparison will be based on strings what will not give the expected results.

Simple test:

alert('9'>'10');//true
alert(9>10);//false

Solution: set the type of the column to Number

Upvotes: 1

Related Questions