2D Canvas Draggable Polygons

View this example full screen.

CoString of 2D Canvas Draggable Polygons

View this example in sandbox :
o,109.72328593151204,214.0909703111111&z,16&g,2,ef1568,0.8,61ed04,0.3,4,212.72328593151204,-43.90902968888889,197.72328593151204,21.090970311111107,251.72328593151204,28.090970311111107,262.723285931512,-21.909029688888893

JavaScript of 2D Canvas Draggable Polygons

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

    var oCoords = [
        //@ Format: zhupiter.CoStr.Point2D(x, y)
        new zhupiter.CoStr.Point2D(-43.90902968888889, 212.72328593151204),
        new zhupiter.CoStr.Point2D(21.090970311111107, 197.72328593151204),
        new zhupiter.CoStr.Point2D(28.090970311111107, 251.72328593151204),
        new zhupiter.CoStr.Point2D(-21.909029688888893, 262.723285931512)
        ];
    var oPolygon = new zhupiter.CoStr.Polygon({
        coStrMap: oCoStrMap,
        path: oCoords,
        strokeWeight: 2,
        strokeColor: '#ef1568',
        strokeOpacity: 0.8,
        fillColor: '#61ed04',
        fillOpacity: 0.3,
        draggable: true
    });
}

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

JavaScript + HTML of 2D Canvas Draggable Polygons

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

    var oCoords = [
        //@ Format: zhupiter.CoStr.Point2D(x, y)
        new zhupiter.CoStr.Point2D(-43.90902968888889, 212.72328593151204),
        new zhupiter.CoStr.Point2D(21.090970311111107, 197.72328593151204),
        new zhupiter.CoStr.Point2D(28.090970311111107, 251.72328593151204),
        new zhupiter.CoStr.Point2D(-21.909029688888893, 262.723285931512)
        ];
    var oPolygon = new zhupiter.CoStr.Polygon({
        coStrMap: oCoStrMap,
        path: oCoords,
        strokeWeight: 2,
        strokeColor: '#ef1568',
        strokeOpacity: 0.8,
        fillColor: '#61ed04',
        fillOpacity: 0.3,
        draggable: true
    });
}

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

CoString | Donate bitcoin: 1LX5KC19tXCPK8y72Z6LVoZjoSaCp9P6K