Git Product home page Git Product logo

mapa-brasil's Introduction

mapa-brasil

GitHub release GitHub package.json version Travis (.org) Codacy Badge Codacy Badge

Instalação

npm install mapa-brasil

Ou download de mapa-brasil.min.js na página de releases.

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
  • string
  • number
'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
  • Array
  • Promise
- -
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)}
});

Exemplo 001

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)
            }
        });
    }
});

Exemplo 002

mapa-brasil's People

Contributors

clagomess avatar dependabot[bot] avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.