2D Canvas Remove Markers

View this example full screen.

CoString of 2D Canvas Remove Markers

n/a

JavaScript of 2D Canvas Remove Markers

/* In this example, the marker is created when the user clicks on the map/canvas.
** The markers are maintained by an array.
** The user can click the panel buttons to hide, show or delete the markers.
*/
var g_oCoStrMap = null;
var g_aMarkers = [];

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

    addMarker(oPos);

    zhupiter.CoStr.event.addListener(g_oCoStrMap, 'click', function(oInEv)
    {
        addMarker(oInEv.xy);
    });
}

function addMarker(oInPos)
{
    var oMarker = new zhupiter.CoStr.Marker({
        coStrMap: g_oCoStrMap,
        position: oInPos
    });
    g_aMarkers.push(oMarker);
}

function showAllMarkers()
{
    for ( var iI = 0; g_aMarkers.length > iI; iI++ ) {
        g_aMarkers[iI].setMap(g_oCoStrMap);
    }
}

function hideAllMarkers()
{
    for ( var iI = 0; g_aMarkers.length > iI; iI++ ) {
        g_aMarkers[iI].setMap(null);
    }
}

function deleteAllMarkers()
{
    hideAllMarkers();
    g_aMarkers = [];
}

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

JavaScript + HTML of 2D Canvas Remove Markers

<!DOCTYPE html>
<html>
    <head>
        <meta name='viewport' content='initial-scale=1.0, user-scalable=no'>
        <meta charset='utf-8'>
        <title>2D Canvas Remove Markers</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>
/* In this example, the marker is created when the user clicks on the map/canvas.
** The markers are maintained by an array.
** The user can click the panel buttons to hide, show or delete the markers.
*/
var g_oCoStrMap = null;
var g_aMarkers = [];

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

    addMarker(oPos);

    zhupiter.CoStr.event.addListener(g_oCoStrMap, 'click', function(oInEv)
    {
        addMarker(oInEv.xy);
    });
}

function addMarker(oInPos)
{
    var oMarker = new zhupiter.CoStr.Marker({
        coStrMap: g_oCoStrMap,
        position: oInPos
    });
    g_aMarkers.push(oMarker);
}

function showAllMarkers()
{
    for ( var iI = 0; g_aMarkers.length > iI; iI++ ) {
        g_aMarkers[iI].setMap(g_oCoStrMap);
    }
}

function hideAllMarkers()
{
    for ( var iI = 0; g_aMarkers.length > iI; iI++ ) {
        g_aMarkers[iI].setMap(null);
    }
}

function deleteAllMarkers()
{
    hideAllMarkers();
    g_aMarkers = [];
}

zhupiter.CoStr.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="panel">
            <input onclick="showAllMarkers();" type=button value="Show all markers">
            <input onclick="hideAllMarkers();" type=button value="Hide all markers">
            <input onclick="deleteAllMarkers();" type=button value="Delete all markers">
        </div>
        <div id='map_canvas'></div>
        <p>Click on the map/canvas to add markers.</p>
    </body>
</html>

CoString | Donate bitcoin: 1LX5KC19tXCPK8y72Z6LVoZjoSaCp9P6K