API Reference

Simple example of map initialization.

                    
    new ABOSM("osm-map", {
        center: [4.669728,52.248624],
        zoom: 10
    });
                    
                

Simple example of drawing polyline on map.

                    
    new ABOSM("osm-map", {
        center: [52.248624, 4.669728],
        zoom: 10
    }).ready(function (inst) {
        var point_a = [52.248624, 4.669728], point_b = [52.338871, 4.825088];

        var line = inst.polyline(point_a, point_b, {color: '#85a9dd', weight: 4});

        var dashed_line = inst.polyline([52.287063,4.753504], [52.293782,4.857877], {
            color: '#b700ea',
            weight: 4,
            dashLength: 10,
            textOptions: {
                text: 'dashed example!'
            }
        });

        var circle = inst.circle(point_a, {
            unique: 'mycircle',
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.5,
            radius: 500
        });

        var rectangle = inst.rectangle([[52.338871, 4.825088], [52.308871, 4.805088]], {
            unique: 'myrectangle',
            weight: 1,
            color: 'blue',
            fillColor: '#0004ff',
            fillOpacity: 0.5
        });

        var polygon = inst.polygon([[52.311627, 4.684182], [52.303231, 4.678341], [52.297562, 4.695176], [52.312887, 4.703077], [52.311627, 4.684182]], {
            unique: 'mypolygon',
            weight: 1,
            color: 'yellow',
            fillColor: '#fcb601',
            fillOpacity: 0.3
        });

        // create the group
        var group = new L.featureGroup([line, dashed_line, circle, rectangle, polygon]);

        inst.fitBounds(group);
    });
                    
                

This example show how to draw encoded polyline on map.

                    
    new ABOSM("osm-map", {
        center: [52.248624, 4.669728],
        zoom: 10
    }).ready(function(inst){
        var point_a = [52.248624, 4.669728],
            point_b = [52.338871, 4.825088],
            arr = [point_a, point_b];
            encoded = ABOSMUtils.encodePath(arr);
        var line = inst.polylineEncoded(encoded);
        inst.fitBounds(line);
    });
                    
                

This example show how to draw encoded polyline on map.

You can use this to draw a line using the output of a routing API

                    
        new ABOSM("osm-map", {
            center: [52.248624, 4.669728],
            zoom: 10
        }).ready(function(inst){
            var encoded = '}lm~Hykm\\\\JvQBnEBlDBrADfLNbHPvDf@fGn@jFn@xDhAhFhA`EtB|F`ChFxDnH`GbLhDtG`BfDnBxDxEdJzC~GjDxJh@dBd@`Bx@`Df@tB^`BVtA`@~B`@nCZvBZ`C|@hIb@~Dz@|In@~Fd@fFrAfRdBlTnC|c@f@vH`@jEPbBl@dFT`BZrBj@lDt@nDfC~Jd@fBvAbEfApCdChGxAjCfE~GbCdDpB|BtArAjFvEhDvBbIpEdHzDtDfBzInDzDhBfExBxKfGtGhDjHdE~Av@xAx@pHfEbAt@xDbDhBhBnBzBfB~B|A~BfFhIzAdCvBnDdN|TdXjc@`AxAnB`DhTp]rAvBnDvFpK`Q~DpGfk@p~@fJbOfDhFlJhOr^rl@na@`p@d\\\\|h@hZhf@dCzDjFjItGlKxFbJdE`Hj\\\\vh@@';
            var line = inst.polylineEncoded(encoded);
            inst.fitBounds(line);
        });
                    
                

                    
        new ABOSM("osm-map", {
            center: [52.248624, 4.669728],
            zoom: 10
        }).ready(function(inst){
            var point_a = [52.248624, 4.669728], point_b = [52.338871, 4.825088];
            // create line
            var line = inst.polyline(point_a, point_b, { color: '#85a9dd', weight: 4 });

            // create markers
            var marker1 = inst.marker(point_a), marker2 = inst.marker(point_b);

            // create the group
            var group = new L.featureGroup([marker1, marker2, line]);

            // fit bounds
            inst.fitBounds(group.getBounds());
        });
                    
                

                    
        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();
        }
                    
                

