Mapzania

Examples

basics

filtering

drawing

styling

querying

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 the "COUNTRIES" Layer Object. It the calls the "usingFeature" method to get a single Feature Object and then makes chained calls to the "style" and then the "update" methods of the feature 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 () {
        map.usingLayer("COUNTRIES")
         .style({
             fillColor: "#dddddd"
         });
    });
};

function styleFeatureClicked() {

    var style = { fillColor: "#FF0000" };

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

function unStyleFeatureClicked() {
    map.usingLayer("COUNTRIES")
        .usingFeature("17")
            .clearStyle()
            .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="styleFeatureClicked()">Style Nigeria</button>
    <button onclick="unStyleFeatureClicked()">Un-Style Nigeria</button>
</div>