It is instantly really slow to exercise a edifice elevation map inwards only a few brusk steps using Mapbox.
This calendar week Mapbox announced that their Mapbox Streets v7 vector tiles instantly include edifice elevation data. This way that you lot tin dismiss utilisation Mapbox Studio to way buildings on Mapbox Streets v7 yesteryear the elevation of the buildings. In other words you lot tin dismiss color edifice footprints on a map to exercise a edifice elevation map.
Here's How
1. Open Mapbox 'Streets' inwards Mapbox Studio.
2. Select the 'Building' layer.
3. Under 'Style' alter the color of the edifice footprint.
4. Under 'Select Data' add together 2 filters to define the hit of the edifice heights you lot desire to endure this color.
In the screenshot you lot tin dismiss encounter I've chosen to color all buildings alongside a elevation greater than 0 in addition to less than 6.
That's it! You should instantly convey a map that colors all the edifice footprints alongside a elevation nether 6.
But you lot why destination there. You tin dismiss equally good add together dissimilar colors for buildings alongside dissimilar heights.
5. Duplicate your 'Building' layer.
6. In your 'Building Copy' layer alter the 2 filters you lot added to a higher house to 'height is less than 16' in addition to 'height is greater than 5'.
7. Change the color of the edifice footprint to a dissimilar color than you lot chose for buildings nether 6.
You instantly convey a map alongside 2 dissimilar colors for buildings alongside heights from 0-5 in addition to buildings alongside heights 6-15.
Of course of report you lot don't convey to destination at that topographic point either. You tin dismiss deportment on duplicating your 'Building' layer creating dissimilar colors for buildings alongside dissimilar elevation ranges.
Here is my completed Building Heights Map. In my map I've deleted every layer apart from my styled edifice layers. If you lot desire street names in addition to /or other map features at that topographic point is no argue why you lot should delete these layers from your map way inwards Mapbox Studio.
Now you lot convey your finished map way you lot powerfulness desire to hand your map users only about controls to filter the buildings shown on the map yesteryear edifice height. This is really slow to exercise using Mapbox's setPaintProperty function. In this Change a layer's color alongside buttons map demo you lot should endure able to encounter how you lot tin dismiss exercise buttons to plough your dissimilar edifice elevation layers on in addition to off. You could exercise buttons which switch the colors of your dissimilar layers betwixt the map background color in addition to the color you lot assigned to each layer inwards Mapbox Studio.
Alternatively you lot could allow your users to alternative the color of each edifice elevation hit for themselves. I used Mapbox's 'Change a layer's color alongside buttons' demo map in addition to only dropped inwards my edifice elevation layers to exercise a map where users tin dismiss alternative their ain colors.
Here is the completed Building Height Map inwards JSFiddle. Just utilisation the drop-down carte to alter the colors of the buildings yesteryear the hit of edifice height.
