Examples

basics

filtering

drawing

styling

querying

style an existing layer

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 "style" and then the "update" methods to change the style and redraw the layer with the new style.

For more information see:

var map;

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

function blueClicked () {
    var style = {
        fillColor: "rgba(0,0,255,0.3)"
    };

    map.usingLayer("COUNTRIES")
        .style(style)
        .update();
};


function randomClicked() {

    var style = function (properties) {
        return {
            fillColor: '#' + Math.floor(Math.random() * 16777215).toString(16),
            strokeColor: "#000000",
            strokeWidth: 1,
        };
    }

    map.usingLayer("COUNTRIES")
        .style(style)
        .update();
};

function populationClicked() {

    var style = function (properties) {

        var color = "#FFFFFF";

        var population = properties["Population"];

        if (population > 5000000)
            color = "#FFAAAA";

        if (population > 10000000)
            color = "#FF4444";

        if (population > 30000000)
            color = "#FF0000";

        return {
            fillColor: color,
            strokeColor: "#000000",
            strokeWidth: 1,
        };
    }

    map.usingLayer("COUNTRIES")
        .style(style)
        .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">
    <button onclick="blueClicked()">Blue</button>
    <button onclick="randomClicked()">Random</button>
    <button onclick="populationClicked()">By Population</button>
</div>