set up with mapbox terrain v2, fixes #2

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/)
 

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')