xServer 2 Leaflet Customized Popup Content

This forum deals with any kind of web based client technology, whether it is the well known java script based Ajax servlet or the upcoming approaches such as Leaflet, OpenLayers and so on.
Post Reply
User avatar
YellowFoxNP
Posts: 11
Joined: Wed Dec 05, 2018 6:36 am

xServer 2 Leaflet Customized Popup Content

Post 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.
User avatar
Oliver Heilig
Posts: 160
Joined: Tue May 13, 2014 12:10 pm
Location: Karlsruhe, Germany
Contact:

Re: xServer 2 Leaflet Customized Popup Content

Post 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();
};
Oliver Heilig
Chief Developer Logistic Services
PTV GROUP - Germany

https://github.com/oliverheilig/
User avatar
YellowFoxNP
Posts: 11
Joined: Wed Dec 05, 2018 6:36 am

Re: xServer 2 Leaflet Customized Popup Content

Post by YellowFoxNP »

Perfect. That's exactly what I had in mind. Thank you very much.
User avatar
YellowFoxNP
Posts: 11
Joined: Wed Dec 05, 2018 6:36 am

Re: xServer 2 Leaflet Customized Popup Content

Post 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
User avatar
Bernd Welter
Site Admin
Posts: 2703
Joined: Mon Apr 14, 2014 10:28 am
Contact:

Re: xServer 2 Leaflet Customized Popup Content

Post by Bernd Welter »

Hello Nico,

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

Best regards,
Bernd
Bernd Welter
Technical Partner Manager Developer Components
PTV Logistics - Germany

Bernd at... The Forum,LinkedIn, Youtube, StackOverflow
I like the smell of PTV Developer in the morning... :twisted:
User avatar
Bernd Welter
Site Admin
Posts: 2703
Joined: Mon Apr 14, 2014 10:28 am
Contact:

Re: xServer 2 Leaflet Customized Popup Content

Post 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.
Bernd Welter
Technical Partner Manager Developer Components
PTV Logistics - Germany

Bernd at... The Forum,LinkedIn, Youtube, StackOverflow
I like the smell of PTV Developer in the morning... :twisted:
Post Reply