14 comentários em “Mapas SVG GeoJSON com Polymaps

  1. Pingback: Sobreposição de um KML no Polymaps |

  2. Adorei o tutorial, estava a um tempo atrás de um que me explicasse exatamente o que fazer. Segui passo a passo o que esta descrito acima, mas estou tendo dificuldades. Ao executar meu arquivo html a função que seria executada pelo arquivo .gojson não ocorre. Ligo o firebug e sou informada do seguinte erro: NetworkError 404 Not Found no entanto o path do arquivo esta correto. Alguma ideia do que possa estar acontecendo? Aguardo uma resposta.

    • Olá Raíne, o que está parecendo mesmo é problema no path. Não sei como você está executando o arquivo .html mas se for a partir de um servidor web como o Apache ou o IIS, por exemplo, é preciso que o path esteja corretamente configurado na aplicação. Lógico que já tivemos problemas com uma simples barra, pontos ou até aspas que afetam a aplicação. Para evitar isso tente deixar o arquivo geoJson em uma mesma pasta do arquivo html e na parte em que você estiver indicando a url do geoJson na aplicação – map.add(po.geoJson() .url(“seuarquivo.geoJson” … ) – sem nenhuma contrabarra ou pontos e experimente. Depois é só ir alterando o seu path. Se não der certo podemos tentar um outro caminho para ver o erro. Até mais,

      • Primeiramente obrigada pela ajuda.
        Consegui resolver o problema. Pelo que entendi, de alguma maneira (não sei qual) a extensao .geojson estava sendo ignorada. Resolvi testar mudando o arquivo para .txt e funcionou, o mapa carregou sob a imagem. O unico problema é que agora o “título” dos estados não aparecem. Esta relacionado ao fato de eu ter mudado o arquivo para .txt? Ou essa função não esta inclusa no download? Agradeço desde já.

      • Olá Raíne fico contente que você tenha resolvido o problema e vejo que você é uma desenvolvedora. O exemplo do post é o exemplo do world que vem junto quando baixado. O arquivo world.html usa os arquivos javascript world.js, tsv.js, polymaps.js etc, e todos devem estar com os seus paths corretamente configurados. A extensão geojson não é reconhecida mesma pela aplicação devendo ser apenas json e fico surpreso pela extensão .txt ter dado certo. Nessa aplicação (world) o arquivo javascript world.js irá ler os arquivos tsv.js e o world.json fazendo com que os dois forneçam os dados necessários para que o tooltip mostre os países e a quantidade de usuários da internet conforme os arquivos txts. No exemplo do Brasil eu só mostrei a quantidade de certo evento fictício alterando os nomes e os arquivos .txts. Abraço,

  3. Isso mesmo Marcelo, sou desenvolvedora, a pouco tempo. Não domino muito bem javascript, estou engatinhando em HTML5 então esse projeto esta sendo um desafio, dos grandes. Ao me alertar que o fato do .txt tenha te surpreendido pensei na possibilidade do problema estar na hospedagem, é windows, e eu estava correta. Exportei o projeto para uma linux e funcionou corretamente. No entanto ao tentar preencher os tooltips aparece o seguinte erro no arquivo world.js: l[2] is undefined
    [Parar neste erro]

    .value(function(l) { return l[2].replace(/,/g, “”); })

    Não entendi muito bem o código, pois como comentei acima não domino js. Você saberia me dizer, ou me orientar, qual seria o erro?

    Agradeço novamente a atenção.

    • Raíne, essa função que aparece como erro é referente aos arquivos, no caso do exemplo world, que contêm os dados referentes à população e à quantidade de usuários de internet e eles devem ter a extensão .tsv porque as variáveis javascript population e internet do arquivo world.js buscam os arquivos population.tsv e internet.tsv. Caso você tenha modificado os nomes eles deverão ser configurados no arquivo world.js com a mesma extensão seuarquivo.tsv . Por favor avise-me se estiver tudo bem senão procuraremos outro caminho. Boa tarde,

      • Mil desculpas por estar te atrapalhando com as minhas muitas perguntas… mas é que estou realmente precisando de ajuda.
        Aquele erro deixou de ser exibido, e o tooltips esta funcionando. O problema é que ao passar o mouse sobre o mapa o título exibido é: undefined. Ele não esta conseguindo pegar o dados, e o caminho dos arquivos internet e população estão corretos. Eu verifiquei através do firebug.

        Obrigada mais uma vez pela ajuda.

      • Sem problemas, eu gostaria de saber 3 coisas da sua aplicação: A primeira é se você editou ou renomeou os arquivos .tsv ; A segunda é, caso você tenha editado, você deixou os países, ou estados, ou cidades etc. na ordem e no mesmo nome em que estão no seu arquivo .json; E a terceira, caso as duas primeiras perguntas sejam afirmativas, se você editou o arquivo world.js conforme o nome que você tenha renomeado os arquivos .tsv . Aguardo a sua resposta…

  4. Primeiramente feliz ano novo rs! Não, eu não renomeei os arquivos, eles continuam: area.tsv, internet.tsv e population.tsv. Eu coloquei os dados, nos respectivos arquivos, exatamente como você demonstrou na imagem ger46.jpg. No arquivo world.js não modifiquei nada, até por que, como já disse eu não os renomeei.

    • Obrigado, Feliz Ano Novo pra você também. Como não conseguimos resolver o problema da sua aplicação, eu acho que devemos fazer conforme os fóruns de TI porque códigos são complexos e qualquer detalhe pode afetar uma aplicação. Disponho me, caso você tenha interesse, de ver a parte do seu código, somente a parte dos comentários anteriores, e alguma coisa similar ao seu arquivo .geoJson para que eu possa ter alguma coisa mais concreta para comentar. Caso você tenha interesse é só enviar por email. Bom dia,

  5. Para finalizar o comentário, o problema de não aparecer o tooltip era porque no exemplo o arquivo geojson usada a variável name no arquivo word.js e nos arquivos tsv e o mapa do Brasil geojson e os arquivos tsv usavam a variável UF. A solução foi alterar a função load do arquivo word.js trocando a variável name pela variável UF. Assim o problema foi resolvido.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s