Julio - Documentação

ATENÇÂO: Não execute este arquivo abrindo diretamente de uma pasta. Use pelo menos um localhost, porque ao contrário o Flash se recusa a conversar com o Javascript.

Baixar o código

Entre em http://code.google.com/p/julio/source/checkout e siga as instruções.

Carregar em uma página

O pré-requisito é o swfobject. Carregue-o antes de tudo:


    <script type="text/javascript" src="js/swfobject.js"> </script>

E depois o julio.js


    <script type="text/javascript" src="js/julio.js"> </script>

O julio.js tem a seguinte estrutura:


    <script type="text/javascript">
        var flashvars = {};
			flashvars.contorno = "0xFFFFFF";
			var params = {};
			params.allowscriptaccess = "always";
			var attributes = {};
			attributes.id = "julio";
			attributes.name = "julio";
			swfobject.embedSWF("flash/julio.swf", "julio_div", "330", "320", "8.0.0", false, flashvars, params, attributes);
			
			function getJulio(nome) {
	           if(!nome) {
	                nome = 'julio'
	            }
		        var isIE = navigator.appName.indexOf("Microsoft") != -1;
                return (isIE) ? window[nome] : document[nome];
			}
			
		    function inicializaJulio() {
		        //Código a ser executado depois de o mapa carregar
		    }
    </script>

No código acima, é indispensável haver o allowscriptaccess='always' que permite a conversa entre o Flash e o Javascript. Além disso, dá pau no Internet Explorer se os parâmetros do swfobject.embedSWF() não forem colocados nessa ordem e com esses valores. Altere por sua conta e risco.

No seu código deve existir um div com id julio, que é o lugar onde o mapa será inserido. Geralmente é um div que pode ter um conteúdo alternativo que será exibido no caso de o carregamento do flash dar pau: <div id="julio"> Conteúdo alternativo </div>

Como modificar

É possível alterar as variáveis predefinidas do julio na hora de carregá-lo ou durante a execução.

Ao carregar a página

Para que o mapa apareça na página do jeito que você quer, as variáveis devem ser colocadas dentro do objeto flashvars = {} que o swfobject usa para montar o código do flash que vai ser carregado.

Por exemplo, para carregar um mapa com contorno branco, estados pintados de preto e zoom no estado do Paraná, o seguinte código funcionaria:
flashvars.contorno = "0xFFFFFF" flashvars.cor = "0x000000" flashvars.zoom_uf = 'PR'

Uma lista de variáveis que podem ser utilizadas e seus possíveis valores está mais abaixo nesta página.

Com javascript (runtime)

Caso você deseje alterar o julio via javascript depois de carregado na página, é recomendável que as suas ações sejam disparadas por uma função chamada inicializaJulio()


    <script type="text/javascript">
        function inicializaJulio() {
            //Esta função é chamada quando o mapa termina de carregar
            //e está pronto para receber comandos.
        }
    </script>

Aí é possível usar as funções da API do julio para mexer no mapa:


    getJulio().mudaCorBr('0x000000')

[testar]


    getJulio().mudaCorRegiao('0xff3333','nordeste')

[testar]


    getJulio().zoom('SC')

[testar]

Variáveis

Abaixo, a lista de variáveis que podem ser definidas no flashvars = {}

contorno='0x0000CC'

Funções

O julio tem diversas funções bem simples que combinadas podem atingir resultados complexos. A seguir vemos uma lista delas que podem ser chamadas via Javascript, usando getJulio().nomeDaFuncao(parametros)

Perceba que cor e opacidade são propriedades independentes. Você pode ter o país todo com a mesma cor e variar apenas a opacidade entre os estados, por exemplo, ficando com vários tons da mesma cor.

mudaCor('0xFF3333','PA')

Você não conseguiu abrir o arquivo Flash

Julio - Documentação

ATENÇÂO: Não execute este arquivo abrindo diretamente de uma pasta. Use pelo menos um localhost, porque ao contrário o Flash se recusa a conversar com o Javascript.

Baixar o código

Carregar em uma página

Como modificar

Ao carregar a página

Com javascript (runtime)

Variáveis

Funções