Mapzania

Examples

basics

filtering

drawing

styling

querying

This example loads a blank 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 QueryEngine Object to buffer a GeoJSON point feature-collection.

It then adds the buffered feature-collection to a new layer called "LOCAL".

For more information see:

window.onload = function () {

    var gjson = {

        type: "FeatureCollection",

        features: [
            {
                type: "Feature",
                geometry: {
                    type: "Point", coordinates: [1.80969922, 41.235386]
                },
                id: 1,
                properties: { name: "Pete" }
            },
            {
                type: "Feature",
                geometry: {
                    type: "Point", coordinates: [1.82583, 41.236283]
                },
                id: 1,
                properties: { name: "Susan" }
            },
            {
                type: "Feature",
                geometry: {
                    type: "Point", coordinates: [1.801967, 41.23366]
                },
                id: 1,
                properties: { name: "Fred" }
            }
        ],
    };

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

        map.fitToBoundingBox([1.772, 41.220, 1.846, 41.253]);

        var qry = new Mapzania.QueryEngine();

        qry.usingFeatureCollection(gjson)
            .bufferGeometry(500, { srid: "GOOGLE" })
            .apply()
            .then(function (data) {

                map.usingNewLayer("LOCAL")
                    .addFeatureCollection(data)
                    .style({
                        fillColor: "#FF0000", size: 5, labelField: "name"
                    })
                    .update();
            })
    });
};

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

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