Skip to content

main.js

andy.rothwell edited this page Feb 28, 2020 · 25 revisions

main.js configures what your mapboard app contains

This is the main file of your app. You are going to call "mapboard" in this file, and pass it a lot of information about what you want you app to contain.

At the top of the file, before you call "mapboard", you can put any other javascript you need to make things work - import statements, functions, variables...

If you have split much of the information for the config out into other files, you will have to start this file by importing those other files.

Importing Font Awesome icons

You can automatically use any icons from two free Font Awesome libraries:

  • @fortawesome/free-regular-svg-icons
  • @fortawesome/free-solid-svg-icons

To do so, start this section of main.js with the following line:

import { library } from '@fortawesome/fontawesome-svg-core';

Then you can import as many icons from Font Awesome that you want. The packages "free-regular-svg-icons" and "free-solid-svg-icons" are automatically available to you as dependencies of other packages you have imported. (You can add the pro packages to your project if you want.)

import { faDotCircle } from '@fortawesome/free-regular-svg-icons/faDotCircle';
import { faHome } from '@fortawesome/free-solid-svg-icons/faHome';
import { faBook } from '@fortawesome/free-solid-svg-icons/faBook';

Finally, you have to add the imported icons to the library as follows:

library.add(faDotCircle, faHome, faBook);

If you work for the City of Philadelphia, instructions for using the city account to use Font Awesome Pro icons are here

Importing your other files

In a bundled Vue project, you can split all of the code that mapboard needs into as many files as you want. Here is where you would import all of the files that you split your project into. For example:

import opa from './data-sources/opa';
import pollingPlaces from './data-sources/polling-places';

Calling mapboard

In a Vue Project's main.js, call mapboard as follows:

mapboard({

});

In the gap, you add parameters for each of the required options below (and you can add them for the non-required options too).

Configuration

main.js contains all of the final configuration specific to the app that you are creating.

Required options

Non-required options

Clone this wiki locally