Skip to content
πŸ—ΊοΈ Map application sandbox
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
doc
public
resources
src
.gitignore
CODE_OF_CONDUCT.md
LICENSE
README.md
package.json
yarn.lock

README.md

Mapbook

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.

screenshot

Installation

First of all, you need to have the following tools installed globally on your environment:

Then, you can install the dependencies :

$ cd path/to/project
$ yarn install

Airtable setup

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 data
    • title (string)
    • latitude (number)
    • longitude (number)
    • description (long text) : you can use HTML here
    • images (attachment)
    • category (single relation)

Points table


  • Categories : which will contain the category description
    • name (string)
    • slug (string)
    • marker (attachment) : your marker image
    • width (number) : the marker image width
    • height (number) : the marker image height
    • icon (string) : should be the same icon CSS classes as the image (FontAwesome 5 in the example)
    • color (string) : hex color of the icon
    • background (string) : hex color of the background
    • Points (multiple relations) : automatic points relations
    • checked (boolean) : define if its points are displayed by default

Categories table


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)

Local configuration

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
}

Layers preview

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.

Run and build

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 

Main resources credits

You can’t perform that action at this time.