Barra de Progresso com AJAX

for($i=0; $i<10000000; $i++) {
  if ($i%10000 == 0) echo ((int) $i/100000).'-';
  flush();
} 

function ajaxobj() {  
  try {  
    _ajaxobj = new ActiveXObject("Msxml2.XMLHTTP");  
  } catch (e) {  
  try {  
    _ajaxobj = new ActiveXObject("Microsoft.XMLHTTP");  
  } catch (E) {  
    _ajaxobj = false;  
  }  
}  

 if (!_ajaxobj && typeof XMLHttpRequest!='undefined') {  
   _ajaxobj = new XMLHttpRequest();  
 }  

 return _ajaxobj;  
}
function prueba () {  
  ajax = ajaxobj();  
  ajax.open("GET", "res.php", true);  
  ajax.onreadystatechange=function() {
  if (ajax.readyState == 3) {  

   // Mostramos o percentual 
   var res = ajax.responseText;
   res = res.split('-');  
   alert(res[res.length-2]);  
  } else if (ajax.readyState == 4) {  

  // Fim
  alert('FIM');  
 }  
}  

 // Enviamos algo para que o processo funcione
 ajax.send(null);  
}  

Colocando minha empresa no mapa…

Este artigo, por mais simples que seja, tende a ser uma das maiores dúvidas e desejos dos usuários que estão iniciando nesta área. Como colocar minha empresa, estabelecimento, casa etc., no mapa. Com certeza no seu site é muito importante existir além do endereço da sua empresa um pequeno mapa representando tudo que está em volta dela para que os usuários possam se localizar mais facilmente.

Nosso foco hoje é criar um mapa utilizando a API do Google Maps. Com isso, não precisamos de nenhum banco de dados geográfico ou qualquer outro tipo de aplicação para desenvolvimento de mapas além das linguagens HTML e JavaScript.

Segundo o próprio Google, o que é a API do Google Maps?

