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 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.

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',
    },
    ...