Leaflet.PtvLayer.js

/*
 * L.PtvLayer is used for putting xMap layers with tool tips on the map.
 */
L.PtvLayer = L.NonTiledLayer.extend({
    defaultXMapParams: {
        format: 'PNG',
        token: '',
        markerIsBalloon: false
    },

    _update: function () {
        var tmp = this.lastOpenPopupId;
        this._poiMarkers.clearLayers();
        this.lastOpenPopupId = tmp;

        L.NonTiledLayer.prototype._update.call(this);
    },

    initialize: function (url, options) { // (String, Object)
        this._url = url;
        var xMapParams = L.extend({}, this.defaultXMapParams);

        for (var i in options) {
            // all keys that are not PtvLayerTiledLayer options go to xMap params
            if (!L.NonTiledLayer.prototype.options.hasOwnProperty(i) &&
                !(L.Layer && L.Layer.prototype.options.hasOwnProperty(i))) {
                xMapParams[i] = options[i];
            }
        }

        this.xMapParams = xMapParams;

        // set max bounds xMapServer can handle
        if (!options.bounds)
            options.bounds = L.latLngBounds([-66.50, -180], [85.05, 180]);

        L.NonTiledLayer.prototype.initialize.call(this, options);
    },

    _addInteraction: function (resp) {
        // http://stackoverflow.com/questions/17028830/imageoverlay-and-rectangle-z-index-issue                                                                                        
        var svgObj = $('.leaflet-overlay-pane svg');
        svgObj.css('z-index', 9999);

        var that = this;

        for (var l = 0; l < resp.objects.length; l++) {
            var objects = resp.objects[l].objects;

            if(this._groupObjects)
                objects = this._groupObjects(objects);

            var myIcon = L.divIcon({
                className: 'poi-icon',
                backgroud: '#000',
                iconSize: [16, 16],
                iconAnchor: this.options.markerIsBalloon ? [8, 16] : [8, 8],
                popupAnchor: this.options.markerIsBalloon ? [0, -8] : [0, 0]
            });

            for (var i = 0; i < objects.length; i++) {
                var tooltip = this._formatTooltip(objects[i].descr);
                var id = this._getId ? this._getId(objects[i]) : null;

                if (objects[i].geometry) {
                    var lineString = [];
                    for (var j = 0; j < objects[i].geometry.pixelGeometry.points.length; j++) {
                        var p = objects[i].geometry.pixelGeometry.points[j];
                        var g = this._map.containerPointToLatLng([p.x, p.y]);
                        lineString[j] = [g.lat, g.lng];
                    }

                    // create a transparent polyline from an arrays of LatLng points and bind it to the popup
                    var polyline = L.polyline(lineString, {
                        color: 'white',
                        'weight': 20,
                        opacity: 0.0,
                        noClip: true
                    }).bindPopup(tooltip).addTo(this._poiMarkers);


                    if (this._getId) {
                        if ('p' + id === this.lastOpenPopupId)
                            polyline.openPopup();

                        polyline.tag = id;
                        polyline.on('popupopen', function (e) {
                            that.lastOpenPopupId = 'p' + e.target.tag;
                        });
                        polyline.on('popupclose', function (e) {
                            that.lastOpenPopupId = '';
                        });
                    }
                }

                var latlng = this.pixToLatLng(resp.world1, resp.world2, resp.width, resp.height, objects[i].pixel);

                var marker = L.marker(latlng, {
                    icon: myIcon,
                    zIndexOffset: i - 1000 // will correct overlapping objects
                }).bindPopup(tooltip).addTo(this._poiMarkers);

                if (this._getId) {
                    if ('m' + id === this.lastOpenPopupId)
                        marker.openPopup();

                    marker.tag = id;
                    marker.on('popupopen', function (e) {
                        that.lastOpenPopupId = 'm' + e.target.tag;
                    });
                    marker.on('popupclose', function (e) {
                        that.lastOpenPopupId = '';
                    });
                }
            }
        }
    },

    lastOpenPopupId: '',

    _getId: function (objectInfo) {
        return objectInfo.descr + objectInfo.ref.point.x + objectInfo.ref.point.y;
    },

    _formatTooltip: function (description) {
        var toolTip = '';
        var attributes = description.split('|');
        for (var i = 0; i < attributes.length; i++) {
            // add linebreak for multiline
            if (toolTip.length > 0)
                toolTip = toolTip + '<br>';

            // get attirbute name and value
            var keyval = attributes[i].split('=');

            // could filter attributes to display here
            // if(tootipAttributes.includes(keyval[0])

            var attributeName = keyval[0];
            var attributeValue = keyval[1];
            switch (attributeName) {
            case 'length': // TI traffic jam length
                attributeValue = this.options.imperial ?
                    new Intl.NumberFormat().format(keyval[1] / 1000 / 1.609344) + ' mi' :
                    new Intl.NumberFormat().format(keyval[1] / 1000) + ' km';
                break;
            case 'maxWeight': //TA weight
            case 'maxAxleLoad': //TA weight
                attributeValue = this.options.imperial ?
                    new Intl.NumberFormat().format(Math.round(keyval[1] / 45.3592) * 100) + ' lb' :
                    new Intl.NumberFormat().format(keyval[1]) + ' kg';
                break;
            case 'maxHeight': //TA length
            case 'maxWidth': //TA length
            case 'maxLength': //TA length
                attributeValue = this.options.imperial ?
                    attributeName === 'maxLength' ? 
                        Intl.NumberFormat().format(Math.round(keyval[1] / 0.3048)) + ' ft' :
                        Intl.NumberFormat().format(Math.round(keyval[1] / 2.54)) + ' in' :
                    Intl.NumberFormat().format(keyval[1] / 100) + ' m';
                break;
            }

            // build the tooltip line, could also localize field name here
            toolTip = toolTip + attributeName + ': ' + attributeValue;
        }

        return toolTip;
    },

    pixToLatLng: function (world1, world2, width, height, point) {
        var m1 = this.latLngToMercator(world1);
        var m2 = this.latLngToMercator(world2);
        var o = L.point(m2.x - m1.x, m2.y - m1.y);
        var rx = point.x / width;
        var ry = point.y / height;
        var mr = L.point(m1.x + rx * o.x, m1.y + ry * o.y);

        return this.mercatorToLatLng(mr);
    },

    mercatorToLatLng: function (p) {
        return L.latLng(
            360 / Math.PI * (Math.atan(Math.exp(p.y)) - Math.PI / 4),
            180.0 / Math.PI * p.x);
    },

    latLngToMercator: function (p) {
        return L.point(
            p.lng * Math.PI / 180.0,
            Math.log(Math.tan(Math.PI / 4.0 + p.lat * Math.PI / 360.0)));
    },

    onAdd: function (map) {
        this._poiMarkers = L.featureGroup().addTo(map);

        L.NonTiledLayer.prototype.onAdd.call(this, map);
    },

    onRemove: function (map) {
        map.removeLayer(this._poiMarkers);
        L.NonTiledLayer.prototype.onRemove.call(this, map);
    },

    getImageUrlAsync: function (bounds, width, height, key, callback) {
        var xMapParams = this.xMapParams;
        var world1 = bounds.getNorthWest();
        var world2 = bounds.getSouthEast();
        xMapParams.width = width;
        xMapParams.height = height;

        var request = this.getRequest(world1, world2, width, height);

        L.Util.runRequest(this._url + '/xmap/rs/XMap/renderMapBoundingBox', request, this.xMapParams.token,
            function (resp) {
                var prefixMap = {
                    'iVBOR': 'data:image/png;base64,',
                    'R0lGO': 'data:image/gif;base64,',
                    '/9j/4': 'data:image/jpeg;base64,',
                    'Qk02U': 'data:image/bmp;base64,'
                };
                resp.world1 = world1;
                resp.world2 = world2;
                resp.width = width;
                resp.height = height;
                var rawImage = resp.image.rawImage;
                callback(key, prefixMap[rawImage.substr(0, 5)] + rawImage, resp);
            },
            function (xhr) {
                callback(L.Util.emptyImageUrl);
            });
    },

    setParams: function (params, noRedraw) {
        L.extend(this.xMapParams, params);

        if (!noRedraw) {
            this.redraw();
        }

        return this;
    },

    getRequest: function (world1, world2, width, height) {
        var request = {
            'mapSection': {
                'leftTop': {
                    '$type': 'Point',
                    'point': {
                        '$type': 'PlainPoint',
                        'x': world1.lng,
                        'y': world1.lat
                    }
                },
                'rightBottom': {
                    '$type': 'Point',
                    'point': {
                        '$type': 'PlainPoint',
                        'x': world2.lng,
                        'y': world2.lat
                    }
                }
            },
            'mapParams': {
                'showScale': false,
                'useMiles': false
            },
            'layers': [],
            'imageInfo': {
                'format': 'PNG',
                'width': width,
                'height': height
            },
            'includeImageInResponse': true,
            'callerContext': {
                'properties': [{
                    'key': 'Profile',
                    'value': 'ajax-av'
                },
                {
                    'key': 'CoordFormat',
                    'value': 'OG_GEODECIMAL'
                }
                ]
            }
        };
        return request;
    }
});