A API do Google Maps permite usar JavaScript para incorporar o Google Maps em sua página da web. A API fornece diversos utilitários para manipular mapas (como na página http://maps.google.com) e adicionar conteúdo ao mapa através de diversos serviços. Você pode criar aplicativos de mapas robustos em seu site.

Passo 1: Obtendo uma chave para a API do Google Maps.

Para utilizarmos a API do Google, precisamos obter uma chave de identificação para o nosso site. É muito importante que você coloque a URL correta do caminho onde estará o mapa, caso contrário, ao instanciar a API no seu código, ela não funcionará.

Acesse o link : http://code.google.com/intl/pt-BR/apis/maps/signup.html, preencha as informações da URL do seu site e clique em GERAR chave de API. Não se esqueça de ler os termos de uso da API, nada de utilizá-la dentro de intranets.

Obs.: Você precisa ter um usuário cadastrado no Google para obtê-la.

Pronto, chave gerada, podemos ir para o próximo passo.

Passo 2: Obtendo o XY da sua empresa

Inicialmente, para identificarmos a sua empresa/estabelecimento/etc no mapa, precisamos da localização correta dela. A localização que comento é com relação ao seu XY. Mas o que é XY? Vamos à matemática…

Para a construção do modelo da superfície topográfica de uma dada região, necessitamos das triplas (x, y, z) de uma série de pontos da superfície do terreno. Os valores (x, y, z) são as coordenadas cartesianas de um ponto P, relativas a um sistema de coordenadas preestabelecido (como já vimos em meu outro artigo Sistemas de Informação Geográfica).

O plano XY é o plano horizontal de referência relativamente ao nível médio dos mares, e z é a distância vertical do ponto P ao plano horizontal XY (se me permitem exemplificar desta maneira, seria a altura em relação ao nível do mar, no nosso caso, não será necessária).

Como posso obter este ponto?

Existem diversas maneiras de se obter o XY de um endereço, vou exemplificar duas: a primeira é suscetível a alguns erros, motivo pelo qual o mapeamento da numeração das ruas nas cidades do Brasil não ser de fato correto (mas confesso que é satisfatório). O que quero dizer é que muitas vezes quando você informa o seu endereço, por exemplo o número 567, seriam 567 metros do ponto inicial da sua rua, nem sempre esta numeração irá bater exatamente no local da sua casa (quando digo exatamente, ainda considero um erro de 50m). Pode acontecer de aparecer na quadra errada; quando ocorrer, sugiro utilizar o segundo exemplo de aquisição do XY.

A primeira maneira que me refiro é solicitar através da url http://maps.google.com/maps/geo?q=STRING+DO+ENDERECOoutput=xmlkey=SUA_CHAVE

Obs.: Separe a string com “+”.

Exemplo:

http://maps.google.com/maps/geo?q=avenidaipiranga1200portoalegrersbrasiloutput=xmlkey=

Exemplo da resposta (response) em XML:

Pronto, seu XYZ é a coordenada <coordinates>-51.2093204,-30.0451247,0</coordinates> .

Agora você pode pular o segundo exemplo e ir direto ao passo 3, mas antes vamos verificar se o ponto está mesmo no local correto.

Acesso o seguinte link:

http://maps.google.com.br/maps?f=qsource=s_qhl=pt-BRgeocode=q=(-30.0451247,-51.2093204)

OBS: Lembre-se de alterar a ordem dos pontos XY <-> YX

A segunda maneira de se obter as coordenadas XY é implementar um outro exemplo utilizando a API do Google Maps. Chamamos este exemplo de Geocode Reverso (através de um clique no mapa iremos obter as informações quanto a este local).

O exemplo abaixo está presente na página da API do Google Maps, mantive-o como o qual para explicar cada linha.

Código

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps JavaScript API Example: 	Reverse Geocoder</title>
    <script src="http://maps.google.com/maps?file=apiv=2.xkey=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
            type="text/javascript"></script>
    <script type="text/javascript">

    var map;
    var geocoder;
    var address;

    function initialize() {
      map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(-30.0270583,-51.2303402), 10);
      map.addControl(new GLargeMapControl);
      GEvent.addListener(map, "click", getAddress);
      geocoder = new GClientGeocoder();
    }

    function getAddress(overlay, latlng) {
      if (latlng != null) {
        address = latlng;
        geocoder.getLocations(latlng, showAddress);
      }
    }

    function showAddress(response) {
      map.clearOverlays();
      if (!response  response.Status.code != 200) {
        alert("Status Code:"  response.Status.code);
      } else {
        place = response.Placemark[0];
        point = new GLatLng(place.Point.coordinates[1],
                            place.Point.coordinates[0]);
        marker = new GMarker(point);
        map.addOverlay(marker);
        marker.openInfoWindowHtml(
        '<b>orig latlng:</b>'  response.name  '<br/>'
        '<b>latlng:</b>'  place.Point.coordinates[1]  ","  place.Point.coordinates[0]  '<br>'
        '<b>Status Code:</b>'  response.Status.code  '<br>'
        '<b>Status Request:</b>'  response.Status.request  '<br>'
        '<b>Address:</b>'  place.address  '<br>'
        '<b>Accuracy:</b>'  place.AddressDetails.Accuracy  '<br>'
        '<b>Country code:</b> '  place.AddressDetails.Country.CountryNameCode);
      }
    }
    </script>
  </head>

  <body onload="initialize()">
    <div id="map" style="width: 500px; height: 400px"></div>
  </body>
</html>

Você já viu um exemplo da resposta (response) em XML no exemplo anterior.

Exemplo da resposta (response) em JSON:

Através dos arquivos acima, você consegue identificar quais as variáveis necessárias para obter os dados do geocode.

Por fim e não menos importante, o corpo do HTML:

<body onload="initialize()">
    <div id="map" style="width: 500px; height: 400px"></div>
        <div id="temp"></div>
  </body>

Não se esqueça de utilizar o ONLOAD para chamar a função initialize() para tão logo carregar a página iniciar o procedimento da criação do mapa. Não quero ver ninguém comentando que o mapa não aparece!

Pronto, agora navegue no mapa, procure o endereço da sua empresa (ainda não criamos uma barra de pesquisa de endereço, nos próximos artigos irei explicar como), clique no local e copie as informações da linha latlng.

Agora temos o XY para continuar no nosso artigo.

