Page 1 of 1

xServer 2 Leaflet Customized Popup Content

Posted: Fri Nov 08, 2019 9:53 am
by YellowFoxNP
Hi,

how can I customize the popup content if I click on a TrafficIncident or TruckAttribute.
I found in the leaflet-xserver.js the buildDescription function and I wanted to overwrite it.

I tried:

Code: Select all

var map = new L.Map('map', { center: [49.595,  6.115], zoom: 11 });

L.TileLayer.XServer.buildDescription = function (a) { return 'my own content'; }

// Add PTV tile layer to map
new L.tileLayer.xserver(urlPath + '?layers=labels,PTV_SpeedPatterns,PTV_TrafficIncidents'
        + '&timeConsideration=SNAPSHOT&referenceTime=' + encodeURIComponent(referenceTime) + '&showOnlyRelevantByTime=false'
        + '&userLanguage=' + userLanguage
        + '&contentType=JSON', {
    pane: "overlayPane",
    maxZoom: 20
}).addTo(map);

But that's not working.

Re: xServer 2 Leaflet Customized Popup Content

Posted: Fri Nov 08, 2019 2:29 pm
by Oliver Heilig
Hi,

you must override the prototype. Below the default implementation, which is just a generic formatter for the JSON. You can use this code from xServer-1 as template if you want some advanced formatting. It does also the conversion to english units: https://github.com/ptv-logistics/Leafle ... #L122-L166

Oli

Code: Select all

L.TileLayer.XServer.prototype.buildDescriptionText = function (found) {
    var description = '';
    var isFirstLayer = true;

    for (var layer in found) {
        if (isFirstLayer) {
            isFirstLayer = false;
        } else {
            description = description + '<br>';
        }

        for (var i = 0; i < found[layer].attributes.length; i++) {
            var attribute = found[layer].attributes[i];
            description = description.concat(
                attribute.key.replace(/[A-Z]/g, ' $&') + ': ' +
                attribute.value.replace('_', ' ') + '<br>');
        }
    }

    return description.toLowerCase();
};

Re: xServer 2 Leaflet Customized Popup Content

Posted: Fri Nov 08, 2019 7:17 pm
by YellowFoxNP
Perfect. That's exactly what I had in mind. Thank you very much.

Re: xServer 2 Leaflet Customized Popup Content

Posted: Wed Nov 27, 2019 1:06 pm
by YellowFoxNP
What do I have to do to extend the leaflet-xserver.js so, that also the Nontiledlayer implementation can be requested with contentType=JSON to get the click feature

Re: xServer 2 Leaflet Customized Popup Content

Posted: Mon Dec 02, 2019 8:22 am
by Bernd Welter
Hello Nico,

has been forwarded to DEV (XSERS-1608)...

Best regards,
Bernd

Re: xServer 2 Leaflet Customized Popup Content

Posted: Mon Dec 02, 2019 9:31 am
by Bernd Welter
Hello Nico,

here's Oli's response - enjoy it!

Bernd
The xServer-2 client implementation always uses the tile api. However there are use-cases (e.g. fractional zoom levels) where a non-tiled approach would be better, we also use this in our .NET client [https://github.com/ptv-logistics/xserve ... actoryTest]

For this use case the solution would be to implement an L.LontiledLayer that uses the /renderMap api (like for .NET [https://github.com/ptv-logistics/xserve ... rovider.cs] ). Currently there's no implementation in Leaflet.xserver for this use case, so you will have to implement it by your own.