customComps

Back to Home

Back to main.js page

customComps configuration

You might want to design your own custom components, like a container for a set of buttons:

Or the contents that you want to put in a Popover:

To add a Vue component of your own design to a Mapboard, Pinboard, or Layerboard project, create a .vue file in your own src files.

Then in your config, import the .vue component, and include it in an object called "customComps" which you add as a parameter to include with the mapboard or layerboard function call.

Mapboard, Pinboard, and Layerboard will then recognize the component anywhere you use it. So any file where you are including an array of components can also include the components in your own project.

Example:

main.js:

...
import propertyCallout from './components/propertyCallout.vue';
const customComps = {
  'propertyCallout': propertyCallout,
};

mapboard({
  customComps,
  ...

in a "topic" js file:

export default {
  key: 'property',
  icon: 'home',
  label: 'Property Information',
  dataSources: ['tips'],
  components: [
    {
      type: 'propertyCallout',
    },
    ...