Passo 3: Adicionando minha empresa no mapa

Bom, se você já criou o exemplo anterior do geocode reverso, este agora é muito mais simples. Caso contrário, vamos lá passo a passo.

Vamos ao código

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example: Simple Markers</title>
    <script src="http://maps.google.com/maps?file=apiamp;v=2amp;key=
	ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
            type="text/javascript"></script>
    <script type="text/javascript">
    function initialize() {
      if (GBrowserIsCompatible()) { // Verifica se o browser é compativel com a API do Google
	    // Instância a API do Google e a adiciona na DIV map.
        var map = new GMap2(document.getElementById("map"));
		// Centraliza o mapa no XY, zoom 16 em uma escala de [1..17] (Varia de acordo com a região)
        map.setCenter(new GLatLng(-30.0451247,-51.2093204), 16);
		// (OPCIONAL) Adiciona os controle de a esquerda do Mapa (Zoom , Zoom -, barra de Zoom, etc)
        map.addControl(new GLargeMapControl);
		// Padronizamos o XY de acordo com o latlng da API: (Y,X)
        var latlng = new GLatLng(-30.0451247,-51.2093204);
        map.addOverlay(new GMarker(latlng)); // Adiciona o marker no mapa
      }//if
    }//function
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

OBS: Não se esqueça de trocar a sua chave da API. Não se esqueça de declarar o ONLOAD, para que a função initialize(), no meu exemplo, crie o mapa assim que a página seja carregada.

Resultado

Caso você queira incrementar o seu mapa e adicionar um evento de clique no marker, façamos algumas modificações no código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example: Simple Markers</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=
	ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
            type="text/javascript"></script>
    <script type="text/javascript">
    function initialize() {
      if (GBrowserIsCompatible()) { // Verifica se o browser é compativel com a API do Google
	    // Instância a API do Google e a adiciona na DIV map.
        var map = new GMap2(document.getElementById("map"));
		// Centraliza o mapa no XY, zoom 16 em uma escala de [1..17] (Varia de acordo com a região)
        map.setCenter(new GLatLng(-30.0451247,-51.2093204), 16);
		// (OPCIONAL) Adiciona os controle de a esquerda do Mapa (Zoom +, Zoom -, barra de Zoom, etc)
        map.addControl(new GLargeMapControl);
		// Padronizamos o XY de acordo com o latlng da API: (Y,X)
        var latlng = new GLatLng(-30.0451247,-51.2093204);
		var marker = new GMarker(latlng); // Criamos um marker referenciado a uma variável
		// Criamos um evento para ao se clicar no marker
		GEvent.addListener(marker, "click", function() {
			// Abrir um InfoWindow com o seguinte texto
           marker.openInfoWindowHtml("Endereço da minha empresa! <br/> <strong>;)</strong>");
          });
        map.addOverlay(marker); // Adiciona o marker no mapa
      }//if
    }//function
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

Pronto!

jQuery e ASP para cadastrar dados

Usar o jQuery é uma forma mais fácil de criar funcionalidades extras em seus sistemas, de animações básicas a grandes galerias de fotos, mas vamos para o nosso foco que é inserir no banco.

Criei um arquivo chamado funcao_jquery.js para colocar a função de efeito do jQuery. Para nossa aplicação usei o efeito fadeIn().

O Fade in (a função fadeIn()) serve para dar opacidade, e pode ser ajustado para ter animação. Existem três strings de velocidade predefinidas (“slow”, “def”, e “fast”), usei a slow em nossa aplicação;

fadeIn("slow");

Criei dois campos de exemplo (Nome e E-Mail) e um botão “submit“. Podem ser criados quantos necessários:

<form action="Cadastro_JQuery.asp?Cadastrar=Ok" method="post">
    Nome: <input name="Nome" type="text" id="Nome" />
    <br>
    E-Mail: <input name="EMail" type="text" id="EMail" />
    <input name="btAdd" type="submit" value="Adicionar" id="btn_enviar" />
</form>

No action do formulário coloquei uma Query “Cadastrar” com valor ok para ativar a ação do ASP (usando JScript) que segue abaixo:

