MultiFlatmapVuer Live Demo

Live Demo

Code Preview

  <div class="your-outer-container">
    <MultiFlatmapVuer
      ref="multi"
      :availableSpecies="availableSpecies"
      @ready="FlatmapReady"
      :initial="initial"
      :helpMode="helpMode"
      :displayMinimap="true"
      :enableOpenMapUI="true"
      :flatmapAPI="flatmapAPI"
      :disableUI="disableUI"
    />
  </div>

  <script>
    import { MultiFlatmapVuer } from '@abi-software/flatmapvuer';
    import '@abi-software/flatmapvuer/dist/style.css';

    export default {
      components: { MultiFlatmapVuer },
      data: function () {
        return {
          availableSpecies: {
            'Human Female': {
              taxo: 'NCBITaxon:9606',
              biologicalSex: 'PATO:0000383',
              iconClass: 'mapicon-icon_human',
              displayWarning: true,
            },
            'Human Male': {
              taxo: 'NCBITaxon:9606',
              biologicalSex: 'PATO:0000384',
              iconClass: 'mapicon-icon_human',
              displayWarning: true,
            },
            'Rat (NPO)': {
              taxo: 'NCBITaxon:10116',
              iconClass: 'mapicon-icon_rat',
              displayWarning: true,
              displayLatestChanges: true,
            },
            Mouse: {
              taxo: 'NCBITaxon:10090',
              iconClass: 'mapicon-icon_mouse',
              displayWarning: true,
            },
            Sample: { taxo: 'NCBITaxon:1', displayWarning: true },
            'Functional Connectivity': {
              taxo: 'FunctionalConnectivity',
              displayWarning: true,
            },
          },
          initial: 'Rat (NPO)',
          helpMode: false,
          flatmapAPI: 'https://mapcore-demo.org/devel/flatmap/v4/',
          disableUI: false,
        };
      }
    }
  </script>