Create the single marker on map.

                    
        new ABOSM("osm-map", {
            center: [52.248624, 4.669728],
            zoom: 10
        }).ready(function(inst){
            var marker = inst.marker([40.641113, -8.654473]);
            inst.fitBounds(marker);
        });
                    
                

Create the single marker on map.

                    
        new ABOSM("osm-map", {
            center: [52.248624, 4.669728],
            zoom: 10
        }).ready(function(inst){
            var marker = inst.marker([40.641113, -8.654473]);
            marker.attachPopup('Popup Content');
            marker.attachPopup('<h3>Popup Content!</h3><p><strong>This</strong> is <span style="color:red">html</span> example</p>');
            inst.fitBounds(marker);
        });
                    
                

                    
        new ABOSM("osm-map", {
            center: [52.248624, 4.669728],
            zoom: 10
        }).ready(function(inst){
            marker = inst.iconMarker([40.641113, -8.654473], '../images/fromA.png',  { iconSize: [35, 45], iconAnchor: [17, 45] });
            inst.fitBounds(marker);
        });
                    
                

Javascript

                    
        new ABOSM("osm-map", {
            center: [52.248624, 4.669728],
            zoom: 10
        }).ready(function(inst){
            marker = inst.iconMarker([40.641113, -8.654473], '../images/fromA.png',  { iconSize: [35, 45], iconAnchor: [17, 45], className: 'blinking' });
            inst.fitBounds(marker);
        });
                    
                

Css

                    
        @keyframes fade {
            from { opacity: 0.3; }
        }

        .blinking {
            animation: fade 1s infinite alternate;
        }
                    
                

Scripts

            
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <!--  Any jQuery version v1.10.x or above -->
    <script src="https://www.combitrip.com/api/public/combitrip.maps.min.js?key=<your-api-key>"></script>
            
            

Html:

            
    <div id="osm-map" />
            
            

