Examples

basics

filtering

drawing

styling

querying

style a local feature

This example loads a world map using the "BLANK" key.

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

The map then zooms to the US using the "fitToBoundingBox" method.

The example uses "usingNewLayer" the "addFeatureCollection" methods to render a feature on a new layer on the map.

Finally the example allows the user to change the style of all features on the new layer using the "style" method.

See:

var map;

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

        map.fitToBoundingBox([-131, 50, -70, 20]);

        var featureCollection = {
            type: "FeatureCollection",
            features: [
                {
                    type: "Feature",
                    geometry: {
                        coordinates: [
                            [
                                [-109, 41], [-109, 37], [-102, 37], [-102, 41], [-109, 41]
                            ]
                        ],
                        type: "Polygon"
                    }
                }
            ]
        };

        map.usingNewLayer("MY_LAYER")
            .addFeatureCollection(featureCollection)
            .style({ fillColor: "#000000" })
            .update();

    });
};

function redClicked() {
    map.usingLayer("MY_LAYER")
        .style({
            fillColor: "#FF0000",
            strokeWidth: 0
        })
        .update();
}

function greenClicked() {
    map.usingLayer("MY_LAYER")
        .style({
            fillColor: "#00FF00",
            strokeColor: "#000000",
            strokeWidth: 3
        })
        .update();
}

function blueClicked() {
    map.usingLayer("MY_LAYER")
        .style({
            fillColor: "rgba(0,0,255,0.5)",
            strokeWidth: 0
        })
        .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="redClicked()">Red Fill</button>
    <button onclick="greenClicked()">Green Fill with Black Border</button>
    <button onclick="blueClicked()">Semi Transparent Blue Fill</button>
</div>