<html>
<head>
<script type='text/javascript' src='http://my.maplarge.com/js'></script>
<script type='text/javascript'>
ml.onload(function () {
var county = {
query: {
table: { name: 'census/Counties' },
select: { type: 'geo.poly' },
join: {
method: "PointInPolyJoin",
table: "hms/hotels"
}
},
style: {
method: 'interval',
shadeBy: "hms/hotels.LowRate.avg", //count, sum, avg
colors: [
{ min: 'LightBlue-64', max: 'Blue-128' },
{ min: 'Blue-128', max: 'Red-128' }
],
ranges: [
{ min: 0, max: 75 },
{ min: 75, max: 150 }
]
},
onHover: function (data,layer) {
return "Avg. Low Rate: $" + Math.round(data.subTotals.LowRate.avg);
},
//listing the hms/hotels table here is mandatory because we have two tables
//.avg represents the average of the "LowRate" column points in this County
hoverFields: ['hms/hotels.LowRate.avg'],
onClick: 'debug'
//when you click debug notice the shape data is under data.data
//and how the point totals are under data.subTotals
};
//create a new div and add to document
//you could also fetch the element by id
var div=document.getElementById('pointpoly');
var map = new ml.map(div, { lat: 36.967449, lng: -94.76806, z: 5 });
var layer = new ml.layer(map, county);
layer.show();
});
</script>
</head>
<body>
<div id="pointpoly">
</div>
</body>
</html>
