Examples

basics

filtering

drawing

styling

querying

show and hide layers

This example loads a map of South America using the
"SOUTH_AMERICA" key.

The "SOUTH_AMERICA" map was created using the Mapzania MapStyler.

See www.mapzania.com/manual/concepts-mapstyler for more details on how to use the styler.

Also see www.mapzania.com/jsapi/map-object for more details on how to create a Mapzania.Map object.

The example uses the "usingLayer" method of the Mapzania Map object to make chained calls to the "show" and "hide" methods of the "COUNTRIES" layer.

For more on layers see: www.mapzania.com/manual/concepts-layers

For more on the Layer Object and show and hide methods see: www.mapzania.com/jsapi/layer-object

var map;

window.onload = function () {
    map = new Mapzania.Map("map-div", "SOUTH_AMERICA");
};

function showLayerClicked() {
    map.usingLayer("COUNTRIES")
        .show();
};

function hideLayerClicked() {
    map.usingLayer("COUNTRIES")
        .hide();
};
#button-div {
    z-index: 1000000;
    position: absolute;
    top: 10px;
    right: 10px;
    border: solid 1px #aaa;
    background-color: white;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 6px;
}

#map-div {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

<div id="map-div"></div>

<div id="button-div">
    <button onclick="showLayerClicked()">Show Countries</button>
    <button onclick="hideLayerClicked()">Hide Countries</button>
</div>