Micello SDK v1 extends Leaflet SDK to allow you to add layers on top of the map level. Available vector layers are path, polyline, ploygon, rectangle, circle, SVG, canvas. Detailed documentation on different options available for each class is available on leaflet documentation page.

In this example we will show you how to add a vector layer on a specific level.

Each level in Micello map can be considered as a separate Leaflet layer. First, we will get all the layers available.

var layers = community.getMapLayers();

Now, we will create a circle vector layer. List of all the options available to L.circle class is available here.

var circle = L.circle([37.3256788,-121.9478141], 50, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
});

Now that we have created a circle vector object, we need to add it on top of the level. Let's get the layer using level id and add circle layer to it.

var activeLayer = layers.getLayer(lid);
activeLayer.addLayer(circle);

Complete code will look something like this:

function addLayer() {
    var layers = community.getMapLayers();
    /* This example uses a really basic circle but could be anything */
    var circle = L.circle([37.3256788,-121.9478141], 50, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5
    });
    var activeLayer = layers.getLayer(lid);
    activeLayer.addLayer(circle);
}