Examples

basics

filtering

drawing

styling

querying

add features to layer
Draw a polygon on the map (double click to complete drawing).
It will be added to a feature layer.

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 example uses the "setMouseMode" method of the Mapzania Map object to change the state of the mouse on the map.

For more on MouseModes see:

For more on events see:

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

See:

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

        map.setMouseMode(Mapzania.MouseModes.DrawPolygon);

        map.usingNewLayer("MY_LAYER")
            .style({
                fillColor: "rgba(0,0,0,0.7)",
                strokeColor: "#000000",
                strokeWidth: 2
            });

        map.on("drawing_done", function (data) {

            var feature = {
                type: "Feature",
                geometry: data,
                properties: {}
            };

            map.usingLayer("MY_LAYER")
                .addFeature(feature)
                .update();

            map.setMouseMode(Mapzania.MouseModes.Pan);
        });
    });
};
#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;
}

    #button-div div {
        text-align: center;
        font-size: 11px;
    }

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

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

<div id="button-div">
    <div><i>Draw a polygon on the map (double click to complete drawing).</i></div>
    <div><i>It will be added to a feature layer.</i></div>
</div>