2D Canvas Remove a Polyline

View this example full screen.

CoString of 2D Canvas Remove a Polyline

View this example in sandbox :
o,109.72328593151204,214.0909703111111&z,14&e,6,ef1568,1,4,153.72328593151204,23.090970311111107,146.72328593151204,63.09097031111111,159.72328593151204,97.0909703111111,156.72328593151204,113.0909703111111

JavaScript of 2D Canvas Remove a Polyline

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

    var oPath = [
        //@ Format: zhupiter.CoStr.Point2D(x, y)
        new zhupiter.CoStr.Point2D(23.090970311111107, 153.72328593151204),
        new zhupiter.CoStr.Point2D(63.09097031111111, 146.72328593151204),
        new zhupiter.CoStr.Point2D(97.0909703111111, 159.72328593151204),
        new zhupiter.CoStr.Point2D(113.0909703111111, 156.72328593151204)
        ];
    g_oPolyline = new zhupiter.CoStr.Polyline({
        path: oPath,
        strokeWeight: 6,
        strokeColor: '#ef1568',
        strokeOpacity: 1.0
    });

    showPolylineOnMap();
}

function showPolylineOnMap()
{
    g_oPolyline.setMap(g_oCoStrMap);
}

function removePolylineFromMap()
{
    g_oPolyline.setMap(null);
}

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

JavaScript + HTML of 2D Canvas Remove a Polyline

<!DOCTYPE html>
<html>
    <head>
        <meta name='viewport' content='initial-scale=1.0, user-scalable=no'>
        <meta charset='utf-8'>
        <title>2D Canvas Remove a Polyline</title>
        <style>
        html, body, #map_canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
        }
        #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -200px;
        border: 1px solid blue;
        padding: 5px;
        background-color: #fefefe;
        z-index: 10;
        }
        </style>
        <script src='//costr.zhupiter.com/js/'></script>
        <script>
var g_oCoStrMap = null;
var g_oPolyline = null;
function initialize()
{
    var oMapOptions = {
        coStrType: zhupiter.CoStr.CoStrType.CANVAS2D,
        center: new zhupiter.CoStr.Point2D(214.0909703111111, 109.72328593151204),
        zoom: 14
    };
    g_oCoStrMap = new zhupiter.CoStr.Map(document.getElementById('map_canvas'), oMapOptions);

    var oPath = [
        //@ Format: zhupiter.CoStr.Point2D(x, y)
        new zhupiter.CoStr.Point2D(23.090970311111107, 153.72328593151204),
        new zhupiter.CoStr.Point2D(63.09097031111111, 146.72328593151204),
        new zhupiter.CoStr.Point2D(97.0909703111111, 159.72328593151204),
        new zhupiter.CoStr.Point2D(113.0909703111111, 156.72328593151204)
        ];
    g_oPolyline = new zhupiter.CoStr.Polyline({
        path: oPath,
        strokeWeight: 6,
        strokeColor: '#ef1568',
        strokeOpacity: 1.0
    });

    showPolylineOnMap();
}

function showPolylineOnMap()
{
    g_oPolyline.setMap(g_oCoStrMap);
}

function removePolylineFromMap()
{
    g_oPolyline.setMap(null);
}

zhupiter.CoStr.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="panel">
            <input onclick="showPolylineOnMap();" type=button value="Show polyline">
            <input onclick="removePolylineFromMap();" type=button value="Remove polyline">
        </div>
        <div id='map_canvas'></div>
    </body>
</html>