JavaScript APIWeb Services APIGeocoder API
  1. Layers
  2. Layer Hover & Click
Layer Constructor onHover Options
Property Type Description
onHover:function Function A function with two parameters called when a data point or shape is hovered upon. Function must return a string (which may be HTML) that is to be displayed in a popup bubble over the shape. Information about the shape will be passed in by the first parameter, and row data can be accessed by the data property.

Example if the first parameter is named data, return data.data.ColumnName; The second parameter contains a reference to the map layer which generated the hover event.

Note: Any column name used in the onHover function must be present in the hoverFields array.
hoverFields string[] An array of all column names accessible for use inside of the onHover function.
onHover:template   The second type of hover that uses an HTML template to specify which items to display and how they should be displayed. See example here.
hoverFieldsCommaDel string A list of comma delimited fields that will be used by onHover in conjunction with the hover template. The fields specified here can be referenced in the onHover Template. See example here.
Example 
  1. "onHover": "template", 
  2. "hoverTemplate": "{HotelName}<br />
  3. \n{Address}"
Demo 
  1. <html>
  2.    <head>
  3.       <script type="text/javascript" src="/JS"></script>
  4.       <script type="text/javascript">
  5.          ml.onload(function() {
  6.          	var map = ml.map("mapDiv", 
  7.                                        {
  8.          "lat": 38.048091067457236,
  9.          "lng": -95.3173828125,
  10.          "z": 5,
  11.          "searchBox": true,
  12.          "mapId": "ef864212-fee6-4724-8bea-c83710cbe2b1",
  13.          "api": "LEAFLET",
  14.          "layers": [
  15.           {
  16.             "query": {
  17.               "select": {
  18.                 "type": "geo.dot"
  19.               },
  20.               "where": [],
  21.               "table": {
  22.                 "name": "hms/hotels"
  23.               }
  24.             },
  25.             "style": {
  26.               "method": "rules"
  27.             },
  28.             "visible": true,
  29.             "zIndex": "1",
  30.             "hashcode": "7c82a34da01e5b5761d627236b3fade9",
  31.             "onHover": "template",
  32.             "hoverTemplate": "{HotelName}<br />\n{Address}",
  33.             "hoverFieldsCommaDel": "HotelName,Address",
  34.             "type": "layer",
  35.             "opacity": "1.0",
  36.             "id": "layerml_6"
  37.           }
  38.          ],
  39.          "drawings": [],
  40.          "drawingToolsHidden": true,
  41.          "drawingEditingEnabled": true
  42.                                        });
  43.          });
  44.       </script>
  45.    </head>
  46.    <body>
  47.       <div id="mapDiv" style="width:100%;height:100%;"></div>
  48.    </body>
  49. </html>
Layer Constructor onClick Options
Property Type Description
onClick: debug   Specifying the debug option will result in all of the data columns from the clicked on object being displayed in a dialog.
onClick: function Function Specifies a function with two parameters that will be called whenever a data point or shape is clicked. Function must return a string (which may be HTML) that is to be displayed in a popup over the shape. Information about the shape will be passed in by the first parameter, and row data can be accessed by the data property.

Example: If the first parameter is named data, return data.data.ColumnName; The second parameter contains a reference to the map layer which generated the click event.
onClick: template   Use the clickTemplate to render the data from the clicked on object. See example here.
clickTemplate HTML An HTML template to specify which data items to display when a point or object is clicked on and how to display them. For more information, see a live example here. To set create clickTemplates with the UI see a video tutorial here.
Example 
  1.  "clickTemplate": "{HotelName}<br />\n{Address}",
Demo 
  1. <html>
  2.    <head>
  3.       <script type="text/javascript" src="/JS"></script>
  4.       <script type="text/javascript">
  5.          ml.onload(function() {
  6.          	var map = ml.map("mapDiv", 
  7.                                        {
  8.          "lat": 38.048091067457236,
  9.          "lng": -95.3173828125,
  10.          "z": 5,
  11.          "searchBox": true,
  12.          "mapId": "ef864212-fee6-4724-8bea-c83710cbe2b1",
  13.          "api": "LEAFLET",
  14.          "layers": [
  15.           {
  16.             "query": {
  17.               "select": {
  18.                 "type": "geo.dot"
  19.               },
  20.               "where": [],
  21.               "table": {
  22.                 "name": "hms/hotels"
  23.               }
  24.             },
  25.             "style": {
  26.               "method": "rules"
  27.             },
  28.             "visible": true,
  29.             "onClick": "template",
  30.             "zIndex": "1",
  31.             "hashcode": "7c82a34da01e5b5761d627236b3fade9",
  32.             "clickTemplate": "{HotelName}<br />\n{Address}",
  33.             "type": "layer",
  34.             "opacity": "1.0",
  35.             "hoverFieldsCommaDel": "",
  36.             "id": "layerml_6"
  37.           }
  38.          ],
  39.          "drawings": [],
  40.          "drawingToolsHidden": true,
  41.          "drawingEditingEnabled": true
  42.  
  43.                                        });
  44.          });
  45.       </script>
  46.    </head>
  47.    <body>
  48.       <div id="mapDiv" style="width:100%;height:100%;"></div>
  49.    </body>
  50. </html>
MAPPING PLATFORM FOR BIG DATA VISUALIZATION, ANALYTICS & PUBLISHING
Request More Info