Recentemente, organizamos um divertido compartilhamento de habilidades com o Map Kibera<\/a>, e depois novamente com o Transparent Chennai<\/a>. A ideia é utilizar o OpenStreetMap e o TileMill para criar um mapa interativo de fotos. Aqui está o resultado simples<\/a> do trabalho com o Map Kibera.<\/p>\n Quer aprender a criar algo assim?<\/strong> Esse guia em quatro passos mostra uma visão geral do processo todo e a relação entre quatro ferramentas para construir um mapa de fotos. Vamos abordar os pontos principaise destacar como as ferramentas conectam-se aos dados abertos. Eu incluí os links para outras fontes que trazem mais detalhes sobre a utilização de cada uma delas.<\/p>\n Se você não tem uma conta no Flickr<\/a>, crie uma, é uma maneira fácil de compartilhar imagens. Carregue a foto de um lugar. Para o nosso exemplo, subimos esta foto do iHub em Nairobi<\/a>, tirada durante a eleição do projeto Uchaguzi. Criamos um grupo do Map Kibera<\/a> para colocar nossas fotos coletivas. Credit: Mikel Maron, Ground Truth Initiative<\/p><\/div>\n A partir da sua página de fotos, clique no botão <\/span>Share<\/strong> e depois marque o link <\/span>Grab the HTML\/BBCode<\/strong>. Selecione o tamanho “Small” para a imagem e copie e cole o código HTML no editor de texto\/processador de palavras. Precisamos somente do link da imagem, que está marcada com a etiqueta <\/span> O resultado que você deve ter é um link para a página de fotos, e a pré-visualização da foto. Algo como abaixo:<\/p>\n Agora, adiante com o OpenStreetMap<\/a>. Se necessário, inscreva-se e veja os passos básicos no LearnOSM<\/a>. Também tente o iD Walkthrough: navegue para uma área, clique em Edit <\/strong>(mais especificamente, clique na flecha para baixo e selecione “Edit with iD”) e siga o restante do tutorial de edição.<\/p>\n Agora abra novamente a aba View<\/strong>. Digite o nome da localidade da sua foto e procure. No nosso caso, é “iHub”. Procure no resultado da busca e encontre o item correto, devem haver mais de um com o mesmo nome<\/em>, depois clique em View Details<\/strong> para abrir a página de navegação para aquele contexto<\/a>. Esta página mostra a localidade e as etiquetas para aquele item e, no canto inferior direito, clique sobre o link Edit Node<\/strong>.<\/p>\n Geralmente você vai precisar incluir um novo aspecto no OSM, ao invés de adicionar a um existente. Dê uma olhada em outros guias para saber mais.<\/em><\/p>\n Crédito: Mike Maron<\/p><\/div>\n No painel da esquerda, clique em All tags e depois no sinal + para adicionar etiquetas para direcionar à imagem no Flickr. Inclua “image” e em seguida o link para a página de fotos do Flickr. Vai aparecer assim:<\/p>\n Clique em Save<\/strong>, inclua uma mensagem que tenha a ver e clique em Save<\/strong> novamente.<\/p>\n Ressalvas<\/strong><\/p>\n Importante: quando você estiver tirando as fotos, confirme que está gravando qual foto vai com qual objeto! Pode ficar confuso se houver muitas delas.<\/p>\n O portal do OpenStreetMap mostra uma visão geral dos dados que você incluir. O OSM é poderoso porque permite que você visualize os dados e os utilize da maneira que quiser. Este passo é sobre como extrair os dados do OSM e usá-los em outra ferramenta.<\/p>\n Credito: MIkel Maron<\/p><\/div>\n Abra o Overpass Turbo<\/a> com a opção de procurar pelos códigos que contenham a chave “image”. Você pode encontrar links para outras etiquetas explorando o TagInfo<\/a>, uma outra ferramenta ótima que vou abordar numa próxima oportunidade.<\/em> Essa opção de página que você abriu tem dois painéis: à esquerda o “Query” e à direita o “Map”. Procure e navegue pelo mapa até a região onde seus itens estão localizados. No nosso caso é “Nairobi”.<\/p>\n A pergunta para conseguir extrair os dados pode ficar complicada; você verá as informações da tela à esquerda, algo que se parece mais ou menos como:<\/p>\n Agora, clique em Run<\/strong>. O programa Overpass vai executar por alguns segundos e depois mostrar os resultados no mapa. Você pode clicar sobre os pontos para obter mais informações de cada item. Agora, clique no menu Export<\/strong>, depois no painel Data<\/strong> e finalmente em GeoJSON<\/strong>.Isso deve ser o gatilho para o download dos resultados e a exposição dos resultados na caixa de diálogo (alguns navegadores não farão download automaticamente, então copie e cole o GeoJSON do diálogo num arquivo e salve). Preste atenção na localização do arquivo GeoJSON, pois vamos precisar dele no próximo passo.<\/p>\n Para fazer o nosso mapa, precisamos de não somente links para o Flickr para as imagens que baixamos, mas também de um link para a visualização prévia da imagem em si. O GeoJSON Flickr Groomer<\/a>é uma ferramenta simples para criar estes links.<\/p>\n Credito: Mikel Maron<\/p><\/div>\n Abra o arquivo GeoJSON que você baixou do Overpass Turbo no seu editor de texto. Copie todo o conteúdo e cole na primeira caixa de texto. Clique aqui para executar<\/strong>, depois em Download groomed-geojson.json<\/strong>. Preste atenção na localização do arquivo GeoJSON, pois vamos precisar no passo final.<\/p>\n O TileMill é uma ferramenta para desenhar mapas. Ele oferece muitos recursos, então dê uma olhada no Crash Course e outros guias no site do TileMill. Instale o TileMill<\/a>,inicie e crie um novo projeto; desmarque a opção de dados padrão (Default<\/strong>). Agora, abaixo, à esquerda, clique no botão Layers<\/strong> e depois em Add Layer<\/strong>. No campo Datasource<\/strong>, navegue e encontre o arquivo GeoJSON que baixou do GeoJSON Flickr Groomer. Clique em Save & Style<\/strong> e deve aparecer um mapa com os seus pontos no lado esquerdo da tela. Para aproximar somente da área em que estão os seus dados, abra novamente a caixa de camadas e clique sobre a lente de aumento próxima à camada selecionada.<\/p>\n Credit: Mikel Maron<\/p><\/div>\n À direita você verá o CartoCSS, que dá o estilo ao seu mapa. Queremos fazer algumas pequenas mudanças, deixando o fundo transparente (por padrão, é azul-marinho). Aqui está como o CartoCSS aparece:<\/p>\n Agora, inclua Interatividade<\/strong> com a caixa de diálogo, que pode ser encontrada ao clicar sobre a pequena mão no kit de ferramenta, na parte inferior esquerda. Clique em Full<\/strong>. Aqui você pode especificar o que aparece quando você clia sobre um ponto. Todas as etiquetas dessas características do OSM estão disponíveis, você as verá na lista na parte de baixo da caixa, na parte “Mustache”. Nós deixamos o conteúdo como o abaixo, para mostrar o nome da característica mais uma foto relacionada.<\/p>\n O mapa está pronto para ser compartilhado! Registre-se para uma conta gratuita no MapBox<\/a>. Depois, de volta ao TileMill, clique na opção Export->Upload <\/strong>acima, à direita, configure as informações para upload (tente diminuir o tamanho do arquivo que vai subir) e Upload<\/strong>. Você pode ver o progresso do processo de exportar e subir o arquivo, e então terá um link para o mapa.<\/p>\n Aqui está o nosso<\/a>!<\/p>\nSubir fotos para o Flickr<\/a><\/h2>\n
\n
\n<\/em><\/p>\n![\"Credit:](\"https:\/\/geojournalism.org\/wp-content\/uploads\/2013\/08\/9508348007_2c645cceeb_b.jpg\")
<\/a><\/strong> .<\/span><\/p>\n
https:\/\/www.flickr.com\/photos\/mikel_maron\/9420814521\/\r\nhttps:\/\/farm4.staticflickr.com\/3673\/9420814521_f71924dd4e.jpg<\/code><\/pre>\nEditar com OpenStreetMap<\/a><\/h2>\n
\n
![\"Credit:](\"https:\/\/geojournalism.org\/wp-content\/uploads\/2013\/08\/9511330104_a4bdec07e4_b.jpg\")
<\/a> image=https:\/\/www.flickr.com\/photos\/mikel_maron\/9420814521\/<\/pre>\n
Extração com Overpass Turbo<\/a><\/h2>\n
\n
![\"Crédito:](\"https:\/\/geojournalism.org\/wp-content\/uploads\/2013\/08\/9508838929_56cae156ed_b.jpg\")
<\/a>{{key=image}}\r\n{{type=node}}<\/pre>\nPreparar o GeoJSON<\/a><\/h2>\n
\n
![\"Credit:](\"https:\/\/geojournalism.org\/wp-content\/uploads\/2013\/08\/9628249541_81308bae87_b.jpg\")
<\/a>Faça um Mapa com TileMill<\/a><\/h2>\n
\n
![\"Crédito:](\"https:\/\/geojournalism.org\/wp-content\/uploads\/2013\/08\/9511708544_e5c3d10335_b.jpg\")
<\/a>Map {\r\nbackground-color: transparent;\r\n}\r\n\r\n#images {\r\nmarker-width:6;\r\nmarker-fill:#f45;\r\nmarker-line-color:#813;\r\nmarker-allow-overlap:true;\r\n}<\/pre>\n{{{name}}}\r\n<\/a><\/pre>\n
Resultados e seu desafio<\/a><\/h2>\n
![\"Crédito:](\"https:\/\/geojournalism.org\/wp-content\/uploads\/2013\/08\/9511711840_3d97a64423_b.jpg\")
<\/a>
\r\n\t\t\t