vrijdag 22 februari 2013

Legend in FT maps


Google Fusion Tables is a great tool to visualize data on a map. But there is no legend to the map. Of course you can mouse over the map and get the data for a point or polygon. A legend explaining to the reader what is shown would be better.



Data
Let's take an example; I am working on Dutch municipalities at the moment, and gathered some data about taxes, cars and unemployment in these municipalities. Here is the link to the xls in Google: https://www.google.com/fusiontables/DataSource?docid=15G1HdKIZ3wHG_RBuMACfnl-w69ZNomPUUsN7vFM

Map
Next we need a map of the municipalities. The Dutch Central Bureau for Statistics has one. Here is the link: http://www.cbs.nl/nl-NL/menu/themas/dossiers/nederland-regionaal/publicaties/geografische-data/archief/2011/2011-wijk-en-buurtkaart-2010-art.htm  Small problem however, the maps are in a shape format. The shape format .shp is used by ESRI and cannot be used in Google. Google uses its own format .kml . So conversion is needed. Upload the .shp files in .zip format to the following service: http://www.shpescape.com/ . After some time, depending on the traffic, the services returns the .kml files in your Google drive. Here is the link to the map of municipalities in the Netherlands: https://www.google.com/fusiontables/DataSource?docid=1nhkzZGWk-4WAsdjecvZ7ARrsi0bHiEFVHOzuAuo 

Unemployment map
Next we have to merge the data and the map; just follow the menu in Fusion Tables.
Start with file, choose merge; slect the spreadsheet you want to add to the map, and finally choose they key field (the field that is common in both tables, in this case the name of the municipality)
Now lets make the unemployment map. Go Map of Geometry and choose: change map styles. Then go to polygon fill colour and buckets; choose as variable the unemployment rate and start filling the various ranges you want to use.
The link to the table of the map is here: https://www.google.com/fusiontables/DataSource?docid=1Y4m-7PMMnJruU9dHTitH5AFMs3ekSTEZe7P_2xc 
Here is the map for unemployment rates:


 Nice map; and with a mouse over you get the data, but no legend.
The map above is based on an embed link. For adding a legend we need the Java script. You can get the script from the menu of Fusion Tables:tools, publish and then get HTML and Java script.
A better alternative is to use FusionTablesLayer Wizard which gives you more control about the map.

Simple Script
Here is the script:
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:500px; height:300px; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layerl0;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(52.188992787661995, 5.4032917812500045),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layerl0 = new google.maps.FusionTablesLayer({
query: {
select: "col2>>0",
from: "1Y4m-7PMMnJruU9dHTitH5AFMs3ekSTEZe7P_2xc"
},
map: map,
styleId: 2,
templateId: 2
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

 Script with Legend
 The trick is to create a legend in the script. Here is script, I have coloured in red  the code that is added to create the legend:

<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:500px; height:600px; }

#legend {
        background: #FFF;
        padding: 10px;
        margin: 5px;
        font-size: 12px;
        font-family: Arial, sans-serif;
      }

      #legend p {
        font-weight: bold;
      }

      #legend div {
        padding-bottom: 5px;
      }

      .color {
        border: 1px solid;
        height: 12px;
        width: 12px;
        margin-right: 3px;
        float: left;
      }


</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layerl0;

var legendTitle = 'unemployment per municipality';
var styles = [
        {
          'min': 0,
          'max': 5,
          'color': 'red'
        },
        {
          'min': 5,
          'max': 10,
          'color': 'yellow'
        },
        {
          'min': 10,
          'max': 15,
          'color': 'green'
        },
        {
          'min': 15,
          'max': 20,
          'color': 'purple'
        },
         {
          'min': 20,
          'max': 25,
          'color': 'blue'
       
        }
      ];

function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(52.188992787661995, 5.4032917812500045),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layerl0 = new google.maps.FusionTablesLayer({
query: {
select: "col2>>0",
from: "1Y4m-7PMMnJruU9dHTitH5AFMs3ekSTEZe7P_2xc"
},
map: map,
styleId: 2,
templateId: 2
});

// Create the legend and display on the map
        var legend = document.createElement('div');
        legend.id = 'legend';
        legendContent(legend);
        legend.index = 1;
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
      }
 // Generate the content for the legend
      function legendContent(legend) {
        var title = document.createElement('p');
        title.innerHTML = legendTitle;
        legend.appendChild(title);

        for (var i in styles) {
          var bucket = styles[i];

          var legendItem = document.createElement('div');

          var color = document.createElement('span');
          color.setAttribute('class', 'color');
          color.style.backgroundColor = bucket.color;
          legendItem.appendChild(color);

          var minMax = document.createElement('span');
          minMax.innerHTML = bucket.min + ' to ' + bucket.max;
          legendItem.appendChild(minMax);

          legend.appendChild(legendItem);
                }
        }

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
 Map with legend
If you look at the code closely you see that the first part defines the legend background and the position. The second part gives the legend a title and defines the ranges (that is the ranges used for the unemployment variable in the section buckets). The last part creates the legend.
Take the complete code and add to a web page as html. The result is on top of this posting.

Geen opmerkingen:

Een reactie plaatsen

Opmerking: alleen leden van deze blog kunnen een reactie plaatsen.