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 routing 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 REST 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=JSON 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
Related Topics
The following topics might be relevant for this use case: