mapa-brasil

Instalação

npm install mapa-brasil

Uso

Html

<div id="mapa" style="height: 600px; width: 600px"></div>

<script type="text/javascript" src="mapa-brasil.min.js"></script>
<script type="text/javascript">
    window.onload = function () {
        MapaBrasil(document.getElementById('mapa'), {});
    }
</script>

Javascript

const mapaBrasil = require('mapa-brasil');

mapaBrasil(document.getElementById('mapa'), {})

Typescript

import {Component} from '@angular/core';
import mapaBrasil from 'mapa-brasil';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent {
  carregarMapa(){
    mapaBrasil(document.getElementById('mapa'), {})
  }
}

Documentação

Main

MapaBrasil(element: HTMLElement, options: Options)

Options

| Atributo | Tipo | Valor Padrão | Descrição | |--------------------|---------------------------------------------|---------------|-----------------------------------------------------------------------------------------------------------------------------| | dataPath | string | '/data' | URL dos assets | | unidade | stringnumber | 'br' | Cód. IBGE ou sigla da UF. Ex.: 52, 'df' | | regiao | string | 'federacao' | Valores permitidos: 'mesorregiao''microrregiao''municipio''federacao' | | defaultFillColor | string | '#FFF3E3' | - | | defaultStrokeColor | string | '#1F1A17' | - | | unidadeData | ArrayPromise | - | - | | onClick | function | - | Ex.: (data) => {} |

Exemplos

Mais exemplos podem ser vistos em index.html no repositório.

Personalização

MapaBrasil(document.getElementById('mapa'), {
    unidadeData: [
        {codIbge: 52, fillColor: '#d82b40'},
        {codIbge: 43, fillColor: '#d82b40'},
        {codIbge: 11, fillColor: '#ffa700', strokeColor: '#008744', strokeWidth: 4},
    ],
    onClick: function (data) {console.log(data)}
});

Brasil -> Município

MapaBrasil(document.getElementById('mapa'), {
    onClick: function (data) {
        MapaBrasil(document.getElementById('mapa'), {
            unidade: data.codIbge,
            regiao: 'municipio',
            onClick: function (data) {
                console.log(data)
            }
        });
    }
});