Menu
Can anyone explain why the gradient isn't working for the map below?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Riks.txt - Google Fusion Tables</title>
<style type="text/css">
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.7&sensor=false">
</script>
<script type="text/javascript">
function initialize()
{
map = new google.maps.Map
(document.getElementById('map_canvas'),
{
center: new google.maps.LatLng(59.53726545292721,18.12209266712103),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "MP",
from: "1TlGuMJwdZy-75LQvyEEq6GrvDob2LRREWI60Ji4",
where: ""
},
styles: [
{
styleId: 2,
polygonOptions: {
fillOpacity: 1,
fillColorStyler: {
expression: "MP",
min: 0,
max: 100,
gradient: ['#0000ff', '#00ffff', '#00ff00', '#ffff00', '#ff0000']
},
strokeWeight: 1,
strokeOpacity: 0.3,
strokeColor: '#000000'
}
}
]
});
layer.setOptions({
styleId: 2,
templateId: 0
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script></head>
<body><div id="map_canvas"></div></body></html>
1000
I coulnd't find the syntax to dynamically apply a gradient (from where do you have your example?). There is a description of the styles that are returned by Fusion Tables, but the syntax of the returned style doesn't seem to work. So my guess is, that it's not (yet?) possible to do.
But, if it's not important for you to do this dynamically, you can define the gradient in the Fusion Tables Web UI:
If you want to create several styles, you can add multiple maps. To do so, you have to switch to the switch to the new look (see the link in the web ui in the upper right corner "Switch to new look"). Then you can add a new map using the "+" button:
If you specified all the styles you need in the web UI, you can start to use them in FusionTablesLayer like that (I made a copy of your table to test that):
layer = new google.maps.FusionTablesLayer({
map: map,
query: {
select: "MP",
from: "1oCgiRAPUPp638T1XJlR98IGLMIdhHQiyR-IY85E",
where: ""
},
styleId: 2
});
styleId 1 is the default, then 2 is the first one you added, 3 the second and so on. I created 2 styles for my copied table.
Here is the example on jsFiddle to try out: http://jsfiddle.net/odi86/gPjE3/
Just change styleId: 2 (gradient on column MP) to styleId: 3 (gradient on column M) and see what happens.
I hope this helps.
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
