Example: dot-style-advanced<!DOCTYPE html><html><head>
<script type='text/javascript' src='http://e.maplarge.com/js'></script>
<script type='text/javascript' >
maplarge.onload(function () {
var layerStyle = {
query: {
table: { name: 'hms/hotels' },
select: { type: 'geo.dot' }
},
style: {
method: 'interval',
shadeBy: "hms/hotels.LowRate",
colors: [
{ min: 'LightBlue', max: 'Blue' },
{ min: 'Blue', max: 'Red' }
],
steps: 300,
ranges: [
{ min: 50, max: 125 },
{ min: 125, max: 300 }
],
dropShadow: true,
text: { x: 3, y: 3, size: 9, text: '$', color: 'White' },
numericLabel: { x: 8, y: 3, round: 0, color: 'White' },
shape: 'rectangle',
height: 14,
size: 30
},
onClick: 'debug',
onHover: function (data, layer) {
return data.data.ChainID;
},
//NOTE--> for hover you must list the fields you want to use
hoverFields: ['ChainID', 'LowRate']
};
//create a new div and add to document
//you could also fetch the element by id
var div = ml.create('div', "width:600px; height:600px;", document.body);
var map = new ml.map(div, { lat: 34, lng: -84, z: 9 });
var layer = new ml.layer(map, layerStyle);
layer.show();
});
</script></head><body></body></html>
