CtOS :: Behance

CtOS/

This is a work-in-progress project

This is a personal project to create my own map system – in place of Google Maps (using Mapbox GL JS). The project includes design of the elements and coding.

root~# Design

I designed all the map components (background, road hierarchy, rivers, marker, popup...) and the interface elements (menus, listing, item, icons...).

Since it's a personal tool, I didn't want to go for a "fancy" and catchy interface, but much rather for a technical, terminal-based, effective and somewhat esoteric design. I went for a scify-inspired theme, with many screen graphics influences coming from Arkham Knight, Watchdogs, Cyberpunk 2077, the Martian, Tron, Oblivion and Halo Wars (actually many projects from GMUNK).

The webapp is based on VueJS, to maximize data binding, speed and interactivity with the map.

Exploration for filters, sliders and parameters

Research for titles, heading and list items

I experimented few icons for the different types of map symbols (user's position, destination markers, points of interest, targets...)

In order to make the interface more "sci-fy looking", I added in some elements referring to ID, barcodes, certifications and the like.

The figure above presents some of these researches.

The map comes with 3 different themes - for 3 different usages -, with specific functionalities for each. The intent was to keep a consistent system between all this theme – in term of layout, guiding colors, generic icons and mechanism.

Tactical theme

This is the main and default theme, mostly used for urban wandering. It’s relatively technical and exhaustive, with many different types of motifs and line: waterways, roads, rails, landuse, bridges, aeroways, admin borders, parks, buildings...

The rest of the theme follow this technical stance, and the interface intends to “overwhelm” the user with data (not all meaningful), animations, information...

The Tactical theme, with desktop version in background.

Contrast theme

This theme is brighter, as much for the white background as for the amount of information displayed on the screen. With a light background, it’s more suitable for daylight usage, with less information on the map. Ideal for navigation and essential info.

Terrain theme

Finally, the “Terrain” theme is designed for outdoor and off-road activities, with focus on isopleths, trails, elevation and all information for orientation - and more largely for trecking (screenshots will follow soon).

root~# Code

The map is mainly built on Mapbox. The map rendering is powered by Mapbox lib (JS WebGL), and the tileset has been designed with the excellent Mapbox Studio tool. Finally, all the location data (geoJSON) are inputted, stored and served with their dataset API.