L.PtvLayer.NonTiled = L.PtvLayer.extend({
    initialize: function (url, options) { // (String, Object)
        if (options.minZoom === undefined)
            options.minZoom = 0;
        if (options.maxZoom === undefined)
            options.maxZoom = 19;

        L.PtvLayer.prototype.initialize.call(this, url, options);
    },

    getRequest: function (world1, world2, width, height) {
        var request = L.PtvLayer.prototype.getRequest.call(this, world1, world2, width, height);
        if (typeof this.options.beforeSend === 'function') {
            this.options.beforeSend(request);
        }

        return request;
    }
});


L.PtvLayer.POI = L.PtvLayer.extend({
    initialize: function (url, options) { // (String, Object)
        if (options.minZoom === undefined)
            options.minZoom = 16;
        options.maxZoom = 19;

        L.PtvLayer.prototype.initialize.call(this, url, options);
    },

    getRequest: function (world1, world2, width, height) {
        var request = L.PtvLayer.prototype.getRequest.call(this, world1, world2, width, height);

        request.layers = [{
            '$type': 'SMOLayer',
            'name': 'default.points-of-interest' + (this.options.filter ? ';' + this.options.filter : ''),
            'visible': true,
            'objectInfos': 'REFERENCEPOINT'
        }];

        return request;
    },

    _formatTooltip: function (description) {
        var fields = description.split(':');

        return fields[1];
    }
});


