Examples

basics

filtering

drawing

styling

querying

bounding box 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 "filterByBoundingBox" 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:

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

        var bbox = [0, 0, 50, 30];

        map.usingLayer("COUNTRIES")
            .filterByBoundingBox(bbox)
            .update();

        //----------------------------------------------
        // Draw the filter's bounding box on a new layer
        //----------------------------------------------

        var GJ = Mapzania.GeoJson;

        var polygon = GJ.createPolygon(bbox);
        var feature = GJ.createFeature(polygon);
        var featureCollection = GJ.createFeatureCollection(feature);

        map.usingNewLayer("FILTER")
            .addFeatureCollection(featureCollection)
            .style({ strokeColor: "#FFFF00", strokeWidth: 7 })
            .update();

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

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