1 | [![NPM version](https://img.shields.io/npm/v/leaflet-xserver.svg)](https://www.npmjs.com/package/leaflet-xserver)
|
2 | ![XServer 2.x!](https://img.shields.io/badge/XServer-2.x-blue.svg?style=flat)
|
3 | ![Leaflet compatible!](https://img.shields.io/badge/Leaflet-1.x-blue.svg?style=flat)
|
4 |
|
5 | ## Purpose
|
6 |
|
7 | leaflet-xserver provides classes to add xMapServer specific features to Leaflet.
|
8 |
|
9 | ## Components
|
10 |
|
11 | * [Auto Attribution](#autoattribution)
|
12 | * [L.TileLayer.XServer](#tilelayerxserver)
|
13 |
|
14 | ## How to build
|
15 |
|
16 | ```npm install```
|
17 |
|
18 | or use the latest build at https://unpkg.com/leaflet-xserver/dist/
|
19 |
|
20 | <a name="autoattribution"></a>
|
21 | ### Auto Attribution
|
22 |
|
23 | If included to the script, `leaflet-xserver.js` automatically sets the correct attribution text for every
|
24 | layer that uses the xMapServer-2 `rest` or `rs` api.
|
25 |
|
26 | <a name="tilelayerxserver"></a>
|
27 | ### L.TileLayer.XServer
|
28 |
|
29 | The Layer class `L.TileLayer.XServer` can be used to make xServer elements clickable or request tiles with specific parameters.
|
30 |
|
31 | #### Additional options
|
32 |
|
33 | * *disableMouseEvents* - disables all mouse click and hover events. Default: ```false```
|
34 |
|
35 | #### As single map
|
36 | [Demo](https://ptv-logistics.github.io/xserverjs/boilerplate/Leaflet-Clickable.1.0.html)
|
37 |
|
38 | The easiest way to add a clickable layer is to use class `L.TileLayer.XServer`, append a clickable xServer-Layer (e.g. `PTV_TruckAttributes`) to the profile and set the `&contentType=JSON` parameter. The icons of the layer can now be clicked to display the object information. The options are the same as for `L.TileLayer`
|
39 |
|
40 | ```javascript
|
41 | var map = L.map('map').setView(new L.LatLng(49.01405, 8.4044), 14);
|
42 |
|
43 | var interactiveTileLayer = L.tileLayer.xserver(
|
44 | 'https://s0{s}-xserver2-europe-test.cloud.ptvgroup.com/services/rest/XMap/tile/{z}/{x}/{y}' +
|
45 | '?storedProfile={profile}&layers=background,transport,labels,PTV_TruckAttributes&contentType=JSON&xtok={token}',
|
46 | {
|
47 | profile: 'silkysand',
|
48 | token: window.token,
|
49 | subdomains: '1234',
|
50 | maxZoom: 22,
|
51 | pane: 'tilePane'
|
52 | }).addTo(map);
|
53 | ```
|
54 |
|
55 | #### As layered map
|
56 | [Demo](https://ptv-logistics.github.io/xserverjs/boilerplate/Leaflet-Clickable-Layered.1.0.html)
|
57 |
|
58 | It's also possible to split the xMapServer map into separate Leaflet layers. This sample creates a standard xMapServer basemap-layer and a clickable truck attributes overlay. A client-side layer `L.Circle`can then be added between the two xMapServer layers by assigning them to different panes (`tilePane`, `overlayPane` and `shadowPane`).
|
59 |
|
60 | ```javascript
|
61 | var coordinate = L.latLng(49.01405, 8.4044); // KA
|
62 | var radius = 250; // m
|
63 |
|
64 | var map = L.map('map').setView(coordinate, 14);
|
65 |
|
66 | var basemapLayer = L.tileLayer(
|
67 | 'https://s0{s}-xserver2-europe-test.cloud.ptvgroup.com/services/rest/XMap/tile/{z}/{x}/{y}' +
|
68 | '?storedProfile={profile}&layers={layers}&xtok={token}', {
|
69 | profile: 'silkysand',
|
70 | layers: 'background,transport',
|
71 | token: window.token,
|
72 | subdomains: '1234',
|
73 | maxZoom: 22,
|
74 | pane: 'tilePane'
|
75 | }).addTo(map);
|
76 |
|
77 | var circle = L.circle(coordinate, radius / Math.cos(coordinate.lng / 2 / Math.PI), {
|
78 | color: 'red',
|
79 | fillColor: 'orange',
|
80 | fillOpacity: 0.5,
|
81 | pane: 'overlayPane',
|
82 | attribution: 'My Circle'
|
83 | }).addTo(map).bindPopup("I am a circle.");
|
84 |
|
85 | var truckAttributesLayer = L.tileLayer.xserver(
|
86 | 'https://s0{s}-xserver2-europe-test.cloud.ptvgroup.com/services/rest/XMap/tile/{z}/{x}/{y}' +
|
87 | '?storedProfile={profile}&layers={layers}&contentType=JSON&xtok={token}', {
|
88 | profile: 'silkysand',
|
89 | layers: 'labels,PTV_TruckAttributes',
|
90 | token: window.token,
|
91 | subdomains: '1234',
|
92 | maxZoom: 22,
|
93 | pane: 'clickableTiles'
|
94 | }).addTo(map);
|
95 | ```
|
96 |
|
97 | #### Using the JSON API
|
98 | [Demo](https://ptv-logistics.github.io/xserverjs/boilerplate/Leaflet-Clickable.1.0-rs.html)
|
99 |
|
100 | If you need more than the standard `rest` parameters, `L.TileLayer.XServer` can be initialized with a `requestExtension` property. This property then contains parameters which are sent using the JSON api.
|
101 |
|
102 | ```javascript
|
103 | var map = L.map('map').setView(new L.LatLng(49.01405, 8.4044), 14);
|
104 |
|
105 | var interactiveTileLayer = L.tileLayer.xserver(
|
106 | 'https://s0{s}-xserver2-europe-test.cloud.ptvgroup.com/services/rs/XMap/renderMap',
|
107 | {
|
108 | requestExtension: {
|
109 | "storedProfile": "gravelpit",
|
110 | "requestProfile": {
|
111 | "featureLayerProfile": {
|
112 | "themes": [{
|
113 | "enabled": true,
|
114 | "id": "PTV_TruckAttributes"
|
115 | }]
|
116 | }
|
117 | },
|
118 | "resultFields": {
|
119 | "featureThemeIds": ["PTV_TruckAttributes"]
|
120 | }
|
121 | },
|
122 | username: 'xtok',
|
123 | password: window.token,
|
124 | subdomains: '1234',
|
125 | maxZoom: 22,
|
126 | pane: 'tilePane'
|
127 | }).addTo(map);
|
128 | ``` |
\ | No newline at end of file |