L.PtvLayer.TrafficInformation = L.PtvLayer.extend({
    initialize: function (url, options) { // (String, Object)
        if (options.minZoom === undefined)
            options.minZoom = 10;
        options.maxZoom = 19;

        L.PtvLayer.prototype.initialize.call(this, url, options);
    },

    getRequest: function (world1, world2, width, height) {
        var request = L.PtvLayer.prototype.getRequest.call(this, world1, world2, width, height);
        request.layers = [{
            '$type': 'SMOLayer',
            'name': 'traffic.ptv-traffic',
            'visible': true,
            'objectInfos': 'FULLGEOMETRY'
        }];

        return request;
    },

    _formatTooltip: function (description) {
        var fields = description.split('#');

        return fields[1];
    }
});

// A TrafficInformation layer which uses the map&guide-internet configuration
L.PtvLayer.TrafficInformation.Mgi = L.PtvLayer.TrafficInformation.extend({
    initialize: function (url, options) { // (String, Object)
        if (options.minZoom === undefined)
            options.minZoom = 10;
        options.maxZoom = 19;

        L.PtvLayer.prototype.initialize.call(this, url, options);
    },

    getRequest: function (world1, world2, width, height) {
        var request = L.PtvLayer.prototype.getRequest.call(this, world1, world2, width, height);
        request.layers = [{
            '$type': 'SMOLayer',
            'name': 'traffic.ptv-traffic.mgi',
            'visible': true,
            'objectInfos': 'FULLGEOMETRY'
        }];

        return request;
    },

    _formatTooltip: function (description) {
        // fields for mgi-traffic
        // "TEXT", "TEXT_EN", "TEXT_FR", "TEXT_NL", "TEXT_IT", "CATEGORY", "VALIDUNTIL", "ROAD"

        var fields = description.split('#')[1].split('!!!xxx;;;');

        // 'EN' is the default language
        var language = this.options.language ? this.options.language.toUpperCase() : 'EN';

        // the supported languages
        var languages = ['DE', 'EN', 'FR', 'NL', 'IT'];

        return fields[languages.indexOf(language)];
    }
});


