Display TruckAttributes with Leaflet and OpenLayers
Posted: Fri Feb 06, 2015 3:45 pm
Hi there,
here's short tutorial of how to add TruckAttributes layer to Leaflet and OpenLayers
Method 1: TruckAttributes via WMS
Demo OpenLayers: http://jsfiddle.net/oliverheilig/ea2kwcmf/
Demo Leaflet: http://ptv-logistics.github.io/Leaflet.NonTiledLayer/
The technique behind this approach is to add a new WMS Layer for TruckAttributes, so the layer can be switched ON/OFF independently. To achieve this, we have to add a new rendering profile to the xMap conf-directory and extend the WMS.properties file by a xmap-truckattributes layer. Here are the required files:
You can query the truck attributes overlay with a WMS request then:
http://80.146.239.180/WMS/WMS?LAYERS=xm ... HEIGHT=643
xServer internet has these extensions already included, so you can also use this approach with xServer internet. Note: for "single-tile" WMS, Leaflet requires an addon we provide on GitHub: https://github.com/ptv-logistics/Leaflet.NonTiledLayer
Method 2: TruckAttributes via xMap/renderMap directly
The WMS response only contains an image, so you cannot implement some tooltip-interaction. We have a sample for adding TruckAttributes with tooltip information in Leaflet.
Demo Leaflet: http://ptv-logistics.github.io/Leaflet. ... ?layers=ta
Here the xServer is requested directly and the response contains the image plus object information. The object information is used to create clickable regions on the client. You can also apply this to your on-premise xServer installation, if you copy the attached rendering profiles.
Important: If you want to use the PTVLayer js-code with your xMapServer directly, you to have configure CORS at your .\webapps\xmap\WEB-INF\web.xml file and add the authorization and accept header:
You can use this approach also with xServer internet, as it supports CORS for all xServers.
here's short tutorial of how to add TruckAttributes layer to Leaflet and OpenLayers
Method 1: TruckAttributes via WMS
Demo OpenLayers: http://jsfiddle.net/oliverheilig/ea2kwcmf/
Demo Leaflet: http://ptv-logistics.github.io/Leaflet.NonTiledLayer/
The technique behind this approach is to add a new WMS Layer for TruckAttributes, so the layer can be switched ON/OFF independently. To achieve this, we have to add a new rendering profile to the xMap conf-directory and extend the WMS.properties file by a xmap-truckattributes layer. Here are the required files:
You can query the truck attributes overlay with a WMS request then:
http://80.146.239.180/WMS/WMS?LAYERS=xm ... HEIGHT=643
xServer internet has these extensions already included, so you can also use this approach with xServer internet. Note: for "single-tile" WMS, Leaflet requires an addon we provide on GitHub: https://github.com/ptv-logistics/Leaflet.NonTiledLayer
Method 2: TruckAttributes via xMap/renderMap directly
The WMS response only contains an image, so you cannot implement some tooltip-interaction. We have a sample for adding TruckAttributes with tooltip information in Leaflet.
Demo Leaflet: http://ptv-logistics.github.io/Leaflet. ... ?layers=ta
Here the xServer is requested directly and the response contains the image plus object information. The object information is used to create clickable regions on the client. You can also apply this to your on-premise xServer installation, if you copy the attached rendering profiles.
Important: If you want to use the PTVLayer js-code with your xMapServer directly, you to have configure CORS at your .\webapps\xmap\WEB-INF\web.xml file and add the authorization and accept header:
Code: Select all
<param-name>cors.supportedHeaders</param-name>
<param-value>Content-Type, origin, X-Requested-With, username, password, features, authorization, accept</param-value>