Interacting with Feature Layer Attributes

The integration of a map into an application often requires more interaction possibilities than zooming and panning. Therefore the PTV xMap services provide additional textual information about the drawn Feature Layer items, for example additional attributes of road segments, which may influence the result of routeA route corresponds to a path of a vehicle through the underlying transport network. The main attributes of a route are the distance and the time that the vehicle travels along the path. calculation.

Benefits

The more information a map has to visualize, the more difficult it becomes to find a reasonable way to display it. User interaction provides several approaches to solve this problem:

  • Show additional information with tooltips
  • Show details of aggregated information
  • Select or highlight specific map objects

Prerequisites

Check if the following prerequisites are fulfilled before you start with the integration sample:

  • Installed and licensed PTV xMap services
  • Installed PTV Map
  • PTV Feature Layer data

Concepts

Feature Layer

Feature Layers provide additional content to enrich PTV maps, such as vehicleIn this context the term vehicle is used to describe what is being routed for. Commonly this will be a motorized vehicle like a truck including its trailer or a car. However also a bike or a pedestrian are included in this definition.-dependent restrictions on roads, or even live traffic information. It may help to improve routingClosed A route corresponds to a path of a vehicle through the underlying transport network. The main attributes of a route are the distance and the time that the vehicle travels along the path. results, for example.

Various Feature Layer themes providing different kinds of content are available. Several Feature Layer themes may be used in combination.

Programming Guide

In xMap2 API the rendering of geographical objects can be combined with the additional content of Feature Layers. Via RESTREST (Representational state transfer) represents a World Wide Web paradigm, consisting of constraints to the design of components which results in a better performance and maintainability. operation tile, the returned object can be extended to contain both the image and additional info. The corresponding RESTClosed REST (Representational State Transfer) represents a World Wide Web paradigm, consisting of constraints to the design of components which results in a better performance and maintainability. request looks like this:

http://hostname:50000/services/rest/XMap/tile/{z}/{x}/{y}?storedProfile=silkysand&layers=labels,transport,background,PTV_TruckAttributes&contentType=JSONClosed JSON (JavaScript Object Notation) is an open standard format for which human-readable text is used to transmit information consisting of attribute–value pairs. It is the first-address data format used for asynchronous browser/server communication (AJAX).

Refer to the API Documentation to learn more about the supported URL schema. This is the information you must supply to your framework to have it display tiles from PTV xMap.

Retrieving Feature Layer attributes

In Leaflet, the predefined TileLayer class is commonly used for generating tile images, which are placed (and cached) according to an internal mechanism. Unfortunately, only images are returned to the client by this tiled rendering approach, no specifications exist how to include additional data. To retrieve Feature Layer object information additionally, the L.TileLayer class is extended by a PTV-specific implementation called L.tileLayer.xserver. This extension is part of the leaflet-xserver.js library which is used throughout the code samples.

As its major feature, the TileLayer.xserver extends internally the response by an additional collection of textual information. Besides the original tile bitmap, for all rendered Feature Layer attributes inside this tile, their textual description is also requested from xMap service. These texts are shown in in a popup when a feature is clicked with the left mouse button. All these GUI relevant parts are also handled by this layer.

In the following sample, PTV TruckAttributes and its textual descriptions are shown. Furthermore, this layer is parameterized for time consideration of time-restricted attributes:

// Time use for evaluating time-restricted Feature Layer attributes var referenceTime = '2017-01-09T12:00:00+01:00'; // URL path shared by all used xServer layers var urlPath = xServerUrl + '/services/rest/XMap/experimental/tile/{z}/{x}/{y}'; var backgroundUrl = urlPath + '?layers=background'; var transportLabelsUrl = urlPath + '?layers=transport,labels'; var truckAttributesUrl = urlPath + '?layers=PTV_TruckAttributes&timeConsideration=SNAPSHOT&referenceTime=' + encodeURIComponent(referenceTime) + '&showOnlyRelevantByTime=false&contentType=JSON' // Configuration of a map with its layer var map = new L.Map('map', { center: [49.61, 6.125], zoom: 13 }); // Add layers to map L.control.layers( { 'Background': L.tileLayer( backgroundUrl, { pane: "tilePane", maxZoom: 20 }).addTo(map) }, { 'Transport and labels': L.tileLayer( transportLabelsUrl, { pane: "tilePane", maxZoom: 20 }).addTo(map), 'Truck attributes': L.tileLayer.xserver( truckAttributesUrl, { pane: "overlayPane", maxZoom: 20 }).addTo(map) }, {collapsed: false, position: "topright" }).addTo(map);

Displaying Feature Layer icons on client-side

When Feature Layers are drawn on the map the road segments concerned by the Feature Layers are filled and icons are drawn. By default, the icons are rendered on the server side which implies they are drawn into the tile image. With server-side icon rendering the client can only interact by retrieving the attributes and displaying them in a tooltip. The switch drawIcons disables the server-side rendering and the switch iconReference provides icon references for each included Feature Layer icon. With the icon reference it is possible to retrieve the corresponding icon image via xRuntime.

Client-side rendering of icons provides some possibilities:

  • Displaying icons with the tooltips.
  • Customizing icons by highlighting, graying out or resizing PTV icons, or by using user-defined ones.
  • Clustering icons by using plugins like Leaflet MarkerCluster
var map = new L.Map('map', { center: [49.61, 6.125], zoom: 13 }); var webappsBaseUrl = xServerUrl; // URL path shared by all used xServer layers var tileUrl = webappsBaseUrl + '/services/rest/XMap/experimental/tile/{z}/{x}/{y}'; var icons = L.layerGroup(); //xmap REST API request var tileLayer = L.tileLayer.xserver(tileUrl + '?storedProfile={storedProfile}&layers={layers}' + '&timeConsideration={timeConsideration}' + '&referenceTime={referenceTime}' + '&showOnlyRelevantByTime={showOnlyRelevantByTime}' + '&drawIcons={drawIcons}' + '&iconReference={iconReference}' + '&contentType=JSON', { //Type JSON means to obtain a structured response in JSON format storedProfile: "silkysand", layers: "background,transport,labels,PTV_TruckAttributes", timeConsideration: "SNAPSHOT", referenceTime: "2020-01-01T12:00:00%2B01:00", showOnlyRelevantByTime: "false", drawIcons: false, //No icons are drawn on server side. iconReference: true, //The features contain icon references. maxZoom: 20, }); //Deactivate getting automatic generated tooltips by the parent class. tileLayer.options.disableMouseEvents = true; //Displaying TileLayer in the map tileLayer.addTo(map); //Use load event to add all icons to the map tileLayer.on('load', function(e) { map.removeLayer(icons); icons = L.layerGroup(); for (let n = 0; n < Object.values(tileLayer._tiles).length; n++) { var tile = Object.values(tileLayer._tiles)[n]; for (let i = 0 ; i < tile.el._layers.length; i++) { let feature = tile.el._layers[i]; let iconReference = feature.iconReference; //Get the image icons with the icon reference from xruntime let iconAsPng = webappsBaseUrl + '/services/rest/XRuntime/experimental/icon/' + iconReference; let icon = L.icon({ iconUrl: iconAsPng, iconAnchor: [10, 14] }); let coord = feature.referenceCoordinate; //Add icons to the layer icons.addLayer(L.marker([coord.y , coord.x ], {icon: icon})); } } //Add icon layer to the map. icons.addTo(map); });

Related Topics

The following topics might be relevant for this use case: