Maps
Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac finibus risus. Aliquam erat volutpat. Donec mollis est urna, at pulvinar odio aliquet eget. Donec tellus felis, pulvinar eu neque nec, iaculis dictum erat.
![](images/maps/mapsdont.png)
Mapbox Streets
The chosen styling and palette for all AnyVan maps, comes from Mapbox. Mapbox Streets, the chosen style, is a comprehensive, general-purpose map kit that emphasizes accurate, legible styling of road and transit networks.
![](images/maps/mapsdo.png)
Figma plug-ins
![](images/maps/mapsicle.png)
Mapsicle
Never take a screenshot of a map again! With Mapsicle, you can quickly and seamlessly place maps in your mockups. An interactive map lets you pan to the perfect location, or you can search for a place anywhere in the world. Once you've placed a map in your designs, head back into Mapsicle to adjust the location, style, zoom level and more. Mapsicle uses Mapbox maps to give you a variety of customization options.
Learn more![](images/maps/mapmaker.png)
Map Maker
Map Maker allows you to make a customized map blazing fast. It currently supports Google Maps and Mapbox.
Palette
Taking the Mapbox Streets' palette as the foundation we can create and develop manually drawn maps that can still feel cohesive and consistent with the maps seen in the interfaces. These colours are only to be used within this context
-
Sienna
- HEX#e59558
- RGB236, 250, 0
- CMYK6, 0, 100, 2
-
Pineapple
- HEX#e5c45d
- RGB236, 250, 0
- CMYK6, 0, 100, 2
-
Quill
- HEX#e6e3df
- RGB236, 250, 0
- CMYK6, 0, 100, 2
-
Apple
- HEX#bbe39d
- RGB236, 250, 0
- CMYK6, 0, 100, 2
-
Seagull
- HEX#8aceec
- RGB236, 250, 0
- CMYK6, 0, 100, 2
-
Indigo
- HEX#4960c5
- RGB236, 250, 0
- CMYK6, 0, 100, 2
This applies to static maps as well, following the same style and colour guides provided - and used digitally - by MapBox
![](images/maps/manualmap.png)
Markers
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac finibus risus. Aliquam erat volutpat. Donec mollis est urna, at pulvinar odio aliquet eget. Donec tellus felis, pulvinar eu neque nec, iaculis dictum erat
![](images/maps/pinsdont.png)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac finibus risus. Aliquam erat volutpat. Donec mollis est urna, at pulvinar odio aliquet eget. Donec tellus felis, pulvinar eu neque nec, iaculis dictum erat
Predefined palette
Pairings
The idea when building routes is to maximum the visual difference between the two points; in order to achieve this, never pick a starting and delivery colour from the same family
Vans
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac finibus risus. Aliquam erat volutpat. Donec mollis est urna, at pulvinar odio aliquet eget. Donec tellus felis, pulvinar eu neque nec, iaculis dictum erat
![](images/maps/vansdont.png)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac finibus risus. Aliquam erat volutpat. Donec mollis est urna, at pulvinar odio aliquet eget. Donec tellus felis, pulvinar eu neque nec, iaculis dictum erat
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac finibus risus. Aliquam erat volutpat. Donec mollis est urna, at pulvinar odio aliquet eget. Donec tellus felis, pulvinar eu neque nec, iaculis dictum erat
Routing
When drawing routes manually, or specifying them digitally, ensure consistency with the following guidelines - always use rounded joins and caps, the stroke weight / thickness should be 5px.
Completed portions of routes should be shown at 30% opacity
![](images/maps/van.png)