@action-agenda/map-counts

---

sidebarDepth: 5

Map Counts

Description

This component displays a map of all actions counted per country.

::: warning 12G Memory Needed for Build export NODE_OPTIONS=--max_old_space_size=12288 :::

Install

Widget

::: tip This component's options can be passed as an attribute on the script tag. See options details :::

<script nomodule="" id="map-counts-legacy" src="https://cdn.cbd.int/@action-agenda/map-counts@~2.0.0/dist/widget/index.umd.min.js"></script>
<script  type="module" id="map-counts" src="https://cdn.cbd.int/@action-agenda/map-counts@~2.0.0/dist/widget/index.min.js"></script> 

<script  type="module" id="map-counts" src="https://cdn.cbd.int/@action-agenda/map-counts@~2.0.0/dist/widget/index.min.js"></script> 

<script nomodule="" id="map-counts-legacy" src="https://cdn.cbd.int/@action-agenda/map-counts@~2.0.0/dist/widget/index.umd.min.js"></script>

Vuejs

To install as vuejs component.

yarn add @action-agenda/map-counts

npm install @action-agenda/map-counts

<template>
  <AAMapCounts  ></AAMapCounts>
</template>

<script>
import AAMapCounts from '@action-agenda/map-counts'


export default { name      : 'App',
                 components: { AAMapCounts } 
               }
</script>

Properties

<<< @/packages/map-counts/src/components/index.vue#snippet

options

<<< @/packages/map-counts/src/components/options.js#snippet

I18n (translations)

<<< @/packages/map-counts/src/locales/index.js

Example

---

<script> export default { methods: {getExamp}, data() { return { dynamicComponent: null, exampleData: null, exampleHeader: null } }, mounted () { import('../map-counts/src/index.js').then(module => { this.dynamicComponent = module.default this.getExamp() }) }, destroyed(){ this.exampleHeader.parentNode.removeChild(this.exampleHeader) this.exampleData.parentNode.removeChild(this.exampleData) } } function getExamp(){ const test = document.getElementsByTagName('main')[0].lastElementChild.id if(test === 'aa-data') return this.exampleHeader = document.getElementById('example-hr') this.exampleData = document.getElementById('aa-data') this.exampleHeader.parentNode.removeChild(this.exampleHeader) this.exampleData.parentNode.removeChild(this.exampleData) const main = document.getElementsByTagName('main')[0] this.exampleHeader.classList.add('aaexample-header') main.appendChild(this.exampleHeader) main.appendChild(this.exampleData) } </script> <style scoped> .aaexamp{ background-color: rgb(38, 90, 79); } .aaexamp .article-container{ background-color: white; } .aaexamp-header{ max-width: 740px; margin: 0 auto; padding: 2rem 2.5rem; } </style>