Mapbook a map application blueprint based on React, Mapbox GL JS and Airtable. It offers a simple way to manage your points/categories and to display it in a nice, performant and responsive map interface.
First of all, you need to have the following tools installed globally on your environment:
- π NodeJS 10+ - JavaScript runtime used to build the project
- π Yarn - Dependency manager built on top of the NPM registry
Then, you can install the dependencies :
$ cd path/to/project
$ yarn install
Airtable is used here as the main data system because of its very simple usage and the out the box JSON REST API that came with. So you will need to create 2 tables (recommended in the same base). To ease the process, simply use this template and use the Copy base
button in the top-right corner.
Points
: which will contain all your points related datatitle
(string)latitude
(number)longitude
(number)description
(long text) : you can use HTML hereimages
(attachment)category
(single relation)
Categories
: which will contain the category descriptionname
(string)slug
(string)marker
(attachment) : your marker imagewidth
(number) : the marker image widthheight
(number) : the marker image heighticon
(string) : should be the same icon CSS classes as the image (FontAwesome 5 in the example)color
(string) : hex color of the iconbackground
(string) : hex color of the backgroundPoints
(multiple relations) : automatic points relationschecked
(boolean) : define if its points are displayed by default
With the free plan, you can have up to 1200 records in your base. If, for some reason, you need more, you can subscribe to their Plus or Pro plan (great products) and if you're still just a broken student, you can use multiple bases. Now because relation doesn't work across Airtable bases, instead of a category
relation field, you need to turn it into a simple string
field and use the targeted category
id : can be found in the API documentation (https://airtable.com/YOU_TABLE_ID/api/docs#curl/table:categories
)
You will also need to duplicate and edit the configuration samples :
$ cp src/config/map.config.sample.json src/config/map.config.json
$ cp src/config/auth.config.sample.json src/config/auth.config.json
map.config.json
is mainly based on Mapbox Style Specification :
{
"airtable": { β Your Airtable credentials
"key": "XXXXXXXXXXXXXXXX",
"categories": {...},
"points": {...} β Can also be an array of objects for
multiple Airtable bases use
},
"styles": {...}, β Your styles objects made of sources
and layers for map switching
"clusters": {...}, β The cluster configuration
"unclustered-points": {...} β Map's markers configuration
}
π You can find great vector styles on Mapbox and/or Maptiler.
auth.config.json
is used if you want to use Firebase auth system :
{
"useAuth": true, β False if you don't want auth in the app
"firebase": {...} β Your Firebase credentials
}
Depending of your styles
configuration, if you want a preview for the LayerDial, you can generate and add them to src/assets
using the style's name as the filename. See existing examples.
Mapbook is based on Create React App, so the commands are pretty straightforward :
$ yarn start β start the dev server
$ yarn build β build your production assets
- React
- Mapbox GL JS
- Airtable
- Material-UI
- FontAwesome 5
- React-Firebase
- App icon made by icon 54