diff --git a/README.md b/README.md index ecf94e8..0ebb1b1 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ Render vector tiles on canvas with leaflet. -![example](eg.png) +![O little town of Grenoble](grenoble.png) [Try it out](https://devtristan.github.io/hoverboard/) diff --git a/eg.png b/eg.png deleted file mode 100644 index 2093143..0000000 Binary files a/eg.png and /dev/null differ diff --git a/example.js b/example.js index aec6ea2..809dea7 100644 --- a/example.js +++ b/example.js @@ -7,7 +7,7 @@ var map = L.map('map', { //L.tileLayer('http://{s}.tile.stamen.com/terrain-background/{z}/{x}/{y}.jpg').addTo(map); //var url = 'http://{s}.tile.openstreetmap.us/vectiles-highroad/{z}/{x}/{y}.topojson'; -var url = 'https://{s}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v5,mapbox.mapbox-terrain-v1/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ'; +var url = 'https://{s}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v5,mapbox.mapbox-terrain-v2/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ'; var colors = { land: '#FCFBE7', @@ -57,28 +57,37 @@ L.tileLayer.hoverboard(url, {hidpiPolyfill: true}) }) .render('hillshade') - .fillBy('class', { - medium_shadow: 'rgba(10, 50, 150, 0.2)', - full_shadow: 'rgba(10, 50, 150, 0.3)', - medium_highlight: 'rgba(255, 255, 150, 0.2)', - full_highlight: 'rgba(255, 255, 150, 0.3)' + .fillBy('level', { + // Hillshade is now defined by numeric shade level in v2 + 94: '#f2f3f3', + 90: '#cdcdd1', + 89: '#a8a8b1', + 78: '#868592', + 67: '#646373', + 56: '#444456' }) .render('contour') - .stroke(0.5, 'rgba(0, 0, 0, 0.2)') + .stroke(0.6, 'rgba(20,20,35,0.3') + // Try out hypsometric nonsense here: + /*.fillBy('ele', { + 10: '#000', + 20: '#111' + etc . . . + })*/ .render('road') .where('type', ['motorway', 'trunk']) - .stroke(3.5, 'rgba(2555, 255, 255, 0.5)') - .stroke(2.5, colors.big_road) + .stroke(1.75, 'rgba(2555, 255, 255, 0.5)') + .stroke(0.75, colors.big_road) .render('road') .whereNot('type', ['motorway', 'trunk']) - .stroke(3, 'rgba(255, 255, 255, 0.5)') - .stroke(1.5, colors.little_road) + .stroke(1, 'rgba(255, 255, 255, 0.5)') + .stroke(0.5, colors.little_road) .render('building') - .fill('#f0f0f0') + .fill('#888896') .stroke(0.5, 'rgba(0,0,0,0.4)') .render('water') diff --git a/grenoble.png b/grenoble.png new file mode 100644 index 0000000..e0249e8 Binary files /dev/null and b/grenoble.png differ