main.js

Back To Home

main.js configures what your layerboard app contains

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

At the top of the file, before you call "layerboard", 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 FontAwesome icons

You can use any icons from FontAwesome. 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);

Importing your other files

In a bundled Vue project, you can split all of the code that layerboard 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 pave from './topics/pave';
import snow from './topics/snow';

Calling layerboard

Call layerboard as follows:

layerboard({

});

In the gap, you have to 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.

Many of these links are to the mapboard wiki, since much of the information on a mapboard config file is applicable to a layerboard config file.

Required options

• baseConfig
• gatekeeperKey
• components
• parcels
• dataSources
• topics
  • topic components
• map

Non-required options

• legendControls
• rootStyle
• router
• geolocation
• panels
• addressInput
• imageOverlayGroups
• cyclomedia
• pictometry
• greeting
• transforms
• defaultAddress
• addressHeaderAdditionalInfo
• footerContent
• customComps
• initialPopover

example:

import layerboard from '@phila/layerboard/src/main.js';
var BASE_CONFIG_URL = 'https://cdn.jsdelivr.net/gh/cityofphiladelphia/layerboard-default-base-config@8e227b2abe04a0dee3a327ccab9d7dc49e1b6354/config.js';
var WEBMAP_ID = '1596df70df0349e293ceec46a06ccc50';

layerboard({
  bundled: true,
  layerFilter: true,
  router: {
    enabled: true
  },
  geolocation: {
    enabled: true,
    icon: ['far', 'dot-circle']
  },
  addressInput: {
    width: 415,
    mapWidth: 300,
    position: 'right',
    autocompleteEnabled: false,
    autocompleteMax: 15,
    placeholder: 'Search the map',
  },
  map: {
    defaultBasemap: 'pwd',
    defaultIdentifyFeature: 'address-marker',
    imagery: {
      enabled: true
    },
    historicBasemaps: {
      enabled: true
    },
    center: [-75.16347348690034, 39.952562122622254],
    clickToIdentifyFeatures: true,
    containerClass: 'map-container-type2',
  },
  cyclomedia: {
    enabled: true,
    measurementAllowed: false,
    popoutAble: true,
    recordingsUrl: 'https://atlas.cyclomedia.com/Recordings/wfs',
    username: process.env.VUE_APP_CYCLOMEDIA_USERNAME,
    password: process.env.VUE_APP_CYCLOMEDIA_PASSWORD,
    apiKey: process.env.VUE_APP_CYCLOMEDIA_API_KEY,
  },
  pictometry: {
    enabled: false,
  },
  baseConfig: BASE_CONFIG_URL,
  webmapId: WEBMAP_ID
});