Examples

basics

filtering

drawing

styling

querying

query a map layer

This example loads a map of London using the "LONDON" key.

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

The example uses the QueryEngine Object to manipulate data from an underlying layer-source of a map-layer and then render it on the map (as centroids).

For more information see:

window.onload = function () {

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

        map.fitToBoundingBox([-0.1462, 51.48, -0.0478, 51.52]);

        map.usingLayer("SIGHTS")
            .hide();

        map.usingLayer("TUBE")
            .hide();

        var point = {
            type: "Point",
            coordinates: [-0.1, 51.5]
        };

        // Filter the WARD Layer on the Map (polygons)
        map.usingLayer("WARD")
            .filterByNearest(point, { take: 10 })
            .update();

        // Use the layer-source of the WARDS layer in a query
        // NOTE: map layer filters(nearest) are automatically applied.       
        var qry = new Mapzania.QueryEngine();

        qry.usingMapLayer(map, "WARD")
            .convertToCentroids()
            .apply()
            .then(function (data) {

                //Create a new layer and add the centroids
                map.usingNewLayer("LOCAL")
                    .addFeatureCollection(data)
                    .style({
                        fillColor: "#7ac2eb",
                        strokeColor: "#fd8168",
                        strokeWidth: 3,
                        size: 22
                    })
                    .update();
            });

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

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