<%
// Função para cadastrar no banco
if (Request.QueryString("Cadastrar") == "Ok") {

    var nome = Request.Form("Nome");
    var email = Request.Form("EMail");

    Conexao.Execute("Insert Into Newsletter (Nome, EMail)
                     Values ('"+nome+"', '"+email+"')");
    Response.Write("");
}
%>

Usando listas (UL>LI) eu pego as informações do banco e organizo tudo para ser mostrado ao usuário:

<%
var rs = Conexao.Execute("Select * From Teste"); // SQL para listar os dados
if (rs == null) {
    Response.Write("NADA ENCONTRADO");
}
else {
    while (!rs.EOF) {
        Response.Write("<li>"+rs("Nome")+" : "+rs("EMail")+"</li>") 
        // Lista todos os cadastrados do banco
    rs.MoveNext();
    }
}
%>

No ASP, com JScript para verificar se existe algo no banco, eu pego o RecordSet e comparo ele com “null” e o “else” caso encontre;

if (rs == null) {

… continua o resto do código…

A mesma idéia temos para o “loop”, só que uso o End Of File (.EOF)

while (!rs.EOF) {

… continua o resto do código …

Em seqüência imprimo na tela o que foi encontrado.

O jQuery vai agir da seguinte maneira:

No botão de tipo “submit” coloquei uma ID de nome “btn_enviar”, quando o botão for clicado será enviado os parâmetros via POST para o jQuery.

$('#btn_enviar').click(function(){

    var nome_post = $('#Nome').val();
    var email_post = $('#EMail').val();

$.post("Cadastro_JQuery.asp?Cadastrar=Ok",{nome: nome_post, email: email_post}

Logo em seguida jogo dentro da lista (UL>LI).

$("ul li:last").after("<li>" + nome_post + " : " + email_post + "</li>").next().fadeIn("slow");
});

E finalizo limpando os campos. Veja na imagem abaixo:

Segue o link da página com o código completo e o arquivo jQuery!

Código completo

Arquivo jQuery

Fonte: Imasters

Upper-box – Componente para jQuery

Para nós, desenvolvedores, existem scripts, códigos, métodos, estruturas que carregamos conosco ano após ano. Utilizamos essas soluções empacotadas em determinados momentos, muitas vezes salvando nossas horas de descanso.

Há muito tempo, em um sistema web em que o foco era a visualização de documentos, o cliente solicitou que o menu fosse retrátil. Ou seja, o menu superior da aplicação tinha que desaparecer se não estivesse sendo utilizado e aparecer quando o cursor do mouse se aproximasse dele. Para suprir isso criei uma função Javascript (utilizando CSS), e ficou bem bacana, simples e bastante útil. Esse script eu carrego comigo desde lá.

Precisei disso novamente alguns dias atrás, mas dessa vez fiz diferente. Tornei o script genérico, de modo que posso utilizar mais facilmente em qualquer aplicação web que tenha jQuery, e ainda coloquei em um repositório no Github (repositório GIT).

Sei que ainda é bastante primitivo e não está nos padrões de plugin jQuery. Mas essa é uma das intenções de colocar em um repositório público. Quem quiser usar e acoplar funcionalidades, otimizações e mesmo dar opiniões será muito bem-vindo. Pra quem não quer nem tocar no repositório, segue o link pra download (versão mais recente). Veja um exemplo do seu funcionamento aqui.

Pra explicar o que, como, onde, vou transcrever o README do repositório no Github abaixo.

upper-box

API javascript que transforma qualquer elemento de seu HTML (uma div, por exemplo) em uma caixa móvel posicionada na parte de cima da tela.

Para utilizá-lo é necessário estar com o jQuery adicionado ao documento.

O que acontece?

O elemento upper-box vai virar uma caixa invisível na parte de cima da tela.

Quando o usuário se aproxima com o mouse da parte superior da tela (body), o elemento ira rolar, abrindo e exibindo seu conteúdo.

Como usar?

Primeiro inclua os arquivos jQuery e upper-box no seu html, desta forma:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="upper-box.js"></script>

Seu uso é bem simples, basta adicionar upper-box ao class do elemento que vai virar upper-box.

Exemplo:

<div id='div1' class='divClass'>
 <h2>Olá,</h2>
 <p>Esta div não é um <b>upper-box</b>!</p>
</div>

<div id='div2' class='divClass upper-box'>
 <p>Esta div será um <b>upper-box</b>!</p>
 <p>Simples, não?!</p>
</div>

Espero não só ter ajudado como também ter instigado a colaboração de código. Sintam-se à vontade para realizar melhorias no simples – por enquanto – upper-box.

Fonte: Imasters

Validação de formulários com jQuery

Vamos verificar, por exemplo, se todos os campos foram preenchidos ou não.. ou se os seus valores estão ok.

Veja um exemplo do que será aprendido nessa aula.

Usarei como exemplo um formulário de contato que é o mais comum por aí. Vamos ao passo-a-passo:

Faça o download da última versão do jQuery no site: http://jquery.com/

Faça o download do plugin Validation no site: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Insira-os dentro do <head> do seu site, da seguinte forma:

1.<script language="JavaScript" src="jquery.js" type="text/javascript"></script>
2.<script language="JavaScript" src="jquery.validate.js" type="text/javascript"></script>

Após isso, criamos um pequeno bloco de CSS para estilizar as mensagens de erro:

1.* { font-family: Verdana; font-size: 96%; }
2.label { display: block; margin-top: 10px; }
3.label.error { float: none; color: red; margin: 0 .5em 0 0; vertical-align: top; font-size: 10px }
4.p { clear: both; }
5..submit { margin-top: 1em; }
6.em { font-weight: bold; padding-right: 1em; vertical-align: top; }

Ainda dentro do head, depois de inserir o jQuery e o estilo das mensagens de erro, precisaremos adicionar um bloco de JavaScript contendo instruções para a validação:

01.$(document).ready( function() {
02.$("#formularioContato").validate({
03.// Define as regras
04.rules:{
05.campoNome:{
06.// campoNome será obrigatório (required) e terá tamanho mínimo (minLength)
07.required: true, minlength: 2
08.},
09.campoEmail:{
10.// campoEmail será obrigatório (required) e precisará ser um e-mail válido (email)
11.required: true, email: true
12.},
13.campoMensagem:{
14.// campoMensagem será obrigatório (required) e terá tamanho mínimo (minLength)
15.required: true, minlength: 2
16.}
17.},
18.// Define as mensagens de erro para cada regra
19.messages:{
20.campoNome:{
21.required: "Digite o seu nome",
22.minLength: "O seu nome deve conter, no mínimo, 2 caracteres"
23.},
24.campoEmail:{
25.required: "Digite o seu e-mail para contato",
26.email: "Digite um e-mail válido"
27.},
28.campoMensagem:{
29.required: "Digite a sua mensagem",
30.minLength: "A sua mensagem deve conter, no mínimo, 2 caracteres"
31.}
32.}
33.});
34.});

Por fim, inserimos o HTML do formulário na página:

01.<form id="formularioContato" method="post" action="">
02.<label>Nome</label>
03.<input name="campoNome" type="text" value="" />
04.
05.<label>E-mail</label>
06.<input name="campoEmail" type="text" value="" />
07.
08.<label>Mensagem</label>
09.<textarea name="campoMensagem"></textarea><br />
10.
11.<input type="submit" class="submit" value="Enviar" />
12.</form>

Viram como é fácil? O arquivo final ficou dessa forma. Se você preferir pode copiar todo esse código JavaScript para um arquivo .js e incluí-lo no <head> do seu site da mesma forma que fizemos no começo da aula.

Coloquei alguns comentários na parte das instruções de validação para facilitar o entendimento.

Com isso você faz uma validação client-side que ajuda a evitar dados inválidos e campos vazios. Mas preciso lembrar que, por ser client-side, essa validação acontece apenas no computador do visitante e o mesmo pode desativar o JavaScript e a validação toda não irá funcionar. Então não se esqueça de fazer a mesma validação dentro do PHP quando receber os dados.

Veja o exemplo desta aula funcionando.

Mais exemplos de validações diferentes podem ser encontrados no site do plugin: http://jquery.bassistance.de/validate/demo/

Fonte: Imasters

Upper-box – Componente para jQuery

Para nós, desenvolvedores, existem scripts, códigos, métodos, estruturas que carregamos conosco ano após ano. Utilizamos essas soluções empacotadas em determinados momentos, muitas vezes salvando nossas horas de descanso.

Há muito tempo, em um sistema web em que o foco era a visualização de documentos, o cliente solicitou que o menu fosse retrátil. Ou seja, o menu superior da aplicação tinha que desaparecer se não estivesse sendo utilizado e aparecer quando o cursor do mouse se aproximasse dele. Para suprir isso criei uma função Javascript (utilizando CSS), e ficou bem bacana, simples e bastante útil. Esse script eu carrego comigo desde lá.

Precisei disso novamente alguns dias atrás, mas dessa vez fiz diferente. Tornei o script genérico, de modo que posso utilizar mais facilmente em qualquer aplicação web que tenha jQuery, e ainda coloquei em um repositório no Github (repositório GIT).

Sei que ainda é bastante primitivo e não está nos padrões de plugin jQuery. Mas essa é uma das intenções de colocar em um repositório público. Quem quiser usar e acoplar funcionalidades, otimizações e mesmo dar opiniões será muito bem-vindo. Pra quem não quer nem tocar no repositório, segue o link pra download (versão mais recente). Veja um exemplo do seu funcionamento aqui.

Pra explicar o que, como, onde, vou transcrever o README do repositório no Github abaixo.

upper-box

API javascript que transforma qualquer elemento de seu HTML (uma div, por exemplo) em uma caixa móvel posicionada na parte de cima da tela.

Para utilizá-lo é necessário estar com o jQuery adicionado ao documento.

O que acontece?

O elemento upper-box vai virar uma caixa invisível na parte de cima da tela.

Quando o usuário se aproxima com o mouse da parte superior da tela (body), o elemento ira rolar, abrindo e exibindo seu conteúdo.

Como usar?

Primeiro inclua os arquivos jQuery e upper-box no seu html, desta forma:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="upper-box.js"></script>

Seu uso é bem simples, basta adicionar upper-box ao class do elemento que vai virar upper-box.

Exemplo:

<div id='div1' class='divClass'>
 <h2>Olá,</h2>
 <p>Esta div não é um <b>upper-box</b>!</p>
</div>

<div id='div2' class='divClass upper-box'>
 <p>Esta div será um <b>upper-box</b>!</p>
 <p>Simples, não?!</p>
</div>

Espero não só ter ajudado como também ter instigado a colaboração de código.

Introdução ao OpenLayers: Vetores

Módulo 4: Vetores

1. Formatos Vetoriais

Com o OpenLayers é possível ler e escrever em diversos formatos de dados vetoriais serializáveis como o GeoJSON, KML, GeoRSS, GML e WKT.

Você pode também utilizar as ferramentas de desenho para desenhar pontos, linhas e polígonos no seu mapa, não apenas para criação, como também para edição das feições e dos seus atributos.

Se você possuir o Google Earth, poderá visualizar suas camadas nele, bastanto para isso que você gere um KML (através de uma requisição WMS, ou indo diretamente no cliente OpenLayers do seu GeoServer), e abra-o no Google Earth.

2. Estilos

Uma das razões para utilizar dados vetoriais, é que com o OpenLayers você tem o poder de controlar o seu estilo, ou seja, a forma como ele irá aparecer no mapa para o cliente.

Por padrão, as feições desenhadas pelo OpenLayers são laranja. Porém os estilos são totalmente customizáveis, bastando para isso que você tenha um arquivo JavaScript definindo o estilo, ou um arquivo de estilos externo (um SLD do GeoServer, por exemplo).

O exemplo abaixo foi gerado a partir de uma requisição WFS ao GeoServer. A camada foi desenhada utilizando cores baseadas na população.

Veja no código fonte do exemplo que adicionamos um nova propriedade:

A propriedade styleMap do layer foi setada para myStyleMap, veja:

Neste caso nós inicializamos o StyleMap com um hash de estilos. Este hash pode possuir as seguintes propriedades:

• default – estilo que será desenhado na inicialização do mapa;
• select – estilo que será desenhado quando alguma feição for selecionada;
• temporary – estilo que será desenhado com estilos que devem ficar temporariamente no mapa.

Nosso exemplo utiliza o padrão. Observe que quando você colocar o mouse em cima do mapa, o estilo irá mudar, isso porque um estilo diferente é utilizando quando o mouse passa em cima das feições.

Veja como ficou a definição dos estilos:

Fonte: Fernando Quadro

Introdução ao OpenLayers: Controles

Módulo 3: Controles

No OpenLayers, é através do controle que é possuir realizar a interação do usuário com o mapa. Alguns controles tem um representação visual e outros são invisíveis para o usuário. Quando você cria um mapa com as opções padrões, você cria com controles padrões visíveis. Este controles padrões permitem que o usuário navegue pelo mapa tanto com o mouse como os os botões. Adicionalmente existem outros controles que você pode adicionar ao seu mapa, e é isto que vamos ver agora.

Figura 1. Mapa de Funcionalidades
1. Controle Padrão

O controle padrão já é criado automaticamente quando você inicializa o seu mapa, e não necessita de comandos para a criação.

2. Escala

Este comando insere a escala no canto inferior esquerdo do seu mapa, conforme indica a Figura 1.

3. Referência

A referência pode ser adicionada como foi demonstrada acima, ou caso você prefiro é possível defirnir qual imagem irá aparecer dentro da referência, para isso você deve escrever o seguite código:

4. Lista de Camadas

A Lista de camadas (LayerSwitcher), é onde você pode ver quais camadas estão disponíveis para visualização, quais estão ativas, as camadas base, e também pode ativar/desativar as camadas conforme a sua necessidade de visualização.

5. Ferramentas de Edição

As ferramentas de edição são utilizadas quando há necessidade de editar ou criar novas geometrias diretamente no mapa.

6. Coordenadas

Esta funcionalidade indica o par de coordenadas conforme o posicionamento do mouse.

Veja como ficaria o código de um mapa com as funcionalidades descritas acima:

Fonte: Fernando Quadro

Introdução ao OpenLayers: Layers

1. Módulo 2: Camadas

Cada mapa no OpenLayers poder ter uma ou mais camadas. A camada contém toda a informação espacial que o usuário visualiza no mapa.

Existem diferentes tipos de camadas. Algumas camadas podem ser solicitadas como “tiles”, ou seja, pedaços que irão compor o mapa. Temos dois exemplo para isto os layers utilizados através do protocolo WMS (Web Map Service), e também os layers proprietários como os do Google e Yahoo. Outro forma é carregar os dados da camada, para isso é possível utilizar o padrão WFS (Web Feature Service), que retorna todas as informações disponíveis.

2. Camadas WMS

O arquivo 1-basico.html criado no módulo anterior usa uma camada WMS. WMS é um acrônimo para Web Map Service. Ele é um protocolo definido pela OGC (Open Geospatial Consortium) para comunicação de dados espaciais renderizados como imagem.

Uma camada WMS é criado no OpenLayers através de quatro parâmetros, sendo que o último é opcional.

• name     {String} Nome da camada
• url         {String} URL do serviço WMS (e.g. http://wms.jpl.nasa.gov/wms.cgi)
• params {Object} Um objeto com informações para o método GetMap
• options {Ojbect} Opções extra de configuração

Mais informações sobre a classe WMS Layers podem ser obtidas na documentação online. Você pode também realizar algumas modificações no seu exemplo trocando as camadas para isso você pode acessar o site WMS Site, e escolher as layers que deseja visualizar no seu mapa. Use o arquivo 1-basico.html para isso, ou crie um novo.

3. Camadas Comerciais

Além das camadas que são de acesso público, você pode também adicionar ao seu mapa camadas comerciais. O OpenLayers dá suporte as camadas do Google Maps, Yahoo Maps, Virtual Earth e MultiMap.

Veja o exemplo abaixo, como ficaria a adição de uma camada do Google Maps no seu mapa (Clique na imagem para vê-la no tamanho real).

4. Camadas WFS

Nesta seção criaremos camadas WFS. WFS é um acrônimo para Web Feature Server, um padrão da OGC. Ao invés do WFS retornar imagens ele retorna dados serializáveis, no padrão GML, dos vetores. Camadas solicitadas por WFS no OpenLayers são transformadas em pontos, linhas, polígonos no seu navegador. Veja na imagem abaixo como ficaria um mapa com uma camada WFS:

Fonte: Fernando Quadro

Introdução ao OpenLayers: Básico

Estou começando hoje uma série de posts sobre o OpenLayers, com o intuito de criar uma documentação básica sobre ele em português tendo em vista que praticamente ela não existe.

Todo o material que vou publicar nessa série, é com base no Workshop ministrado pela equipe da OpenGeo (norte-americana) no FOSS4G 2008 na África do Sul. Então vamos começar:

1. O que é o OpenLayers?
É uma API Javascript que fornece funcionalidades para criar mapas na web oferecendo as funções básicas para disponibilizar seus dados espaciais.

2. Módulo I: Básico

Iremos começar com um exemplo básico. Para isso você deve criar uma pasta no seu diretório de documentos do Apache com o nome de ol_workshop, feito isso crie um arquivo chamado 1-basico.html e copie o código abaixo:

Após salvar o arquivo, abra-o no browser e você deverá ver o mapa dos Estados Unidos:

O script acima é executado obedecendo seis passos que serão detalhados abaixo:

3. Passo 1: Carregando a biblioteca OpenLayers

A URL “http://openlayers.org/api/OpenLayers.js” aponta para o local do arquivo JavaScript que será carregado. Como o OpenLayers é OpenSource, você tem a possibiliade de utilizar plugins como o Firebug, e depurar o código Javascript diretamente no seu navegador.

4. Passo 2: O Mapa do DOM

O DIV é um elemento que estamos utilizando para a marcação do nosso mapa. Mais tarde, usaremos o id do div para a criação do mapa.

5. Passo 3: O Objeto Map

Mapas no OpenLayers são representados pela classe Map. Cada objeto map representa um mapa na página. No exemplo acima foi criado um novo mapa utilizando o construtor da classe Map, o OpenLayers.Map com a palavra chave new.

Neste código, nós passamos no construtor um argumento para identicadar o elemento que estamos usando, que definimos no DIV. O construtor pode opcionalmente receber como segundo parâmetro um objeto contento mais parâmetros para facilitar na configuração do seu mapa.

Para maiores informações, a documentação da classe Map pode ser encontrada na página da Documentação do OpenLayers, em inglês.

6. Passo 4: Criando uma camada

O OpenLayers organiza o seu mapa em diversas camadas (layers). Neste código é construída uma camada e adicionada ao mapa.

7. Passo 5: Posição do Mapa

Este código informa ao mapa ajustar o zoom para a sua extensão máxima , que por padrão é de todo o mundo. É possível definir uma extensão passando um parâmetro ao construtor do Mapa.

Para saber mais detalhes sobre os métodos de zoom, leia a documentação.

8. Passo 6: Carregando o Mapa

O código acima, será executado quando a página for criada, e então criará o mapa.

Fonte: Fernando Quadro

Próxima Página »

• Categorias

  • .Net
  • ASP
  • Banco de Dados
  • Carreira
  • Design
  • Dicas
  • FLEX
  • Gimp
  • Google API
  • Internet
  • Java
  • JavaScript/Ajax
  • MySQL
  • Noticias
  • Oracle
  • Photoshop
  • PHP
  • Programação
  • Ruby on Rails
  • SQL Server
  • Tecnologia

• Blogroll

  • Comando Digital
  • Professional Blogger
  • WebSapiens

• Tópicos recentes

  • Criando menus e páginas administrativas no WordPress: Parte 2
  • Criando menus e páginas administrativas no WordPress: Parte 1
  • Twitter reforça segurança e lança encurtador de URL
  • Nova plataforma da Cisco trafega até 322 terabits por segundo
  • TVs 3D estão chegando à sua sala!
  • YouTube lança legendas automáticas
  • Como usar Skype em celulares
  • EUA Revalam parte de sua estratégia contra ciberataques
  • Google anuncia mais uma compra desta vez de um site de edição de fotos
  • Sites abrigam documentos sigilosos que vazaram de algum modo na internet

• Ofertas Submarino