Three years agone Bonne Voy used CSS transform in addition to jQuery to practise an impressive folded map number to a Google Map. Folded Google Maps animates the unfolding of the Google Map equally if it was a newspaper map. It besides uses the CSS transform to apply a tilted number to the map.
In a recent demonstrate map Mapbox besides used CSS transform to visualize 3d summit profiles on bike routes betwixt Washington DC's Capital Bikeshare docking stations. CSS transform is used to contention the map to give a to a greater extent than oblique view. The final result is that the 3d summit profile of the road actually pops out from the underlying map.
Peter Liu has forthwith written a Mapbox weblog post service explaining how yous tin role CSS transforms to practise a like contention number on your ain maps. In Add a Third Dimension to Mapbox.js amongst CSS Peter walks yous through how to apply the CSS transform styles to contention in addition to rotate a Mapbox map. He besides explains how yous tin apply CSS transform to the map markers to assistance brand in addition to hence stand upwards out on a tilted map view.
The post service is accompanied yesteryear a prissy Mapbox map demonstrating the effects discussed inwards the post. Because these effects are all created amongst CSS they are non specific to the Mapbox mapping library. You tin of course of written report role the same CSS transform styles to practise a contention number on a Leaflet or Google Map.
