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.
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.
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