.join()
A join method is used to combine rows from two or more tables, based on a common field between them. Syntax .join(tableName: string | joinObject) Example
  1. var layerStyle = {
  2. "query": {
  3. "select": {
  4. "type": "geo.poly"
  5. },
  6. "where": [{ col: "statename", test: "EqualNot", value: "" }],
  7. "table": {
  8. "name": "census/States2010"
  9. },
  10. "join": {
  11. "method": "Contains",
  12. "table": "census/Counties2010Points",
  13. "leftcolumn":"States2010",
  14. "rightcolumn":"XY"
  15. }
  16. },

join Object Properties

Object PropertyProperty Value TypeDescription
join.method(string | joinmethod)Configures how to join one table to another. Can specify join method as a string (see: joinmethod.name), or define a joinmethod object.
join.table(string, query)String of the table to be joined with or the query to be joined with
join.leftcolumn(optional)(string)Name of column in source table to use when relating to the table to be joined. Assumes the geometric column name by default.
join.where(optional)(where[][])A collection of clause definitions that filter the rows returned by the joined table. Targets non-aggregate columns.
join.having(optional)(where[][])A collection of clause definitions that filter the rows returned by the joined table. Targets aggregate column results (e.g. sum, count, avg).

joinmethod Object Properties

Object PropertyProperty Value TypeDescription
joinmethod.name(string)

Geometric Joins:

JoinDescription
PointInPolyJoinRelates a polygon column from the source table to a point column in the joining table
InsideRelates a point column from the source table to the polygon column in the joining table
ClosestRelates a geometric column (point, polygon, line) from the source table to a geometric column (point, polygon, line) in the joining table. Matches the closest geometry only. Has a definable tolerance which sets a maximum allowable distance. Default tolerance is 1000 meters.
RadiusRelates a geometric column (point, polygon, line) from the source table to a geometric column (point, polygon, line) in the joining table. Matches geometry within radius. Has a definable tolerance which sets a maximum allowable radius. Default tolerance is 1000 meters.

Non-Geometric Joins:

JoinDescription
EqualsRelates a non-geometric column (string, number) from the source table to a non-geometric (string, number) column
joinmethod.tolerance(number)Defines a tolerance in meters for geometric joins (if applicable). When unspecified, the default tolerance is 1000 meters.
Demo: Join Method ‘Contains’ - Display number of counties in a US state onHover
  1. <html>
  2. <head>
  3. <script type='text/javascript' src='http://my.maplarge.com/js'></script>
  4. <script type='text/javascript'>
  5. ml.onload(function () {
  6. var map = new ml.map('mapDiv', { lat: 40.925129, lng: -97.283691, z: 4 });
  7. var layerStyle = {
  8. "query": {
  9. "select": {
  10. "type": "geo.poly"
  11. },
  12. "where": [{ col: "statename", test: "EqualNot", value: "" }],
  13. "table": {
  14. "name": "census/States2010"
  15. },
  16. "join": {
  17. "method": "Contains",
  18. "table": "census/Counties2010Points",
  19. "leftcolumn":"States2010",
  20. "rightcolumn":"XY"
  21. }
  22. },
  23. "visible": true,
  24. "onClick": "debug",
  25. "hoverFields": [
  26. "statename",
  27. "census/Counties2010Points.countyname.count"
  28. ],
  29. onHover: function (data, layer) {
  30. return data.data.statename + ' total counties: ' + data.subTotals.countyname.count;
  31. },
  32. "zIndex": "1"
  33. };
  34.  
  35.  
  36. var layer = new ml.layer(map, layerStyle);
  37. layer.show();
  38. });
  39. </script>
  40. </head>
  41. <body>
  42. <div id="mapDiv">
  43. </div>
  44. </body>
  45. </html>
Demo
  1. <html>
  2. <head>
  3. <script type='text/javascript' src='http://my.maplarge.com/js'></script>
  4. <script type='text/javascript'>
  5. ml.onload(function () {
  6. var county = {
  7. query: {
  8. table: { name: 'census/Counties' },
  9. select: { type: 'geo.poly' },
  10. join: {
  11. method: "PointInPolyJoin",
  12. table: "hms/hotels"
  13. }
  14. },
  15. style: {
  16. method: 'interval',
  17. shadeBy: "hms/hotels.LowRate.avg", //count, sum, avg
  18. colors: [
  19. { min: 'LightBlue-64', max: 'Blue-128' },
  20. { min: 'Blue-128', max: 'Red-128' }
  21. ],
  22. ranges: [
  23. { min: 0, max: 75 },
  24. { min: 75, max: 150 }
  25. ]
  26. },
  27. onHover: function (data,layer) {
  28. return "Avg. Low Rate: $" + Math.round(data.subTotals.LowRate.avg);
  29. },
  30. //listing the hms/hotels table here is mandatory because we have two tables
  31. //.avg represents the average of the "LowRate" column points in this County
  32. hoverFields: ['hms/hotels.LowRate.avg'],
  33. onClick: 'debug'
  34. //when you click debug notice the shape data is under data.data
  35. //and how the point totals are under data.subTotals
  36. };
  37. //create a new div and add to document
  38. //you could also fetch the element by id
  39. var div=document.getElementById('pointpoly');
  40. var map = new ml.map(div, { lat: 36.967449, lng: -94.76806, z: 5 });
  41. var layer = new ml.layer(map, county);
  42. layer.show();
  43. });
  44. </script>
  45. </head>
  46. <body>
  47. <div id="pointpoly">
  48. </div>
  49. </body>
  50. </html>