L.PtvLayer.TruckAttributes = L.PtvLayer.extend({
    initialize: function (url, options) { // (String, Object)
        if (options.minZoom === undefined)
            options.minZoom = 15;
        options.maxZoom = 19;

        L.PtvLayer.prototype.initialize.call(this, url, options);
    },

    getRequest: function (world1, world2, width, height) {
        var request = L.PtvLayer.prototype.getRequest.call(this, world1, world2, width, height);
        request.layers = [{
            '$type': 'RoadEditorLayer',
            'name': 'truckattributes',
            'visible': true,
            'objectInfos': 'FULLGEOMETRY'
        },
        {
            '$type': 'StaticPoiLayer',
            'name': 'street',
            'visible': 'true',
            'category': -1,
            'detailLevel': 0
        }
        ];
        request.callerContext.properties[0].value = 'truckattributes';

        return request;
    },

    _groupObjects: function (objects) {
        // group object infos by pixel coorinate
        var mappedObjects = objects.reduce(function(map, obj) {
            var id = obj.pixel.x+"_"+obj.pixel.y;
            if(map[id])
                map[id].descr = map[id].descr + "###" + obj.descr;
            else
                map[id] = obj;
            return map;
        }, {});

        let result = [];
        for (let key in mappedObjects) {
            result.push(mappedObjects[key])
        }

        return result;
    },

    _formatTooltip: function (description) {
        var fields = description.split('###');
        var response = '';
        for (var p = 0; p < fields.length; p++) {
            if (p === 0) {
                response = fields[p];
            } else {
                response += '</br>' + fields[p];
            }
        }

        return response;
    }
});

L.PtvLayer.DataManager = L.PtvLayer.extend({

    // Constructor of the data manager layer.
    // url: String -> 
    // layerId: String -> Id of the data manager layer to display.
    // options: Object -> Options for the layer display.
    initialize: function (url, layerId, options) { // (String, String, Object)
        if (options.minZoom === undefined)
            options.minZoom = 0;
        if (options.maxZoom === undefined)
            options.maxZoom = 19;
        // Saving the layer id for access in the other methods.
        this.layerId = layerId;
        // Initializing the layer.
        L.PtvLayer.prototype.initialize.call(this, url, options);
    },

    layerId: '',

    getRequest: function (world1, world2, width, height) {
        var request = L.PtvLayer.prototype.getRequest.call(this, world1, world2, width, height);
        request.layers = [{
            '$type': 'SMOLayer',
            'name': this.layerId + '.' + this.layerId,
            'visible': true,
            'objectInfos': 'FULLGEOMETRY'
        }];
        request.callerContext.properties.push({
            'key': 'ProfileXMLSnippet',
            'value': '/profiles/datamanager/xmap/' + this.layerId
        });

        return request;
    },

    _formatTooltip: function (description) {
        var fields = description.split('|');
        var response = '';
        for (var p = 0; p < fields.length; p++) {
            if (p === 0) {
                response = 'Id: ' + fields[p].split('#')[1];
            } else if (fields[p] !== '') {
                response += '</br>' + fields[p];
            }
        }
        return response;
    }
});

L.PtvLayer.Tiled = L.TileLayer.extend({
    options: {
        format: 'PNG',
        beforeSend: null,
        errorTileUrl: 'tile-error.png',
        noWrap: true,
        bounds: L.latLngBounds([-66.50, -180], [85.05, 180]),
        minZoom: 0,
        maxZoom: 19,
        token: ''
    },

    url: '',

    initialize: function (url, options) {
        this.url = url;
        L.Util.setOptions(this, options);
    },

    onAdd: function (map) {
        L.TileLayer.prototype.onAdd.call(this, map);

        this._map = map;

        this.redraw();
    },

    createTile: function (coords, done) {
        var tile = document.createElement('img');
        var tileSize = this.options.tileSize,
            tileBounds = this._tileCoordsToBounds(coords),
            wbbox = tileBounds;

        var mapSection = {
            leftTop: {
                '$type': 'Point',
                point: {
                    '$type': 'PlainPoint',
                    x: wbbox.getNorthWest().lng,
                    y: wbbox.getNorthWest().lat
                }
            },
            rightBottom: {
                '$type': 'Point',
                point: {
                    '$type': 'PlainPoint',
                    x: wbbox.getSouthEast().lng,
                    y: wbbox.getSouthEast().lat
                }
            }
        };

        var mapParams = {
            showScale: false,
            useMiles: false
        };

        var imageInfo = {
            format: this.options.format,
            width: tileSize,
            height: tileSize
        };

        var layers = [];
        var includeImageInResponse = true;

        var callerContext = {
            properties: [{
                key: 'Profile',
                value: 'ajax-bg'
            }, {
                key: 'CoordFormat',
                value: 'OG_GEODECIMAL'
            }]
        };

        if (typeof this.options.beforeSend === 'function') {
            var req = this.options.beforeSend({
                mapSection: mapSection,
                mapParams: mapParams,
                imageInfo: imageInfo,
                layers: layers,
                includeImageInResponse: includeImageInResponse,
                callerContext: callerContext
            });
            mapSection = req.mapSection;
            mapParams = req.mapParams;
            imageInfo = req.imageInfo;
            layers = req.layers;
            includeImageInResponse = req.includeImageInResponse;
            callerContext = req.callerContext;
        }

        var request = {
            'mapSection': mapSection,
            'mapParams': mapParams,
            'imageInfo': imageInfo,
            'layers': layers,
            'includeImageInResponse': includeImageInResponse,
            'callerContext': callerContext
        };

        tile._map = this._map;
        tile._layers = [];
        
        tile.request = L.Util.runRequest(
            this.url + '/xmap/rs/XMap/renderMapBoundingBox',
            request,
            this.options.token,
            function (response) {
                var prefixMap = {
                    'iVBOR': 'data:image/png;base64,',
                    'R0lGO': 'data:image/gif;base64,',
                    '/9j/4': 'data:image/jpeg;base64,',
                    'Qk02U': 'data:image/bmp;base64,'
                };
                var rawImage = response.image.rawImage;

                tile.src = prefixMap[rawImage.substr(0, 5)] + rawImage;
                tile.requst = null; // unset request to abort
                done(null, tile);
            },
            function (xhr) {
                tile.requst = null; // unset request to abort
                done(null, tile);
            }
        );

        return tile;
    },

    _removeTile: function (key) {
        var tile = this._tiles[key];
        if (tile && tile.el && tile.el.request)
            tile.el.request.abort();
			
        return L.TileLayer.prototype._removeTile.call(this, key);
    }
});

