Mapzania

Examples

basics

filtering

drawing

styling

querying

output

for line and polygon, double click to complete drawing

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:

www.mapzania.com/jsapi/map-object-methods-setmousemode

For more on events see:

var map;

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

        map.on("drawing_done", function (data) {
            var el = document.getElementById("output-pre");
            el.innerHTML = JSON.stringify(data, null, 2);
        });
    });
};

function drawPointClicked() {
    clearOutput();
    map.setMouseMode(Mapzania.MouseModes.DrawPoint);
}

function drawLineClicked() {
    clearOutput();
    map.setMouseMode(Mapzania.MouseModes.DrawLine);
}

function drawPolygonClicked() {
    clearOutput();
    map.setMouseMode(Mapzania.MouseModes.DrawPolygon);
}

function clearOutput() {
    var el = document.getElementById("output-pre");
    el.innerHTML = "";
}

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

#button-div {
    z-index: 1000000;
    position: absolute;
    top: 10px;
    right: 230px;
    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;
    }

#output-pre {
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 220px;
    font-size: 12px!important;
    background-color: white;
    padding: 10px;
    margin-bottom: 0px;
    border-radius: 0px;
}

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

<div id="button-div">
    <button onclick="drawPointClicked()">Draw an Point</button>
    <button onclick="drawLineClicked()">Draw an Line</button>
    <button onclick="drawPolygonClicked()">Draw a Polygon</button>

    <div><i>for line and polygon, double click to complete drawing</i></div>
</div>