Creating Map Layers

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.

var layeropts = { query: { table: 'hms/hotels', select: 'geo.dot' } }; 
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();

//show the layer
layer.show();

//hide the layer
layer.hide();

Code Example

<html>
    <head>
        <script type="text/javascript" src="/JS"></script>
        <script type="text/javascript">
            ml.onload(function() {
 
                //create a map zoomed in on Atlanta, GA (34,-84)
                //the second parameter is a Object literal
                var map = new ml.map('mapDiv', { lat: 33.709, lng: -84.404, 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
                    },
                });
                //show the layer
                layer.show();
            });
        </script>
    </head>
    <body>
        <div id="mapDiv" style="width:100%;height:100%;"></div>
    </body>
</html>

Examples

1. Map with Basic Layers

2. Map with Show/Hide Buttons

Map Layers

Show/Hide Map Layers

Examples

MAPPING PLATFORM FOR BIG DATA VISUALIZATION, ANALYTICS & PUBLISHING