L.PtvLayer.tiled = function (url, options) {
    return new L.PtvLayer.Tiled(url, options);
};

L.PtvLayer.FeatureLayerFg = L.PtvLayer.NonTiled.extend({
    initialize: function (url, options) { // (String, Object)
        L.PtvLayer.NonTiled.prototype.initialize.call(this, url, options);

        this.options.beforeSend = L.bind(function (request) {
            request.callerContext.properties[0] = {
                key: 'Profile',
                value: options.profile
            };

            this._map.eachLayer(function (layer) {
                if (layer.type === 'FeatureLayer' && layer.visible)
                    request.layers.push({
                        '$type': 'FeatureLayer',
                        'name': layer.options.name,
                        'visible': true,
                        'objectInfos': 'REFERENCEPOINT'
                    });
            });


            if (typeof this.options.beforeSend2 === 'function') {
                this.options.beforeSend2(request);
            }

            return request;

        }, this);
    },
    type: 'FeatureLayerFg'
});

L.PtvLayer.FeatureLayerBg = L.PtvLayer.Tiled.extend({
    initialize: function (url, options) { // (String, Object)
        L.PtvLayer.Tiled.prototype.initialize.call(this, url, options);

        this.options.beforeSend = L.bind(function (request) {
            request.callerContext.properties[0] = {
                key: 'Profile',
                value: options.profile
            };

            this._map.eachLayer(function (layer) {
                if (layer.type === 'FeatureLayer' && layer.visible)
                    request.layers.push({
                        '$type': 'FeatureLayer',
                        'name': layer.options.name,
                        'visible': true
                    });
            });

            if (typeof this.options.beforeSend2 === 'function') {
                this.options.beforeSend2(request);
            }

            return request;
        }, this);
    },
    type: 'FeatureLayerBg'
});

L.PtvLayer.FeatureLayer = L.Layer.extend({
    options: {
        name: ''
    },

    visible: false,

    initialize: function (options) {
        L.setOptions(this, options);
    },

    addTo: function (map) {
        map.addLayer(this);
        return this;
    },

    onAdd: function (map) {
        this.visible = true;
        this.redraw(map);
    },

    onRemove: function (map) {
        this.visible = false;
        this.redraw(map);
    },

    redraw: function (map) {
        map.eachLayer(function (layer) {
            if (layer.type === 'FeatureLayerBg' || layer.type === 'FeatureLayerFg')
                layer.redraw();
        });

        return this;
    },
    type: 'FeatureLayer'
});

// runRequest executes a json request on PTV xServer internet, 
// given the url endpoint, the token and the callbacks to be called
// upon completion. The error callback is parameterless, the success
// callback is called with the object returned by the server. 
L.Util.runRequest = function (url, request, token, handleSuccess, handleError) {
    return $.ajax({
        url: url,
        type: 'POST',
        data: JSON.stringify(request),

        headers: function () {
            var h = {
                'Content-Type': 'application/json'
            };
            if (token) h['Authorization'] = 'Basic ' + btoa('xtok:' + token);
            return h;
        }(),

        success: function (data, status, xhr) {
            handleSuccess(data);
        },

        error: function (xhr, status, error) {
            handleError(xhr);
        }
    });
};