Examples

basics

filtering

drawing

styling

querying

change map bounding box

This example loads a map of the world using the "WORLD" key.

The "WORLD" 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.

This example makes calls to the "fitToBoundingBox" and "reset" methods of the Mapzania Map object.

For more on the above methods see:

var map;

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

function zoomClicked() {

    // Africa's Bounding Box
    var bbox = [-34.89, -35.03, 68.55, 35.24];

    map.fitToBoundingBox(bbox);
};

function resetClicked() {
    map.reset();
};
#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="zoomClicked()">Zoom to Africa</button>
    <button onclick="resetClicked()">Reset</button>
</div>