
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Combitrip API - Maps: Shapes Programmatically</title>
</head>
<body>
    <div style="padding: 20px 0">
        <button onclick="addMarker()">Add Marker</button>
        <button onclick="removeMarker()">Remove Marker</button>
        <button onclick="addCircle()">Add Circle</button>
        <button onclick="removeCircle()">Remove Circle</button>
        <button onclick="addPolyline()">Add Polyline</button>
        <button onclick="removePolyline()">Remove Polyline</button>    
        <button onclick="addPolylineEncoded()">Add Polyline Encoded</button>
        <button onclick="removePolylineEncoded()">Remove Polyline Encoded</button>
    </div>
    <div id="osm-map" style="width: 100%; height: 100%;"></div>

    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://www.combitrip.org/api/public/combitrip.maps.min.js?key=32a61ca69e22441db052df11ab8ba02b"></script>

    <script>
        var point_a = [52.248624, 4.669728], point_b = [52.338871, 4.825088];
        var UNIQUE_MARKER = 'mymarker', UNIQUE_CIRCLE = 'mycircle', UNIQUE_POLYLINE = 'mypolyline', UNIQUE_POLYLINE_ENCODED = 'mypolylineEncoded';
        var MAPTEST;
        
        new ABOSM("osm-map", {
            center: point_a,
            zoom: 14
        }).ready(function(inst){
            MAPTEST = inst;
        });
        
        function addMarker(){
            MAPTEST.marker(point_a, { unique: UNIQUE_MARKER });
        }
        
        function removeMarker(){
            MAPTEST.findObj(UNIQUE_MARKER).removeObj();
        }
        
        function addCircle(){
            MAPTEST.circle(point_a, { 
                unique: UNIQUE_CIRCLE,
                color: 'red',
                fillColor: '#f03',
                fillOpacity: 0.5,
                radius: 500                
            });
        }
        
        function removeCircle(){
            MAPTEST.findObj(UNIQUE_CIRCLE).removeObj();
        }
        
        function addPolyline(){
            MAPTEST.polyline(point_a, point_b, { unique: UNIQUE_POLYLINE });
        }
        
        function removePolyline(){
            MAPTEST.findObj(UNIQUE_POLYLINE).removeObj();
        }     
        
        function addPolylineEncoded(){
            var arr = [point_a, point_b];
            var encoded = ABOSMUtils.encodePath(arr);
            MAPTEST.polylineEncoded(encoded, { unique: UNIQUE_POLYLINE_ENCODED });
        }
        
        function removePolylineEncoded(){
            MAPTEST.findObj(UNIQUE_POLYLINE_ENCODED).removeObj();
        }
    </script>
    
</body>