Javascript:

            
    $(function () {
        new ABOSM("osm-map", {
            center: [52.248624, 4.669728],
            zoom: 10
        }).ready(function(inst){
            var origin_latlng = [52.248624, 4.669728];
            var destination_latlng = [52.338871, 4.825088];

            var mkOrig = inst.iconMarker(origin_latlng, '/images/fromA.png',  { iconSize: [35, 45], iconAnchor: [17, 45], addToMap: false });
            mkOrig.attachPopup('START ROUTE!');

            var mkDest = inst.iconMarker(destination_latlng, '/images/toB.png',  { iconSize: [35, 45], iconAnchor: [17, 45] , addToMap: false });
            mkDest.attachPopup('END ROUTE!');

            inst.route( [ origin_latlng, destination_latlng], {
                showItinerary: false,
                originMarker: mkOrig,
                destinationMarker: mkDest,
                lineOptions: {
                    styles: [
                        {color: '#85a9dd', weight: 4 }
                    ]
                }
            });
        });
    }
            
            

            
    <iframe width="400" height="400" src="https://www.combitrip.com/api/public/embed_map.php?key=32a61ca69e22441db052df11ab8ba02b&origin=52.3745380,4.8979750&destination=52.3791400,4.9002700"></iframe>
            
            

Html:

            
<div class="autocomplete-container">
    <input id="ac" style="width:100%" type="text" autocomplete="off"/>
</div>

<div id="osm-map" style="width: 100%; height: 100%;">
            

Scripts

            
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <!--  Any jQuery version v1.10.x or above -->
    <script src="https://www.combitrip.com/api/public/combitrip.geocomplete.js"></script>
            
            

Html:

            
    <input type="text" placeholder="Anywhere..." id="location" />
            
            

Javascript:

            
    $(function () {
        $("#location").abgeo({
            resultRenderLimit: 5
        });
    }
            
            

                    
        $("#autocomplete").abgeo({
            showCurrentLoc: false,
            api: 'https://www.example.com/autocomplete',
            apiParams: {
                mode: 'walking'
            },
            apiCustomHeaders: {
                'api-custom-header': '1234'
            },
            mapSource: function (source) {
                return [
                    {
                        display_name: 'Amsterdam, Netherlands',
                        country: 'Netherlands',
                        country_code: 'NL',
                        state: 'Amsterdam',
                        city: 'Amsterdam'
                    }];
            },
            geocoder: {
                api: 'https://www.example.com/geocode',
                engine: 'custom',
                apiCustomHeaders: {
                    'geocode-custom-header': 'value'
                },
                apiParams: {
                    geocode_param_1: 'value_1',
                    geocode_param_2: 'value_2'
                },
                customParser: function (data) {
                    return {parsed: 'value'};
                }
            }
        })
                    
                

Javascript:

                
        $(function () {
            $("#location").abgeo(<options>);
        }
                
                

You can bind the change event:

            
    $(function () {
        $("#location").abgeo(<options>).bind("abgeo:place_changed", function(event, result) {
            // code
        });
    }
            
            

Engine types

            
<script>
    var _origin, _destination, _mapInst;

    function route(){
        if (_origin && _destination){
            var origin_latlng = [_origin.lat(), _origin.lng()];
            var destination_latlng = [_destination.lat(), _destination.lng()];

            var mkOrig = _mapInst.iconMarker(origin_latlng, '/images/fromA.png', {iconSize: [35, 45], iconAnchor: [17, 45], addToMap: false});
            mkOrig.attachPopup('START ROUTE!');

            var mkDest = _mapInst.iconMarker(destination_latlng, '/images/toB.png', {iconSize: [35, 45], iconAnchor: [17, 45], addToMap: false});
            mkDest.attachPopup('END ROUTE!');

            _mapInst.route([origin_latlng, destination_latlng], {
                showItinerary: false,
                originMarker: mkOrig,
                destinationMarker: mkDest,
                lineOptions: {
                    styles: [
                        {color: '#85a9dd', weight: 4}
                    ]
                }
            });
        }
    }

    $("#ac-origin").abgeo({
        showCurrentLoc: true
    }).bind("abgeo:place_changed", function (event, result) {
        _origin = result.geometry.location;
        route();
    });

    $("#ac-destination").abgeo({
        showCurrentLoc: true
    }).bind("abgeo:place_changed", function (event, result) {
        _destination = result.geometry.location;
        route();
    });


    new ABOSM("osm-map", {
        center: [52.248624, 4.669728],
        zoom: 10
    }).ready(function (inst) {
        _mapInst = inst;
    });
                
            
            

                
{
  "code": "Ok",
  "routes": [
    {
      "geometry": "{x{}Hy`o[jg@t|@vDlY`HfMpN}[yHeLeN_B{U{ZyiIkxMosB{kAy^al@_Mcp@{TetCiOeg@eh@kdAyGi\\m@svB`FwbAwCgzATcI|Bv@U`N{IDq@wZxFrkBmDh[Kt}A",
      "legs": [
        {
          "steps": [
          ],
          "distance": 24466,
          "duration": 1118.7,
          "summary": "",
          "weight": 1118.7
        }
      ],
      "distance": 24466,
      "duration": 1118.7,
      "weight_name": "routability",
      "weight": 1118.7
    }
  ],
  "waypoints": [
    {
      "hint": "2OcLgP___3_gAAAA4AAAAPAAAAAAAAAAHvMhRAAAAADXdS1EAAAAAOAAAADgAAAA8AAAAAAAAACsFQEAIEFHADBAHQMgQUcAMEAdAwEA3w0TqnAk",
      "distance": 0,
      "name": "",
      "location": [
        4.669728,
        52.248624
      ]
    },
    {
      "hint": "W3yXlv___38_AAAAPwAAAPgBAAAAAAAAcfwLQwAAAADZrIxEAAAAAD8AAAA_AAAA-AEAAAAAAACsFQEAAKBJALegHgMAoEkAt6AeAwwA7xATqnAk",
      "distance": 0,
      "name": "Nieuwe Haagseweg",
      "location": [
        4.825088,
        52.338871
      ]
    }
  ]
}
                
                    

Endpoint Parameters