Quick Start Tutorial
This document is designed to give a brief overview and quickly get you operational with simple examples that you can cut and paste into any html editor in seconds. For a more detailed, line by line review contact MapLarge for the API reference.Methodology
Ready to Use: These examples are ready for live testing. You can copy and paste this code and it will work on any website.Comments: For the sake of brevity and portability, much of the explanation will presented as comments in the code.
Debugging: To follow these examples we recommend visiting the example urls using your favorite debugger (see instructions below). Once you have your debugger open you can click on the left hand margin of any script to halt code execution at that point and inspect object values. Using this technique the API is often self documenting, but you can always see more details in the API reference.
Chrome: In Chrome --> right click the html page --> inspect element --> click on scripts tab.
Internet Explorer: In Internet Explorer --> Press F-12 and click on scripts tab.
Fire Fox: Download Firebug once installed click the orange "bug" at the bottom right corner of our browser and click on the scripts tab.
Internet Explorer: In Internet Explorer --> Press F-12 and click on scripts tab.
Fire Fox: Download Firebug once installed click the orange "bug" at the bottom right corner of our browser and click on the scripts tab.
First Map
Lets start with a simple example displaying "dots" (point locations). The example below selects the "table" called "hotels" and maps it as dots. Example: dot-default<!DOCTYPE html><html><head>
<script type='text/javascript' src='http://e.maplarge.com/js'></script>
<script type='text/javascript' >
ml.onload(function () {
//create a new div and add to document
//you could also have called document.getElementById('yourdivid');
//to attach to an existing DOM element.
var div = ml.create('div', "width:600px; height:600px; float:left;", document.body);
//create a map zoomed in on Atlanta, GA (34,-84)
//the second parameter is a Object literal
var map = new ml.map(div, { lat: 34, lng: -84, z: 9 });
//add a layer with no style: default is "red dots"
var layer = new ml.layer(map,
{
query: {
table: 'hms/hotels', //table name = hotels
select: 'geo.dot' //geography = dots
},
onClick: 'debug', //show debug output when dots are clicked
//this function runs when the mouse cursor moves over a layer object
onHover: function (data, layer) {
return data.data.ChainID;
},
//NOTE--> for hover you must list the fields you want to use
hoverFields: ['ChainID', 'LowRate']
}
);
//show the layer
layer.show();
//to hide layer.hide();
});
</script></head><body></body></html>
Using An External Icon: (using a URL to request an external icon)
External icons can have a maximum size of 64 x 64 pixels and can be irregularly shaped with transparency. GIF, PNG and Jpg icons are supported. The example below uses a miniature version of Wikipedia's logo as an icon and also adds some style to the "onClick" balloon data. Example: dot-url<!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: 'hms/hotels',
select: 'geo.dot'
},
style: {
url: 'http://maplarge.com/Example/WikiIcon.png?abc=123456'
//the icon url will be downloaded and cached for upto 24 hours.
//to change icon sooner change your url
//many servers ignore query strings after static file paths
//with a url like this http://yourserver.com/Example/WikiIcon.png?abc=123
//where the abc=123 bit is just a random variable
//can be used to rotate versions faster if needed
},
//onClick Fires when layer object on the map is clicked
//The "data" property contains information about the object you clicked.
//any html returned will be placed in the balloon that opens.
onClick: function (data, layer) {
//try setting a break point in Firebug,
//data.data will contain a property for each
return "<div style='width:200px;'>" +
"You clicked a hotel! Its 'LowRate' property equals $" +
data.data.LowRate +
"</div>";
},
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>
Dynamic Custom Icons: Simple Dynamic Icon Example
The api server can also draw icons for you on the fly. The example below applies basic styles to the same table and also adds some style to the "onClick" balloon data. Example: dot-styled<!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: 'hms/hotels',
select: 'geo.dot'
},
style: {
shape: 'rectangle', //rounded corners by default
width: 40, //sizes are in pixels
height: 14,
dropShadow: true,
dropShadowLength: 3, //pixel distance
fillColor: 'Green-200', //colors can be named-alpha
borderColor: '225-0-0-255', //or A-R-G-B
borderWidth: 2,
text: {
text: 'hello', //fixed text to display
x: 4, y: 3 //text position in pixels from top left
}
},
//onClick Fires when layer object on the map is clicked
//The "data" property contains information about the object you clicked.
//any html returned will be placed in the balloon that opens.
onClick: function (data, layer) {
//try setting a break point in Firebug,
//data.data will contain a property for each
return "<div style='width:200px;'>" +
"You clicked a hotel! Its 'LowRate' property equals $" +
data.data.LowRate +
"</div>";
},
//this function runs when the mouse cursor moves over a layer object
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>
Numeric Interval Shading: Automatic Shading by One Column
The example below applies a background gradient and numeric labels. Automatic interval shading provides a simple syntax for shading, sizing, or labeling by a single column. Example: dot-intervals<!DOCTYPE html><html><head>
<script type='text/javascript' src='http://e.maplarge.com/js'></script>
<script type='text/javascript' >
maplarge.onload(function () {
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, {
query: {
table: { name: 'hms/hotels' },
//table:'hms/hotels' //short form is also acceptable
select: { type: 'geo.dot'}
//select:'geo.dot' //short form is also acceptable
},
style: {
method: 'interval', //special function name
//the column to shade by
shadeBy: "hms/hotels.LowRate", //Must be a Numeric column (Int or Double)
colors: [
//gradient from min to max
{ min: 'LightBlue', max: 'Blue' },
{ min: 'Blue', max: 'Red' }
],
ranges: [ //must have same number of ranges and colors
//where low rate is between 50 and 125 we will use the LightBlue to blue spectrum
{min: 50, max: 125 }, //values below 50 will be light blue
{ min: 125, max: 300 } //values above 300 will be red
],
//the numeric label is the column value, and it can be rounded
//round is the # of decimals to include, -1 means round to 10's
//-2 ex: 251.1 would round to 300
//-1 ex: 251.1 would round to 250
//0 would round to no decimals ex 251.1 = 251
//1 would round to 1 decimal etc... 251.1 = 251
numericLabel: { x: 8, y: 3, round: -1, color: 'White' },
dropShadow: true,
//this is the total number of color/label variations to create
//default value = 100, max value = 10,000
steps: 300,
text: { x: 3, y: 3, size: 9, text: '$', color: 'White' },
shape: 'rectangle',
height: 14,
size: 30
},
onClick: 'debug',
//this function runs when the mouse cursor moves over a layer object
onHover: function (data, layer) {
return data.data.ChainID;
},
//NOTE--> for hover you must list the fields you want to use
hoverFields: ['ChainID', 'LowRate']
});
layer.show();
});
</script></head><body></body></html>
Where Clauses: (filtering records)
Where clauses can be used to filter the data rendered on the map by selecting a column and applying a test to that column that evaluates to true or false. Below is an example of a simple where clause Example: dot-where<!DOCTYPE html><html><head>
<script type='text/javascript' src='http://e.maplarge.com/js'></script>
<script type='text/javascript' >
ml.onload(function () {
var div = ml.create('div', "width:600px; height:600px;", document.body);
var map = new ml.map(div, { lat: 40, lng: -84, z: 5 });
var layer = new ml.layer(map, {
query: {
table: 'hms/hotels',
select: 'geo.dot',
where: [
//where is an array and each object below is a test
//by default tests are conjunctive &&
//see the next example for an OR clause ||
//This example shows
//Hotels where LowRate > 250 && ChainID Contains 'hilton'
{col: "hms/hotels.LowRate", test: "Greater", value: 150 },
//notice that above we use 'hms/hotels.LowRate
//and below we just use 'ChainID'
//both are allowed in this case
//in complex queries with multiple tables the table reference is required
{ col: "ChainID", test: "Contains", value: "hilton" }
]
},
style: {
method: 'interval',
shadeBy: "hms/hotels.LowRate",
colors: [
{ min: 'LightBlue', max: 'Blue' },
{ min: 'Blue', max: 'Red' }
],
ranges: [
{ min: 50, max: 125 },
{ min: 125, max: 300 }
],
dropShadow: true,
steps: 100,
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,
count: 300
},
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']
});
layer.show();
});
</script></head><body></body></html>
Where OR Clauses: (Combining Where Clauses)
Where clauses can be combined to create disjunctive Either OR Tests. Also, some built in tests, like the "Between" clause below, provide simplified OR syntax. Example: dot-where-or<!DOCTYPE html><html><head>
<script type='text/javascript' src='http://e.maplarge.com/js'></script>
<script type='text/javascript' >
ml.onload(function () {
var div = ml.create('div', "width:600px; height:600px;", document.body);
var map = new ml.map(div, { lat: 40, lng: -84, z: 5 });
var layer = new ml.layer(map, {
query: {
table: { name: 'hms/hotels' },
select: { type: 'geo.dot' },
where:
[ //OR CLAUSE EXAMPLE--> notice the sub arrays
[ //Condition 1 == both low rate and Chani ID condition must be true
{col: "LowRate", test: "Greater", value: 200 },
{ col: "LowRate", test: "Less", value: 250 },
{ col: "ChainID", test: "Contains", value: "hilton"}
],
[ //OR Condition 2 == both low rate and Chain ID condition must be true
{col: "LowRate", test: "Greater", value: 200 },
{ col: "LowRate", test: "Less", value: 250 },
{ col: "ChainID", test: "Contains", value: 'marriott' }
],
[ //OR Condition 3
//Nested (Sub OR clauses are not allowed, but many tests yield
//the same result. Ex, between, 90 && 100 || 190 && 200 || 210 && 250
{col: "LowRate", test: "Between",
value: [
{ min: 300, max: 600 },
{ min: 0, max: 10 }
]
}
]
]
},
style: {
method: 'interval',
shadeBy: "hms/hotels.LowRate",
colors: [
{ min: 'LightBlue', max: 'Blue' },
{ min: 'Blue', max: 'Red' }
],
ranges: [
{ min: 0, max: 125 },
{ min: 125, max: 300 }
],
dropShadow: true,
steps: 100,
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,
count: 300
},
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']
});
layer.show();
});
</script></head><body></body></html>
Rule Based Styles: (using multiple styles based on where clauses)
Using style rules you can create complex styles and apply them based on a series or rules. The rules are applied in order and the icon will be assigned based on the first matching style. So, if an icon matches more than one rule, only the first rule in the list will be applied. Example: dot-rule<!DOCTYPE html><html><head>
<script type='text/javascript' src='http://e.maplarge.com/js'></script>
<script type='text/javascript' >
ml.onload(function () {
var hotelRates = {
query: {
table: { name: 'hms/hotels' },
select: { type: 'geo.dot' }
},
style: {
method: 'rules',
rules: [
{ //rule 1 -- Hilton Hotels are Blue
style: {
fillColor: 'Blue',
width: 40, height: 20,
dropShadow: true,
text: { x: 4, y: 4, text: 'Hilton' }
},
where: [{ col: 'hms/hotels.ChainID', test: 'Contains', value: 'hilton'}]
},
{ //rule 2 -- Holiday Hotels are Green
style: {
shape:'rectangle',
fillColor: 'Green',
width: 58, height: 16,
dropShadow: true,
text: { x: 2, y: 4, text: 'Holiday Inn', size:10 }
},
where: [{ col: 'hms/hotels.ChainID', test: 'Contains', value: 'holiday inn'}]
},
{ //rule 3 -- Expensive Hotels are Red
style: {
fillColor: 'Red',
width: 30, height: 30,
dropShadow: true,
text: { x: 4, y: 4, text: '$$$' }
},
where: [
//WHere Low Rate > 250
[
{ col: 'hms/hotels.LowRate', test: 'Greater', value: 250 }
],
//OR StarRating >= 4
[
{ col: 'StarRating', test: 'GreaterOR', value: 4 },
//notice that above we use 'StarRating'
//and below we just use 'hotels.ChainID'
//both are allowed in this case
//in complex queries with multiple tables the table.field reference is required
{col: 'hms/hotels.LowRate', test: 'Greater', value: 200 }
]
]
},
{ //rule 4 -- CatchAll is a special rule that is always true
//if we omitted this rule then hotels that didn't match the rules
//above would not have a style and would not be displayed
style: { url: 'http://maplarge.com/Example/H.png' },
where: 'CatchAll'
}
]
},
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']
};
var div = ml.create('div', "width:600px; height:600px;", document.body);
var map = new ml.map(div, { lat: 40, lng: -84, z: 5 });
var layer = new ml.layer(map, hotelRates);
layer.show();
});
</script></head><body></body></html>
Icon Clusters
Icons can be clustered by grid squares with the following sizes 4,8,16,32,64,128, and 256 pixels. If more than once icon is in the grid cell at a given zoom level then at that zoom level that cell will have a cluster icon. Clusters are calculated on a per cell basis so that only the cells that need to be clustered are and individual points can still appear when appropriate. Example: dot-cluster<!DOCTYPE html><html><head>
<script type='text/javascript' src='http://e.maplarge.com/js'></script>
<script type='text/javascript' >
ml.onload(function () {
var hotelRates = {
query: {
table: { name: 'hms/hotels' },
//value ranges are 4,8,16,32,64,128,256
select: { type: 'geo.dotCluster128' }
},
style: {
cluster: {
fillColor: 'Purple-128',
width: 24,
height: 24,
text: {x:6, y:6, text:'H' }
},
method: 'rules',
rules: [
{ //rule 1 -- Hilton Hotels are Blue
style: {
fillColor: 'Blue',
width: 40, height: 20,
dropShadow: true,
text: { x: 4, y: 4, text: 'Hilton' }
},
where: [{ col: 'hms/hotels.ChainID', test: 'Contains', value: 'hilton'}]
},
{ //rule 2 -- Holiday Hotels are Green
style: {
shape: 'rectangle',
fillColor: 'Green',
width: 58, height: 16,
dropShadow: true,
text: { x: 2, y: 4, text: 'Holiday Inn', size: 10 }
},
where: [{ col: 'hms/hotels.ChainID', test: 'Contains', value: 'holiday inn'}]
},
{ //rule 3 -- Expensive Hotels are Red
style: {
fillColor: 'Red',
width: 30, height: 30,
dropShadow: true,
text: { x: 4, y: 4, text: '$$$' }
},
where: [
//WHere Low Rate > 250
[
{ col: 'hms/hotels.LowRate', test: 'Greater', value: 250 }
],
//OR StarRating >= 4
[
{ col: 'StarRating', test: 'GreaterOR', value: 4 },
//notice that above we use 'StarRating'
//and below we just use 'hotels.ChainID'
//both are allowed in this case
//in complex queries with multiple tables the table.field reference is required
{col: 'hms/hotels.LowRate', test: 'Greater', value: 200 }
]
]
},
{ //rule 4 -- CatchAll is a special rule that is always true
//if we omitted this rule then hotels that didn't match the rules
//above would not have a style and would not be displayed
style: { url: 'http://maplarge.com/Example/H.png' },
where: 'CatchAll'
}
]
},
onClick: 'debug'
};
var div = ml.create('div', "width:600px; height:600px;", document.body);
var map = new ml.map(div, { lat: 34, lng: -84, z: 8 });
var layer = new ml.layer(map, hotelRates);
layer.show();
});
</script></head><body></body></html>
Shapes
This map uses a "where clause" to filter shapes to only show areas with a Median Household Income greater than $60,000. This example shows a map of shapes with an interactive tooltip and a simple shading style. Example: shape<!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: 'census/BlockGroup',
select: 'geo.poly',
where: [{ col: 'inc', test: 'Greater', value: 62000}]
},
style: {
fillColor: 'Purple-128', //colors can be named-alpha
borderColor: '64-0-0-255', //or A-R-G-B
borderWidth: 1
},
//onClick Fires when layer object on the map is clicked
//The "data" property contains information about the object you clicked.
//any html returned will be placed in the balloon that opens.
onClick: function (data, layer) {
//try setting a break point in Firebug,
//data.data will contain a property for each
return "<div style='width:200px;'>" +
"You clicked a Block Group! It's median household income is $" +
data.data.inc +
"</div>";
},
onHover: function (data, layer) {
return data.data.inc;
},
hoverFields: ['inc']
};
//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();
layer.zoomToExtents();
});
</script></head><body></body></html>
Shape Interval - Choropleth Map (shading shapes by values)
Shading shapes by value works just like the intervals function above. By default the interval function will pick a border color complementary to the shape. You can tune this border color using borderColoroffset or you can manually select another constant color. Example: shape-intervals<!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: 'census/BlockGroup',
select: 'geo.poly'
},
style: {
method: 'interval', //special function name
//the column to shade by
shadeBy: 'census/BlockGroup.inc', //Must be a Numeric column (Int or Double)
colors: [
//gradient from min to max
{ min: 'Green-128', max: 'Yellow-128' },
{ min: 'Yellow-128', max: 'Red-128' },
{ min: 'Red-128', max: 'Purple-128' }
],
ranges: [ //must have same number of ranges and colors
{min: 10000, max: 30000 },
{ min: 30000, max: 70000 },
{ min: 70000, max: 100000 }
],
borderColorOffset: -50
//BorderColorOffset is used to adjust the border color that matches the shape
//negative is darker, positive it lighter.
},
//onClick Fires when layer object on the map is clicked
//The "data" property contains information about the object you clicked.
//any html returned will be placed in the balloon that opens.
onClick: function (data, layer) {
//try setting a break point in Firebug,
//data.data will contain a property for each
return "<div style='width:200px;'>" +
"You clicked a Block Group! It's median household income is $" +
data.data.inc +
"</div>";
},
onHover: function (data, layer) {
return data.data.inc;
},
hoverFields: ['inc']
};
//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: 5 });
var layer = new ml.layer(map, layerStyle);
layer.show();
});
</script></head><body></body></html>
Rule Map (shading shapes by values)
Shading shapes by value works just like the intervals function for points. Example: shape-rules<!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: 'census/Congress110',
select: 'geo.poly',
//only show states with population growth Greater than 10%
where: [{ col: 'popGrowth', test: 'Greater', value: 10}]
},
style: {
method: 'rules',
rules: [
{
style: { fillColor: 'Red-128' },
where: [{ col: 'census/Congress110.inc', test: 'Greater', value: 60000}]
},
{
style: { fillColor: 'Orange-128' },
where: [{ col: 'census/Congress110.inc', test: 'Greater', value: 50000}]
},
{
style: { fillColor: 'Yellow-128' },
where: [{ col: 'census/Congress110.inc', test: 'Greater', value: 40000}]
},
{ //CatchAll is a special rule that is always true
//if we omitted this rule then hotels that didn't match the rules
//above would not have a style and would not be displayed
style: { fillColor: 'Green-128' },
where: 'CatchAll'
}
]
},
//onClick Fires when layer object on the map is clicked
//The "data" property contains information about the object you clicked.
//any html returned will be placed in the balloon that opens.
onClick: 'debug',
onHover: function (data, layer) {
return data.data.inc;
},
hoverFields: ['inc']
};
//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: 5 });
var layer = new ml.layer(map, layerStyle);
layer.show();
});
</script></head><body></body></html>
Points In Polygon: (see totals by polygon)
Grouping hotels into polygons using a point in polygon test and then mapping the average of hotel.LowRate by County. Example: point-in-poly<!DOCTYPE html><html><head>
<script type='text/javascript' src='http://e.maplarge.com/js'></script>
<script type='text/javascript' >
maplarge.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 = ml.create('div', "width:600px; height:600px;", document.body);
var map = new ml.map(div, { lat: 34, lng: -84, z: 5 });
var layer = new ml.layer(map, county);
layer.show();
});
</script></head><body></body></html>
Filtered Points In Polygon: (dynamic point filtering)
Example: point-in-poly-where<!DOCTYPE html><html><head>
<script type='text/javascript' src='http://e.maplarge.com/js'></script>
<script type='text/javascript' >
maplarge.onload(function () {
var county = {
query: {
table: { name: 'census/BlockGroup' },
select: { type: 'geo.poly' },
where: [{ col: 'census/BlockGroup.inc', test: 'Greater', value: 60000}],
join: {
method: "PointInPolyJoin",
table: "hms/hotels",
where:
[
//where contains hilton && 3 star
[
{ col: "ChainID", test: "Contains", value: "hilton" },
{ col: "StarRating", test: "Greater", value: 3 }
],
//OR where contains marriott && 3.5 star
[
{ col: "ChainID", test: "Contains", value: "marriott" },
{ col: "StarRating", test: "Greater", value: 3.5 }
],
//OR
[
{ col: "StarRating", test: "Greater", value: 4 }
]
]
}
},
style: {
//having clauses (totals on grouped points) are supported using the intervals method for shading
//(see below)
//however, free form rules using having clauses are not supported yet
//so for now you can't do this, but this feature is on our api road map
//having:[col:'hms/hotels.LowRate.avg', test:'Greater' value:100]
//if you need this feature ASAP contact our development team for a custom build quote
method: 'interval',
shadeBy: "hms/hotels.LowRate.avg", //count, sum, avg
colors: [
{ min: 'LightBlue-128', 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 = ml.create('div', "width:600px; height:600px;", document.body);
var map = new ml.map(div, { lat: 34, lng: -84, z: 5 });
var layer = new ml.layer(map, county);
layer.show();
});
</script></head><body></body></html>