Gradient Acme Mapping

Moscow Hills is a real pretty map of Moscow, using slope colored roads to present superlative levels throughout the city. As good every bit using the color of the roads every bit a postulate yous tin mouse-over whatever indicate on a route to sentiment the superlative at that point.

The colors of the roads don't look to live on generated dynamically on the map. I mean value the colors are genuinely nowadays inwards the map tiles. Theoretically yous could practise a like map using the Google Maps API together with the Elevation Service. In fact it should live on fairly uncomplicated to depict a slope polyline along a route using the Stroke Style characteristic amongst the Google Maps SDK for iOS.

It's sort of indicative of Google's electrical flow fail for the Google Maps JavaScript API that slope polylines convey been introduced inwards the Google Maps SDK for iOS only aren't available inwards the Maps JavaScript API

Thieves Don't Similar Hills

There is a theory that San Francisco criminals don't similar hills. You mightiness survive able to exam this hypothesis amongst Mapbox's novel Surface API.

The Surface API includes acme information then that you lot tin move the API to discovery out the acme of points on a map or to practise an acme nautical chart of a walking or cycling route. However the Surface API is to a greater extent than than simply an acme service. It tin every bit good survive used to question whatever information sources of your own, whether that survive information of belongings prices, temperature, precipitation, dissonance flat or another geographical data.

The Mapbox spider web log has included a twain of event maps which move the Surface API. One of these is a Temperature in addition to Elevation map, which allows you lot to compare average temperatures amongst acme along a path.

The 2nd map is a San Francisco Bicycle Theft Rate Density map. This map allows you lot to depict a wheel road on the map in addition to persuasion an acme nautical chart of the route. If you lot mouse-over the acme nautical chart you lot tin every bit good run across the release of reported wheel thefts along the route. If you lot desire you lot could move the map to banking concern stand upwards for if to a greater extent than wheel thefts accept house at lower elevations than at higher elevations.

At the minute the Mapbox Surface API is inwards somebody Beta but the Mapbox spider web log post service has a asking flat which you lot tin move to asking access to the API.

Mapping The Hills Of San Francisco

This San Francisco Streets past times Slope map shows you lot the place of San Francisco's steepest streets as well as too shows you lot how you lot tin road but about them. The map tin thus last used equally a quick guide to avoiding the city's biggest hills.

Roads on the map are colored past times the slope of the climb. Red indicates the steepest streets as well as the flattest streets are shown inwards green. If you lot click on 2 locations on the map you lot tin sentiment a road which avoids the steepest climbs.


You powerfulness non dearest climbing hills but you lot but powerfulness dearest travelling downhill. In that illustration you lot powerfulness desire to purpose the Hill Mapper San Francisco, which makes dandy purpose of the Google Maps API Elevation Service to exhibit the management of slopes on San Francisco's streets.

The uphill streets are colored cerise as well as the bluish streets instruct downhill. The darker the color of the street, the steeper the hill. If you lot deed your place on the map the colors of the streets dynamically update to reverberate the novel directions of the slopes, relevant to your novel position.


If you lot actually loathe hills you lot tin too purpose the Flat Route Finder to uncovering cycling routes that avoid the steepest slopes. The Flat Route Finder uses the Google Maps superlative service to advise the flattest possible cycling route. Two superlative graphs are too provided to exhibit you lot the steepest parts of the road as well as the road itself is color-coded to exhibit you lot the easiest as well as close hard stages of your journey.

If you lot don't similar the hold off of the suggested road (or perversely you lot desire to uncovering the steepest route) you lot tin drag the road but about to sentiment the superlative as well as the difficulty of choice routes.


Bikesy is some other dandy wheel routing application that tin tending you lot uncovering the flattest, safest or fastest routes anywhere inwards the San Francisco Bay Area.

Bikesy tin furnish you lot alongside wheel routes that may last slightly longer than the quickest road but include less steep climbs. Each road comes alongside an superlative profile for your ride, as well as so you lot tin country inwards advance where as well as when you lot volition confront the toughest climbs.

For each asking Bikesy suggests a set out of dissimilar routes. You tin conduct from the flattest route, a road that takes inwards reasonable climbs or routes that create got inwards the steepest hills. You tin too conduct the 'safe', safer' or 'safest' route, which takes into concern human relationship wheel lanes as well as paths.  

3D Superlative Profiles

Mapbox has created a actually groovy bike road planning map for Washington DC which equally good provides a 3d dimensional meridian profile of the route.

Capital Bikeshare allows yous to driblet ii markers on a map to gear upwards your starting betoken in addition to destination. It in addition to then plant out a cycling road betwixt the closest Capital Bikeshare finish to your starting betoken in addition to the closest station to your destination.

The magic actually happens nonetheless when yous click on the 'elevation profile' button. If yous opened upwards the map inward a WebGL enabled browser the map volition argument to an oblique persuasion in addition to a 3d meridian profile volition locomote drawn on transcend of the entire route.


If yous right-click on the map yous tin post away rotate the map persuasion in addition to the 3d meridian profile magically rotates amongst map.

The map was created amongst Mapbox GL. The map degrades good if yous persuasion it on a non-WebGL enabled browser merely yous actually don't instruct the amount 3d effect.

Turf.js was used to ability the nearest wheel station search.