Examples

basics

filtering

drawing

styling

querying

text filter

This example loads a map of Africa using the "AFRICA" key.

The "AFRICA" map was created using the Mapzania MapStyler (see www.mapzania.com/manual/concepts-mapstyler).

The example uses the "usingLayer" method of the Mapzania Map object to get a "COUNTRIES" Layer Object and make chained calls to the "filterByText" and then the "update" method of the layer to filter and redraw the layer data.

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

For more on the Layer Object and applicable methods see:

var map;

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

function filterClicked() {

    var el = document.getElementById('filters-select');
    var expression = el.options[el.selectedIndex].text;

    map.usingLayer("COUNTRIES")
        .clearFilters()
        .filterByText(expression)
        .update();
}

#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">
    <select id="filters-select">
        <option></option>
        <option>LandLocked=='Y'</option>
        <option>Name=='Mali' || Name=='Niger'</option>
        <option>Like(Name,'%A%')</option>
        <option>Population > 30000000</option>
        <option>Population / Area > 200</option>
        <option>Sqrt(Area) > 1200</option>
    </select>

    <button onclick="filterClicked()">Filter!</button>
</div>