2D Canvas Drawing Manager

View this example full screen.

JavaScript of 2D Canvas Drawing Manager

function initialize()
{
    //@ Map/Canvas
    var oMapOptions = {
        coStrType: zhupiter.CoStr.CoStrType.CANVAS2D,
        center: new zhupiter.CoStr.Point2D(214.0909703111111, 109.72328593151204),
        zoom: 12
    };
    var oCoStrMap = new zhupiter.CoStr.Map(document.getElementById('map_canvas'), oMapOptions);

    //@ DrawingManager
    var oDmOptions = {
        coStrDmDiv: document.getElementById('drawing_manager'),
        coStrMap: oCoStrMap,
        coStrDrawingMode: zhupiter.CoStr.drawing.OverlayType.MARKER,
        coStrDrawingControls: [zhupiter.CoStr.drawing.ControlType.MODES,
                               zhupiter.CoStr.drawing.ControlType.STROKE,
                               zhupiter.CoStr.drawing.ControlType.FILL,
                               zhupiter.CoStr.drawing.ControlType.WEIGHT,
                               ],
        coStrDrawingModes: [zhupiter.CoStr.drawing.OverlayType.HAND,
                            zhupiter.CoStr.drawing.OverlayType.MARKER,
                            zhupiter.CoStr.drawing.OverlayType.LINE,
                            zhupiter.CoStr.drawing.OverlayType.TRIANGLE,
                            zhupiter.CoStr.drawing.OverlayType.RECTANGLE,
                            zhupiter.CoStr.drawing.OverlayType.DELETE,
                            zhupiter.CoStr.drawing.OverlayType.CIRCLE,
                            zhupiter.CoStr.drawing.OverlayType.INFO,
                            zhupiter.CoStr.drawing.OverlayType.POLYGON,
                            zhupiter.CoStr.drawing.OverlayType.POLYLINE,
                            ],
        strokeWeight: 10,
        strokeColor: '#ff0000',
        strokeOpacity: 0.7,
        fillColor: '#00ff00',
        fillOpacity: 0.5,
        continuousDrawing: false,  //@ Default value is true
        draggable: true            //@ Default value is false
    };
    var oCoStrDm = new zhupiter.CoStr.drawing.DrawingManager(oDmOptions);
}

zhupiter.CoStr.event.addDomListener(window, 'load', initialize);

JavaScript + HTML of 2D Canvas Drawing Manager

<!DOCTYPE html>
<html>
    <head>
        <meta name='viewport' content='initial-scale=1.0, user-scalable=no'>
        <meta charset='utf-8'>
        <title>2D Canvas Drawing Manager</title>
        <style>
        html, body, #map_canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
        }
        </style>
        <script src='//costr.zhupiter.com/js/?libraries=drawing'></script>
        <script>
function initialize()
{
    //@ Map/Canvas
    var oMapOptions = {
        coStrType: zhupiter.CoStr.CoStrType.CANVAS2D,
        center: new zhupiter.CoStr.Point2D(214.0909703111111, 109.72328593151204),
        zoom: 12
    };
    var oCoStrMap = new zhupiter.CoStr.Map(document.getElementById('map_canvas'), oMapOptions);

    //@ DrawingManager
    var oDmOptions = {
        coStrDmDiv: document.getElementById('drawing_manager'),
        coStrMap: oCoStrMap,
        coStrDrawingMode: zhupiter.CoStr.drawing.OverlayType.MARKER,
        coStrDrawingControls: [zhupiter.CoStr.drawing.ControlType.MODES,
                               zhupiter.CoStr.drawing.ControlType.STROKE,
                               zhupiter.CoStr.drawing.ControlType.FILL,
                               zhupiter.CoStr.drawing.ControlType.WEIGHT,
                               ],
        coStrDrawingModes: [zhupiter.CoStr.drawing.OverlayType.HAND,
                            zhupiter.CoStr.drawing.OverlayType.MARKER,
                            zhupiter.CoStr.drawing.OverlayType.LINE,
                            zhupiter.CoStr.drawing.OverlayType.TRIANGLE,
                            zhupiter.CoStr.drawing.OverlayType.RECTANGLE,
                            zhupiter.CoStr.drawing.OverlayType.DELETE,
                            zhupiter.CoStr.drawing.OverlayType.CIRCLE,
                            zhupiter.CoStr.drawing.OverlayType.INFO,
                            zhupiter.CoStr.drawing.OverlayType.POLYGON,
                            zhupiter.CoStr.drawing.OverlayType.POLYLINE,
                            ],
        strokeWeight: 10,
        strokeColor: '#ff0000',
        strokeOpacity: 0.7,
        fillColor: '#00ff00',
        fillOpacity: 0.5,
        continuousDrawing: false,  //@ Default value is true
        draggable: true            //@ Default value is false
    };
    var oCoStrDm = new zhupiter.CoStr.drawing.DrawingManager(oDmOptions);
}

zhupiter.CoStr.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id='drawing_manager'></div>
        <div id='map_canvas'></div>
    </body>
</html>

CoString | Donate bitcoin: 1LX5KC19tXCPK8y72Z6LVoZjoSaCp9P6K