https://github.com/clagomess/mapa-brasil
Gráfico dinámico do mapa do Brasil
https://github.com/clagomess/mapa-brasil
chart ibge mapa svg
Last synced: 4 months ago
JSON representation
Gráfico dinámico do mapa do Brasil
- Host: GitHub
- URL: https://github.com/clagomess/mapa-brasil
- Owner: clagomess
- License: mit
- Created: 2019-08-01T00:45:26.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-15T08:35:57.000Z (about 3 years ago)
- Last Synced: 2025-07-06T06:48:14.906Z (11 months ago)
- Topics: chart, ibge, mapa, svg
- Language: JavaScript
- Homepage:
- Size: 1.87 MB
- Stars: 31
- Watchers: 2
- Forks: 15
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mapa-brasil
## Instalação
```
npm install mapa-brasil
```
## Uso
### Html
```html
window.onload = function () {
MapaBrasil(document.getElementById('mapa'), {});
}
```
### Javascript
```javascript
const mapaBrasil = require('mapa-brasil');
mapaBrasil(document.getElementById('mapa'), {})
```
### Typescript
```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 |
- `string`
- `number`
| regiao | `string` | `'federacao'` | Valores permitidos:
- `'mesorregiao'`
- `'microrregiao'`
- `'municipio'`
- `'federacao'`
| defaultFillColor | `string` | `'#FFF3E3'` | - |
| defaultStrokeColor | `string` | `'#1F1A17'` | - |
| unidadeData |
- `Array`
- `Promise`
| onClick | `function` | - | Ex.: `(data) => {}` |
## Exemplos
Mais exemplos podem ser vistos em `index.html` no repositório.
### Personalização
```javascript
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
```javascript
MapaBrasil(document.getElementById('mapa'), {
onClick: function (data) {
MapaBrasil(document.getElementById('mapa'), {
unidade: data.codIbge,
regiao: 'municipio',
onClick: function (data) {
console.log(data)
}
});
}
});
```
