Custom layers

To achieve clean and readable map style, not all features are present by default and must be enabled manually when required. This feature is called "custom layers". You can use it to display:

• Points of interest (POIs) relevant to logistics and transportation - such as petrol stations, toll gates, etc.
• Restrictions for trucks - such as maximum weight, length, height, width restrictions, restrictions for hazardous materials etc.
• Traffic information

Example

This example demonstrates the use of the map layers. Click on icons to see code on Github or play with it in JSFiddle:

POI layer:

Basic usage is to simply display POIs from all the categories on appropriate zoom levels, as icons with tooltips.

L.TileLayer.sygicPoi('yourAPIkey').addTo(map);

POI layer is supported only on 11+ zoom.

Restrictions layer

Basic usage is to simply display restrictions from all the categories on appropriate zoom levels, as icons with tooltips.

L.TileLayer.sygicRestriction('yourAPIkey').addTo(map);

Restriction layer is supported only on 14+ zoom.

Enable only certain categories:

If you do not want to include all the POI or restriction categories, you can specify the subset as string array:

L.TileLayer.sygicPoi(
    'yourAPIkey', {
        categories: [
           'PetrolStation', 'TruckStop'
        ]
    }).addTo(map);

L.TileLayer.sygicRestriction(
    'yourAPIkey', {
        categories: [
           'HazmatGeneral', 'MaxWeightTotal', 'MaxWeightPerAxle' 
        ]
    }).addTo(map);

Traffic layer

To display real-time or typical traffic visualization on appropriate zoom levels, just add traffic layer to the map:

L.TileLayer.sygicTraffic('yourAPIkey').addTo(map);

By default, the visual controller is shown on top-right corner of the map, which allows switching between real-time and typical traffic visualizations and in the case of typical traffic, it allows to select appropriate day of week and time of day of typical traffic visualization.
The default behaviour of the traffic layer and the traffic layer controller can be customized by options object, added as a second parameter to the L.TileLayer.sygicTraffic factory function:

L.TileLayer.sygicTraffic(
    'yourAPIkey', {
        traffic: {
            type: 'live',
            dayOfWeek: 1,
            timeOfDay: 8 * 60 * 60 * 1000
        },
        autoRefreshDelay: 120000,
        trafficControl: true,
        trafficControlOptions: {
            position: 'topright',
            titleText: 'Traffic:',
            liveTrafficText: 'live',
            typicalTrafficText: 'typical',
            dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
            firstDay: 1
        }
    }).addTo(map);

Options

The predefined traffic controller for custom use cases need not be used at all. For such use cases there is a setTraffic API function, which could be called from your custom JavaScript code:

//create the traffic layer without the controller
var trafficLayer = L.TileLayer.sygicTraffic('yourAPIkey', { trafficControl: false });
//add layer to the map - default (real-time) traffic will be shown
trafficLayer.addTo(map);

//wait 10 seconds and then show typical traffic on Sunday at 10:00AM
setTimeout(function () {
    trafficLayer.setTraffic('typical', 0, 10 * 60 * 60 * 1000);
}, 10000);

Incident layer

To display real-time incidents on appropriate zoom levels, just add incident layer to the map:

L.TileLayer.sygicIncident('yourAPIkey').addTo(map);

If you do not want to include all incident categories, you can specify the subset of categories as string array in the options object:

L.TileLayer.sygicIncident('yourAPIkey', { categories: [ 'Accident', 'Closure', 'RoadWorks' ] } ).addTo(map);

For now, all availabe categories include: Accident, Activity, AdditionalInfo, Closure, DangerousVehicle, ExceptionalLoad, LaneClosure, Obstacle, ParkingRestrictions, RoadConditions, RoadWorks, SizeAndWeightLimits, TrafficEquipment, TunnelBlocked, Visibility, Weather, Wind.

It is possible to set up refresh time for incidents as number in milliseconds. Example below shows refresh time setup for 120000 milliseconds (2 min).

L.TileLayer.sygicIncident('yourAPIkey', { autoRefreshDelay: 120000 } ).addTo(map);

For more advanced usage of Leaflet and its many plugins, refer to the Leaflet documentation page.
Custom layers work best with desktop versions of the following browsers browsers:

• Chrome
• Firefox
• Safari 5+
• Opera 12+
• IE 7–11