API by CombiTrip

CombiTrip offers completely free of charge a map that you can use in your own project. See below a large variety of exmples. Simply copy paste the code below each example

Required Files

You need include the files below to work properly.

Stylesheets

            
    <link rel="stylesheet" href="../css/leaflet.css" />
    <link rel="stylesheet" href="../css/leaflet-routing-machine.css" />
    <link rel="stylesheet" href="../css/ab.osm.css" />
            
            

Scripts

            
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <!-- Or load your jQuery version instead -->
    <script src="../js/leaflet-src.js"></script>
    <script src="../js/leaflet-routing-machine.js"></script>
    <script src="../js/polyline.encoded.js"></script>
    <script src="../js/ab.osm.js"></script>
            
            

Polyline

Example

Simple example of drawing polygon on map.

                    
    var MAP1 = new ABOSM("osm-map", {
        center: [40.641113, -8.654473],
        zoom: 10
    });

    var point_a = ABOSMUtils.latLng(40.641113, -8.654473),
        point_b = ABOSMUtils.latLng(40.640009, -8.74958);

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

                    
                
Map Options | Polyline Options

Encoded

This example show how to draw encoded polyline on map.

                    
        var MAP1 = new ABOSM("osm-map", {
            center: [40.641113, -8.654473],
            zoom: 10
        });

        var point_a = ABOSMUtils.latLng(40.641113, -8.654473),
            point_b = ABOSMUtils.latLng(40.640009, -8.74958),
            arr = [point_a, point_b];
            encoded = ABOSMUtils.encodePath(arr);

        MAP1.polylineEncoded(encoded);
        MAP1.fitBounds(line);
                    
                
Map Options

Route

Example

This example show how to draw the route on map by using the default route service.

                    
        var point_a = ABOSMUtils.latLng(40.744190, -73.993200),
            point_b = ABOSMUtils.latLng(40.733440, -74.006070);

        var MAP1 = new ABOSM("osm-map", {
            center: point_a,
            zoom: 10
        });

        MAP1.route( [point_a, point_b], {
            showItinerary: false,
            lineOptions: {
                styles: [
                    {color: '#85a9dd', weight: 4 }
                ]
            }
        });
                    
                
Map Options | Route Api

Markers

Example

Create the single marker on map.

                    
        var MAP1 = new ABOSM("osm-map", {
            center: [40.641113, -8.654473],
            zoom: 10
        });

        var latLng = ABOSMUtils.latLng(40.641113, -8.654473);

        var marker = MAP1.marker(latLng);
        MAP1.fitBounds(marker);
                    
                
Map Options | Marker Options

Marker with Popup

Create the single marker on map.

                    
        var MAP1 = new ABOSM("osm-map", {
            center: [40.641113, -8.654473],
            zoom: 10
        });

        var latLng = ABOSMUtils.latLng(40.641113, -8.654473);

        var marker = MAP1.marker(latLng);
        marker.attachPopup("Popup Content");
        MAP1.fitBounds(marker);
                    
                
Map Options | Marker Options

Custom Marker

                    
        var MAP1 = new ABOSM("osm-map", {
            center: [40.641113, -8.654473],
            zoom: 10
        });

        var latLng = ABOSMUtils.latLng(40.641113, -8.654473);

        marker = MAP1.iconMarker(latLng, '../images/fromA.png',  { iconSize: [35, 45], iconAnchor: [17, 45] });
        MAP1.fitBounds(marker);
                    
                
Map Options | Marker Options

Others

Dynamic Add / Remove

                    
        var point_a = ABOSMUtils.latLng(40.641113, -8.654473),
            point_b = ABOSMUtils.latLng(40.640009, -8.74958);

        var MAPTEST = new ABOSM("osm-map", {
            center: point_a,
            zoom: 14
        });

        var UNIQUE_MARKER = 'mymarker',
            UNIQUE_CIRCLE = 'mycircle',
            UNIQUE_POLYLINE = 'mypolyline',
            UNIQUE_POLYLINE_ENCODED = 'mypolylineEncoded';

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