Creating lines and polygons

draw-lines-one-click-and-polygons-dblclick.js

var map;
var polyline;
var count = 0;
var points = new Array();
var markers = new Array();
var lineColor = "#0000af";
var fillColor = "#335599";
var lineWeight = 3;
var lineOpacity = .8;
var fillOpacity = .2;

var divIdName = "divMap";
var divInfoName = "divInfo";

var zoomLevel = 14;

map = new MMap2(document.getElementById(divIdName), {
    draggableCursor: "auto",
    draggingCursor: "move"
});
map.setCenter(new MPoint(-46.6520066, -23.5650127), zoomLevel);
map.disableDoubleClickZoom();

LBS.Event.addListener(map, "click", leftClick);

function leftClick(e, point) {
    var point = map.getLatLngFromPixel(e.xy);

    if (!point)
        return;

    count++;

    var marker = new MMarker(point, {
        icon: G_DEFAULT_ICON,
        draggable: true,
        bouncy: false,
        dragCrossMove: true
    });

    marker.content = count;
    markers.push(marker);

    // Drag listener to move line with marker
    LBS.Event.addListener(marker, "drag", function(e) {
        drawLine();
    });

    LBS.Event.addListener(marker, "dblclick", function(e) {
        drawPolygon();
    });

    map.addOverlay(marker);
    drawLine();
}

function drawLine() {
    if (polyline) {
        map.removeOverlay(polyline);
    }
    points.length = 0;

    for (i = 0; i < markers.length; i++) {
        points.push(markers[i].getLatLng());

        polyline = new MPolyline(points, lineColor, lineWeight, lineOpacity);
    }
    map.addOverlay(polyline);
}

function drawPolygon() {
    if (polyline) {
        map.removeOverlay(polyline);
    }
    points.length = 0;

    if (markers.length < 3) {
        console.log('you need at least 3 points to draw a polygon');
        return;
    }

    for (i = 0; i < markers.length; i++) {
        points.push(markers[i].getLatLng());

        polyline = new GPolygon(points, lineColor, lineWeight, lineOpacity, "#AAA", 0.5);
    }
    map.addOverlay(polyline);
}