Map Layers

Layers are objects on the map generally used to display data from a dataset. Each layer can be styled and queried using layer options.

Within each map there can be multiple layers, allowing a user to create multiple map overlays on a single map space.

var layer = new ml.layer(map, options);

map is a reference to the ml.map where the layer will be added and options is an object that defines how the layer will be rendered.

For each layer added to a map, create a new ml.layer object and a list of JSON formatted layer display options.

  1. var layeropts = { query: { table: 'hms/hotels', select: 'geo.dot' } };
  2. var layer = new ml.layer(map, layeropts);

Show/Hide Map Layers
Each layer can be displayed or hidden by using layer.show() or layer.hide();

  1. //show the layer
  2. layer.show();
  1. //hide the layer
  2. layer.hide();
Code Example
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/JS"></script>
  4. <script type="text/javascript">
  5. ml.onload(function() {
  6.  
  7. //create a map zoomed in on Atlanta, GA (34,-84)
  8. //the second parameter is a Object literal
  9. var map = new ml.map('mapDiv', { lat: 33.709, lng: -84.404, z: 9 });
  10.  
  11. //add a layer with no style: default is "red dots"
  12. var layer = new ml.layer(map,
  13. {
  14. query: {
  15. table: 'hms/hotels', //table name = hotels
  16. select: 'geo.dot' //geography = dots
  17. },
  18. });
  19. //show the layer
  20. layer.show();
  21. });
  22. </script>
  23. </head>
  24. <body>
  25. <div id="mapDiv" style="width:100%;height:100%;"></div>
  26. </body>
  27. </html>

Examples

1. Map with Basic Layers


2. Map with Show/Hide Buttons