Really Nice Header

The banner is actually a full featured map application.

Wanna do fancy stuff here?

Black GeoJson

This was the first try to put a Mapbox map into a Website banner and implement some cool animation. Basically the dark monochome map style of Mapbox is used, with most Components disabled. It looks pretty neat, as Mapbox is already producing great styles.
The streets are implemented as a GEOJson data source. This demonstrates how easily any kind of data can be shown on the map. You can easily add map markers, company headquaters, point of interests and whatsoever.
The downside is speed. As I just import a raw openstreetmap data dump from Karlsruhe, the application has to import 30MB of data, which may be too much for mobile devices. Check out the Github to learn how to improve speed, or the Viridis Colorscale example, to serve the streets with Mapbox.

What is it?

Used libraries

This template uses Foundation CSS design. The map is powered by Mapbox GL, displaying street network build from OpenStreetMap data, distributed under ODbL 1.0 License.

Can I use it?

Hell, yeah!

If you reuse the template, please attribute hydrocode. You can use the image above. Get in touch with us, if you need customization or support.
Find the full code on Github