Beautiful Map Visualisations with Mapbox and React: Part 1

Is it just me or have you ever wondered how these dribbble designers plan to achieve the insanely beautiful map visualizations they come up with? what crosses my mind every time I see one of those is “Google maps or Mapbox never looked this way”.

from dribbble.com https://dribbble.com/search/maps

Fortunately or unfortunately for me, my current project involves working on the UI for a location intelligence platform. The good part was it had a lot to do with off-map planning by taking you through “what I call lazy man steps” to generate a campaign planning output (a discussion for another time). The organization had a design system for your regular use cases (buttons, tables, tabs, etc) and the application also had its unique look which branched out of the existing design system, this brought about a major problem the basic map look just didn’t fit. The developers were already using Mapbox on a react frontend and it was required that we style the maps to fit the design and I had to finally look into making Maps Beautiful too. I believe a few designers/frontend devs like me would like to know how too?

Setting up

I’m assuming you have a react project up and running, if not, refer to https://reactjs.org/docs/create-a-new-react-app.html

Note: we will also be using react hooks instead of class components

Installing React Mapbox Gl

yarn add react-mapbox-gl
if you use npm 
npm install react-mapbox-gl --save

Installing Styled Components

I have become heavily dependent on styled-components because of the component from style feature which allows me to build wrappers around existing components and over-writing their looks/style. You can do without this if you wish.

yarn add styled-components
if you use npm 
npm install styled-components

A little insight into Mapbox and it’s components

Mapbox is an open-source mapping platform for custom designed maps.

The components of interests include:

1. Markers
2. Layers and Features
3. GeoJSON Layer
4. GeoJSON Polygons
5. GeoJSON Circles
6. GeoJSON Lines

Markers

A marker identifies a location on a map. By default, a marker uses a standard image. Markers can display custom images, in which case they are usually referred to as “icons.”

Layers and Features

A layer is a collection of features while Features is an individual (or in some cases, a group of) points, lines, or polygons in a dataset or a tileset.

MapBox Layers showing health facilities features (points)

GeoJSON Layers

A GeoJSON layer is an individual point, lines or polygons generated from a GIS (geographic information systems) data format GEOJSON.

A GeoJSON contains information on specific points, line or shapes that scale or fits directly with the base map. Meaning no matter the zoom level the size is proportional to the exact scale to the base map, unlike shapes in features under layers who retain their shape and size irrespective of the zoom level.

Under the GeoJSON Layers, we have

Polygons

GeoJSON polygons are shapes drawn out of geo-coordinate points to serve as boundaries, buffers or catchments around a specific area.

Circles

GeoJSON circles are expected to be a circular representation of the GEOJSON POLYGONS with an origin coordinate and radius. Unfortunately, I didn’t find any implementation of this on Mapbox but there’s a way around that (Topic for another day).

Lines

GeoJSON Lines are also drawn out of geo-coordinates points to plot a line or lines across a map.

Whewwwwww!!!!!

Enough of the definitions and stories, let's get to coding some of the components.

Outline

1. Build components for the above Mapbox elements (In true sense, we are just wrapping a style around them)
2. Define properties to allow for more flexible design and functional options
3. Play around Base map styles to fit your design mood
4. Includes extra features like Popups.

Create the Map view page

mapview.js

import React from 'react';
import ReactMapboxGl from 'react-mapbox-gl';
const Map = ReactMapboxGl({
accessToken: 'your mapbox token goes here',
maxZoom: 16,
minZoom: 14
});
const MapView = props => {
return (
  <div>
    <Map
      center={{ lng: 7.510606, lat: 9.052860 }}
      style={"mapbox://styles/mapbox/streets-v9"}
      containerStyle={{ height: "100vh", width: "100vw"}}
    >
</Map>
  </div>
)}
export default MapView;

The code above would give you a basic rendition of the map based on your selected center (Map Location Origin)

Placing a default marker using the layer feature

...
import ReactMapboxGl, { Marker, Layer, Feature } from 'react-mapbox-gl';
import PointImage from '../../assets/icon.png';
...
<Marker coordinates={[7.512606, 9.052860]}>
   <img src={PointImage} style={{ width: 20 }} />
 </Marker>
 <Layer type="symbol" id="marker" layout={{ "icon-image": "marker-15" }}>
   <Feature coordinates={[7.510606, 9.052860]} />
 </Layer>

Here we have two implementations of displaying markers or symbols, below is the image showing a brown dot from the feature layer and a blue usb icon from the marker component

Note the marker component takes text, HTML, image and this is rendered on the map.

Ok, now that we have the basics the next stage will be styling and making custom components… This will be a discussion for another day, that is, in part 2.