vector-tile support #289
Comments
|
Leaflet doesn't support vector tiles natively and I fear there is no ideal plugin either, as we have learned in #153 (comments). Maybe the mapbox-gl-leaflet binding would be the best option, but synchronizing two libraries probably also has its flaws and it's a bit like carrying a lorry with a van. Don't know what your setup is, an easy way for integration would be serving the vector tiles as raster with Tileserver GL, but that would mean loosing many advantages of vector tiles. |
|
Am 11.05.2020 um 10:40 schrieb Dirk--:
@womisa <https://github.com/womisa> : please share the brouter-web part
?????
Ich nehme den Telemaxx Server mit den OpenAndromap Karten. Ich starte
die Jar Datei mit den entsprechenden Parameter MAP/ Stylesheet.
Beispiel BRouter-WEB config.js
`
(function() {
var hostname = window.location.hostname;
var params = new URLSearchParams(window.location.search.slice(1));
BR.conf = {};
// Switch for intermodal routing demo
BR.conf.transit = false;
// or as query parameter (index.html?transit=true#zoom=...)
// (uses search/query (?) not hash (#) params, as config only
executed once at load)
// TODO not included in permalink (better replace permalink with
hash plugin)
//BR.conf.transit = params.has('transit') && (params.get('transit')
=== 'true');
if (hostname === 'brouter.de' || hostname ===
'h2096617.stratoserver.net') {
// online service (brouter.de) configuration
BR.conf.profiles = [
'trekking',
'fastbike',
'car-eco',
'car-fast',
'safety',
'shortest',
'trekking-ignore-cr',
'trekking-steep',
'trekking-noferries',
'trekking-nosteps',
'moped',
'rail',
'river',
'vm-forum-liegerad-schnell',
'vm-forum-velomobil-schnell',
'fastbike-lowtraffic',
'fastbike-asia-pacific'
];
BR.conf.host = 'http://h2096617.stratoserver.net:443';
BR.conf.profilesUrl = 'http://brouter.de/brouter/profiles2/';
} else {
// desktop configuration
BR.conf.profiles = [
'trekking',
'fastbike',
'car-eco',
'car-fast',
'car-vario',
'car-test',
'shortest',
'moped',
'vm-forum-liegerad-schnell',
'vm-forum-velomobil-schnell',
'fastbike-lowtraffic',
'fastbike-asia-pacific',
'hiking-beta',
'hugo'
];
BR.conf.host = 'http://127.0.0.1:17777';
// Pre-loading selected profile disabled locally. Needs
brouter-web to run on a
// local web server with the profiles in a subdirectory or
allowing file access
// in the Browser (security!), see
//
https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally
// BR.conf.profilesUrl = 'http://localhost:17777/./customprofiles/';
// BR.conf.profilesUrl = 'file://./customprofiles/';
}
// Removes default base layers when 'true'. Useful for only having
custom layers (see below).
BR.conf.clearBaseLayers = true;
// Add custom tile layers
// URL template see http://leafletjs.com/reference.html#tilelayer
// Multiple entries separated by comma (,)
BR.conf.baseLayers = {
'WmsMapsforge': 'http://127.0.0.1:8080/{z}/{x}/{y}.png'
// 'display name': 'url'[,]
// e.g. for offline tiles with
https://github.com/develar/mapsforge-tile-server
//'Mapsforge Tile Server': 'http://localhost:6090/{z}/{x}/{y}.png'
};
// Base layer to show on start, as position number in the layer
switcher, starting from 0, default is first
BR.conf.defaultBaseLayerIndex = 0;
// Initial route line transparency (0-1, overridden by stored
slider setting)
BR.conf.defaultOpacity = 0.67;
// Minimum transparency slider value on load, values between 0 and
1 (0=invisible).
// 0 = no minimum, use stored setting; 1 = always reset to full
visibility on load
BR.conf.minOpacity = 0.3;
BR.conf.routingStyles = {
trailer: {
weight: 5,
dashArray: [10, 10],
opacity: 0.6,
color: 'magenta'
},
track: {
weight: 5,
color: 'magenta',
opacity: BR.conf.defaultOpacity
},
trackCasing: {
weight: 8,
color: 'white',
// assumed to be same as track, see setOpacity
opacity: BR.conf.defaultOpacity
},
nodata: {
color: 'darkred'
}
};
// transit (intermodal routing) demo config
if (BR.conf.transit) {
BR.conf.profiles = [
'../im/bike',
'../im/foot',
'../im/like-bike',
'../im/like-foot',
'trekking',
'fastbike',
'shortest',
'moped',
'car-test'
];
}
})();
`
… —
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#289 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AGJVTUXJESW6MSM5MQGNND3RQ62XXANCNFSM4M4WKHQA>.
|
|
just a quick Leaflet.VectorGrid test: |
|
today a first shot at Leaflet.VectorTileLayyer:
|
|
and finally updated my ol vector map |
|
Thanks for the updates. Are you going to test mapbox-gl-leaflet with Mapbox GL JS as well? Right now, your layer looks simple enough for the plugins you already tested (beside the missing features) and Mapbox GL JS would probably be overkill, just like for the Mapillary coverage layer. But as soon as you want anything more advanced, like text label rendering, Mapbox GL JS would probably be the best option? What is your stack to generate the vector tiles? When you say cheap, this means probably generating and uploading all tiles as static files in advance, without generation on request and automatic updates? And by the way, why are you querying the Overpass API on point click, when vector tiles would allow including the data and interacting with it on the map? |
overpass query on click:
|
|
and here comes test number 3: https://maps.grade.de/Leaflet.mapboxGL.html
|
|
Hm, zooming is a lot slower than with Leaflet or Mapbox GL JS alone. |
|
thanks to Norbert's hints, I managed to inject a vector-tile-layer: |
|
after fiddling with maplibreGL/mapboxGL the last days, I would vote for this.
Vector-Layers are great for those, creating own maps with little effort! |
|
Sorry for uglifying the code, I am just no programmer ... I would like to show two variants:
Relevant changes located at index-[].html (end of file) and /dist/brouter-web-[].js (search for 'grade.de') Any pro up to beautifying the vector-layer idea? |
|
We now have MapLibre GL JS integrated (13efb48), see:
|
How about implementing vector-tile support?
Setup of a vector-tile provider is quite cheap (compared to generating raster tiles) on network data:
e.g. https://maps.grade.de/cemt.html
Having a chance integrating this to bouter-web would make this great framwork even greater!
The text was updated successfully, but these errors were encountered: