Documentation

Geometry Overlays

A geometry overlay allows the developer to draw additional geometries on a Micello map. The coordinates used to define the shape are absolute map coordinates, and the numeric arguments passed to define the paths between arguments are based on the .SVG file format.

Path Commands / Coordinate Formats
[ 0, mx, my ] - 0 "Move to"
[ 1, mx, my ] - 1 "Line to"
[ 3, mx1, my1, mx2, my2, mx, my ] - 3 "Bezier curve to" where mx/my is the anchor point and mx1/my1 and mx2/my2 are the control points for the beginning and ending of the curve.
[ 4, mx, my ] - 4 "Close path"
Drawing Polygons
Basic polygons like rectangles are easily created with a combination of "Move to", "Line to", and "Close path" commands.

function draw_geometry_overlay () {
    var  geometry1  =  {
        "lid": 90, // level id
        "t": "Search Result", // style
        "shp": [
            [0,900.0,250.0], // move to
            [1,1200.0,250.0], // line to
            [1,1200.0,400.0],
            [1,900.0,400.0],
            [4] // close path
        ],
        "l": [1050.0,325.0,200,200,0], // text label position
        "lr": "Tent  Sale!" // text label
    };
    mapDataObject_geometryOverlay.addGeometryOverlay(geometry1);    
}

Drawing shapes with Bezier curves requires a more complex shape definition:

function drawCircle () {
    var circle_path= [
        [0,447.269,494.846], // move to
        [3, 447.269, 503.089, 432.894, 509.770, 415.160, 509.770], // bezier curve
        [3, 397.427, 509.770, 383.051, 503.089, 383.051, 494.846],
        [3, 383.051, 486.604, 397.427, 479.922, 415.160, 479.922],
        [3, 432.894, 479.922, 447.269, 486.604, 447.269, 494.846],
        [4] // close path
    ];
    var circle = {
        "lid": thisLevel.id,
        "t": "Search Result",
        "shp": circle_path // the shape path defined above
    };
    mapDataObject.addGeometryOverlay(circle);
    aid = circle.aid; // keep track of the aid
}

Removing Geometry Overlays
If a geometry overlay needs to be removed from the map, it must be specified by it's id (.aid). The aid is assigned when the marker is added to the map and can be seen above on line 16.

With the aid property, removing geometry overlays is simple:

 mapDataObject.removeGeometryOverlay(aid);

* The style "Search Result" is used in these examples because it's easy to see. Any predefined style, or a style from an override theme, can be applied.

Try drawing and clearing the 'Tent Sale' rectangle: