Displaying Custom Feature Layers
This integration sample shows how to display a user-generated road restriction.
Benefits
Define your own road restrictions and display them in a map.
Prerequisites
Check if the following prerequisites are fulfilled before you start with the use case.
-
Installed and licensed PTV xData and xMap service.
-
Installed map includes Luxembourg by HERE.
- A valid license for the keys
customFeatureLayerManagement
andcustomFeatureLayer
Concepts
A custom Feature Layer can be created and used to add or change road attributes in the map.
To create a custom Feature Layer road segments together with the desired attributes have to be provided to the createFeatureLayer operation.
To identify such road segments the getSegments operation can be used. This operation returns the id of a segment which is near a given coordinate in the map.
Programming Guide
When using the 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. API to build a tiled map, the REST operation tile is part of the following URL, by means individual tiles can be requested:
http://hostname:50000/services/rest/XMap/tile/{zoomLevel}/{x}/{y}?storedProfile={profile A profile is a collection of parameters used to configure the request. Full profiles consist of a number of specialized sub-profiles like the VehicleProfile which describes the properties of a vehicle.}
Concrete values in URL template have to be defined for zoomlevel, x and y coordinates, specifying the map section of the corresponding tile.
To display custom Feature Layers on a map with common content, the parameter layers
has to be specified in the URL enabling all base layers
and the custom Feature Layer via its theme and scenario ID.
http://hostname:50000/services/rest/XMap/tile/{zoomLevel}/{x}/{y}?storedProfile={profile}&layers=labels,transport,background,PTV_RoadAttributes.myScenario
To obtain a map which contains only a custom Feature Layer, the parameter layers
has to be specified in the URL enabling only
the custom Feature Layer via its theme and scenario ID.
http://hostname:50000/services/rest/XMap/tile/{zoomLevel}/{x}/{y}?storedProfile={profile}&layers=PTV_RoadAttributes.myScenario
Example
In the example below, a newly created custom Feature Layer with one road blocking is displayed on a tiled map using the Leaflet toolkit:
var PX = 6.1267428913116455; var PY = 49.58952524284309; var themeId = "PTV_RoadAttributes"; var scenarioId = "IntegrationSample_ShowCustomBlocking"; //----- Find segment near coordinate ----- function getSegmentToBlock(searchCoord) { var foundSegmentId; xdata.getSegments({ "$type": "SegmentsByCoordinateRequest", "resultFields": { "polyline": true, "descriptors": true }, "coordinate": searchCoord, "geometryOptions": { "responseGeometryTypes": ["GEOJSON"] } }, function(result, exception) { foundSegmentId = result.segments[0].id; }); return foundSegmentId; } //----- Create FeatureLayer ----- function createPersistentFeatureLayerWithBlockedSegment(segmentIdToBlock) { xdata.createFeatureLayer({ "themeId": themeId, "featureScenario": scenarioId, "features": [{ "segmentIds": [segmentIdToBlock], "descriptions": [{ "attributes": [{ "key": "opening", "value": 0 }] }] }], "resultFields": { "binaryFeatureLayer": false } }); }; var segmentId = getSegmentToBlock({"x": PX, "y": PY}); createPersistentFeatureLayerWithBlockedSegment(segmentId); var map = new L.Map('map', { center: [PY, PX], zoom: 17 }); // Add tile layer to map new L.tileLayer.xserver(xServerUrl + '/services/rest/XMap/experimental/tile/{z}/{x}/{y}' + '?layers=background,transport,labels' + ',' + themeId + '.' + scenarioId + '&contentType=JSON', { pane: "overlayPane", maxZoom: 20, }).addTo(map);It is also possible to create a custom blocking only for a specific direction. In the example below, a newly created custom Feature Layer with one road blocking is only displayed for the POLYLINE_DIRECTION direction of the segment. The country's legal driving direction is used to automatically detect which side to draw the restriction on.
var PX = 6.1267428913116455; var PY = 49.58952524284309; var themeId = "PTV_RoadAttributes"; var scenarioId = "IntegrationSample_ShowCustomBlockingOnlyForForwardDirection"; //----- Find segment near coordinate ----- function getSegmentToBlock(searchCoord) { var foundSegmentId; xdata.getSegments({ "$type": "SegmentsByCoordinateRequest", "resultFields": { "polyline": true, "descriptors": true }, "coordinate": searchCoord, "geometryOptions": { "responseGeometryTypes": ["GEOJSON"] } }, function(result, exception) { foundSegmentId = result.segments[0].id; }); return foundSegmentId; } //----- Create FeatureLayer ----- function createPersistentFeatureLayerWithBlockedSegment(segmentIdToBlock) { xdata.createFeatureLayer({ "themeId": themeId, "featureScenario": scenarioId, "features": [{ "segmentIds": [segmentIdToBlock], "direction": "POLYLINE_DIRECTION", "descriptions": [{ "attributes": [{ "key": "opening", "value": 0 }] }] }], "resultFields": { "binaryFeatureLayer": false } }); }; var segmentId = getSegmentToBlock({"x": PX, "y": PY}); createPersistentFeatureLayerWithBlockedSegment(segmentId); var map = new L.Map('map', { center: [PY, PX], zoom: 17 }); // Add tile layer to map new L.tileLayer.xserver(xServerUrl + '/services/rest/XMap/experimental/tile/{z}/{x}/{y}' + '?layers=background,transport,labels' + ',' + themeId + '.' + scenarioId + '&contentType=JSON', { pane: "overlayPane", maxZoom: 20, }).addTo(map);