JavaScript APIWeb Services APIGeocoder API
  1. Queries
  2. Region Select

Perform visual queries using circles and rectangles to select a particular area or areas and the corresponding table data. Query a table simply by drawing a bounding shape on the map. The callback function will contain data from the area that corresponds to the table or query. If no table or query is provided a string description of the drawing will be returned.

Example 
  1. <html>
  2.    <head>
  3.       <style type="text/css" media="all">
  4.          #datadiv {
  5.          height:300px !important;
  6.          overflow-y:scroll;
  7.          }
  8.          .mapdiv {
  9.          width:100%;
  10.          height:100%;
  11.          }
  12.          .ml-btn {
  13.          position:absolute;
  14.          top:80px;
  15.          left:45px;
  16.          }
  17.       </style>
  18.       <script type="text/javascript" src="/JS"></script>
  19.       <script type="text/javascript">
  20.          ml.onload(function() {
  21.          	// create our map and hold a reference to it
  22.                       var map=ml.map(document.getElementById('mapdiv'));
  23.  
  24.                       //Adding this layer is not required for the query to work, but
  25.                       //helps users see where they are drawing their selection. 
  26.                       //
  27.                       var layer = ml.layer(map,{
  28.                         "onClick": "debug",
  29.                         "query": {
  30.                           "select": {
  31.                             "type": "geo.dot"
  32.                           },
  33.                           "where": [],
  34.                           "table": {
  35.                             "name": "hms/hotels"
  36.                           }
  37.                         },
  38.                         "style": {
  39.                           "method": "rules",
  40.                           "rules": [
  41.                             {
  42.                               "style": {
  43.                                 "shape": "round",
  44.                                 "height": "6",
  45.                                 "width": "6",
  46.                                 "fillColor": "204-86-86-255",
  47.                                 "borderColorOffset": "75",
  48.                                 "dropShadow": "false"
  49.                               },
  50.                               "where": "CatchAll"
  51.                             }
  52.                           ]
  53.                         }
  54.                       });
  55.                       layer.show();
  56.  
  57.                       ml.$('.wkt-response').hide();
  58.  
  59.                       // RegionSelect options object
  60.                       // (map) [REQUIRED] reference to map
  61.                       // (callback) [REQUIRED]
  62.                       // (drawingType) [OPTIONAL default circle] either rectangle or circle
  63.                       // (query) [OPTIONAL] If provided it will return an ml.query data set to the callback
  64.                       //   (table) [OPTIONAL] table to query using the drawing
  65.                       //   (take) [OPTIONAL default 1,000] number of rows to return from table query
  66.                       //   (query) [OPTIONAL] reference to a configured ml.query
  67.                       var RegionSelectOptions = {
  68.                         map: map,
  69.                         drawingType: 'circle',
  70.                         query: {
  71.                           table: 'hms/hotels',
  72.                           take: 1000
  73.                         },
  74.                         callback: function(data) { // data returned will be a Data JSON returned by ml.query
  75.                           // display the results
  76.                           ml.$('#datadiv').html(ml.util.JsonHighlight(data)); 
  77.                           ml.$('#datadiv').dialog({"title": "Query Results"});
  78.                         }
  79.                       };
  80.  
  81.                       // ml.ui.map.RegionSelect takes one parameter, its Option object
  82.                       var drawCircleForWkt = new ml.ui.map.RegionSelect(RegionSelectOptions);
  83.  
  84.                       // the beginDrawing() function triggers the drawing capabilities on the map.
  85.                       // this is reusable and can be called as many times as needed.
  86.                       ml.$('.ml-btn').on('click', function(e) {
  87.                         drawCircleForWkt.beginDrawing();
  88.                       });
  89.  
  90.          });
  91.       </script>
  92.    </head>
  93.    <body>
  94.       <div id='mapdiv' class='mapdiv'></div>
  95.       <button class="ml-btn ml-btn-primary" id="region-select-trigger">
  96.       Select a Region
  97.       </button>
  98.       <div id='datadiv'></div>
  99.    </body>
  100. </html>
Sending in Query 
  1. <html>
  2.     <head>
  3.         <style>#datadiv {
  4.             height:300px !important;
  5.             overflow-y:scroll;
  6.         }
  7.             .ml-btn {
  8.                 position:absolute;
  9.                 top:80px;
  10.                 left:45px;
  11.             }</style>
  12.         <script type="text/javascript" src="/JS"></script>
  13.         <script type="text/javascript">
  14.             ml.onload(function() {
  15.                 var map = ml.map("mapDiv");
  16.  
  17.                 ml.$('.wkt-response').hide();
  18.  
  19.                 // define our initial query to send in for GeoQuery processing
  20.                 var query=ml.query().select('*').from('hms/hotels').take(1000);
  21.  
  22.                 // RegionSelect options object
  23.                 // (map) [REQUIRED] reference to map
  24.                 // (callback) [REQUIRED]
  25.                 // (drawingType) [OPTIONAL default circle] either rectangle or circle
  26.                 // (query) [OPTIONAL] If provided it will return an ml.query data set to the callback
  27.                 //   (table) [OPTIONAL] table to query using the drawing
  28.                 //   (take) [OPTIONAL default 1,000] number of rows to return from table query
  29.                 //   (query) [OPTIONAL] reference to a configured ml.query
  30.                 var RegionSelectOptions = {
  31.                     map: map,
  32.                     drawingType: 'circle',
  33.                     query: {
  34.                         query: query
  35.                     },
  36.                     callback: function(data) { // data returned will be  Data JSON result from ml.query
  37.                         // display the results
  38.                         ml.$('#datadiv').html(ml.util.JsonHighlight(data)); 
  39.                         ml.$('#datadiv').dialog({"title": "Query Results"});
  40.                     }
  41.                 };
  42.  
  43.                 // ml.ui.map.RegionSelect takes one parameter, its Option object  
  44.                 var drawCircleForWkt = new ml.ui.map.RegionSelect(RegionSelectOptions);
  45.  
  46.                 // the beginDrawing() function triggers the drawing capabilities on the map.
  47.                 // this is reusable and can be called as many times as needed.
  48.                 ml.$('.ml-btn').on('click', function(e) {
  49.                     drawCircleForWkt.beginDrawing();
  50.                 });
  51.  
  52.             });
  53.         </script>
  54.     </head>
  55.     <body>
  56.         <div id="mapDiv" style="width:100%;height:100%;"></div>
  57.         <button class="ml-btn ml-btn-primary" id="region-select-trigger">
  58.             Select a Region
  59.         </button>
  60.         <div id="datadiv">
  61.         </div>
  62.     </body>
  63. </html>
No Query 
  1. <html>
  2. 	<head>
  3.         <style type="text/css" >
  4.         #datadiv {
  5.           height:300px !important;
  6.           overflow-y:scroll;
  7.         }
  8.         .mapdiv {
  9.           width:100%;
  10.           height:100%;
  11.         }
  12.         .ml-btn {
  13.           position:absolute;
  14.           top:80px;
  15.           left:45px;
  16.         }
  17.         </style>
  18. 		<script type="text/javascript" src="/JS"></script>
  19. 		<script type="text/javascript">
  20. 			ml.onload(function() {
  21.  
  22.                 // create our map and hold a reference to it
  23.                 var map=ml.map(document.getElementById('mapdiv'));
  24.  
  25.                 ml.$('.wkt-response').hide();
  26.  
  27.                 // RegionSelect options object
  28.                 // (map) [REQUIRED] reference to map
  29.                 // (callback) [REQUIRED]
  30.                 // (drawingType) [OPTIONAL default circle] either rectangle or circle
  31.                 // (query) [OPTIONAL] If provided it will return an ml.query data set to the callback
  32.                 //   (table) [OPTIONAL] table to query using the drawing
  33.                 //   (take) [OPTIONAL default 1,000] number of rows to return from table query
  34.                 //   (query) [OPTIONAL] reference to a configured ml.query
  35.                 var RegionSelectOptions = {
  36.                   map: map,
  37.                   drawingType: 'circle',
  38.                   callback: function(data) { // data returned will be MapLarge WKT representation of the drawing
  39.                         // display the results
  40.                         ml.$('#datadiv').html(ml.util.JsonHighlight(data)); 
  41.                         ml.$('#datadiv').dialog({"title": "Query Results"});
  42.                   }
  43.                 };
  44.  
  45.                 // ml.ui.map.RegionSelect takes one parameter, its Option object  
  46.                 var drawCircleForWkt = new ml.ui.map.RegionSelect(RegionSelectOptions);
  47.  
  48.                 // the beginDrawing() function triggers the drawing capabilities on the map.
  49.                 // this is reusable and can be called as many times as needed.
  50.                 ml.$('.ml-btn').on('click', function(e) {
  51.                   drawCircleForWkt.beginDrawing();
  52.                 });
  53. 			});
  54. 		</script>
  55. 	</head>
  56. 	<body>
  57. 		<div id='mapdiv' class='mapdiv'></div>
  58.         <button class="ml-btn ml-btn-primary" id="region-select-trigger">
  59.           Select a Region
  60.         </button>
  61.         <div id="datadiv"></div>
  62. 	</body>
  63. </html>
MAPPING PLATFORM FOR BIG DATA VISUALIZATION, ANALYTICS & PUBLISHING
Request More Info