Tecnologia de mapa-múndi ultracompacto (World Map)

 (github.com/tinyworldmap)
9 pontos por GN⁺ 2024-04-22 | 1 comentários | Compartilhar no WhatsApp
  • tinyworldmap é um mapa-múndi para apps web offline-first e de baixa largura de banda, projetado para ser usado com o Leaflet
  • Suporta todos os níveis de zoom, e a versão mais completa tem 450 KB com gzip; a renderização no cliente foi perfilada e testada para não apresentar atraso perceptível mesmo em celulares modestos de 10 anos atrás
  • O mapa padrão exibe as 10.000 cidades mais populosas adicionadas ao OpenStreetMap, incluindo, no momento da escrita, cidades e municípios com população de 48.000 habitantes ou mais
  • Há duas formas de uso: como mapa-base que substitui os tiles do OpenStreetMap, ou como mapa de fallback que, quando offline, troca as requisições de tiles do OSM por tiles gerados localmente
  • Os dados do mapa seguem a licença ODBL, como o OpenStreetMap, e é necessário atribuir créditos ao OpenStreetMap e ao tinyworldmap no rodapé do Leaflet ou equivalente

Objetivo e escopo do tinyworldmap

  • tinyworldmap é um mapa-múndi para apps web offline-first e de baixa largura de banda
  • Foi projetado para ser usado com o Leaflet e suporta todos os níveis de zoom
  • A versão mais completa tem 450 KB com gzip e 1,1 MB descompactada
  • A renderização no lado do cliente foi amplamente perfilada e testada em celulares modestos de 10 anos atrás, sem atraso perceptível
  • As demonstrações estão disponíveis em Nightly demo, Stable demo e v3 announcement

Dados do mapa padrão

  • Na configuração padrão, exibe as 10.000 cidades mais populosas adicionadas ao OpenStreetMap
  • No momento da escrita, esse recorte inclui todas as cidades e municípios com população de 48.000 habitantes ou mais

Duas formas de uso no Leaflet

  • Usar como mapa-base

    • Para usar o tinyworldmap como mapa-base do Leaflet, adicione o script de distribuição à tag head
    • O script da versão estável é https://tinyworldmap.com/dist/v3/tiny-world-all-10000.js e inclui todos os dados necessários para exibir o mapa
    • Em vez de uma camada de tiles do Leaflet, adicione L.GridLayer.TinyWorld da seguinte forma
    new L.GridLayer.TinyWorld({maxZoom: 19}).addTo(map)

  • Usar como mapa de fallback offline

    • Em apps web offline-first, armazenar em cache mapas baseados em imagem para todos os níveis de zoom é inviável por causa da quantidade de tiles, e o tamanho total frequentemente chega à escala de terabytes
    • Este repositório fornece um service worker para funcionalidade offline em apps web com mapas
    • Quando o service worker é instalado, o mapa de fallback é pré-carregado
    • As páginas visitadas são armazenadas em cache
    • O mapa-base é excluído do cache
    • Quando o servidor está acessível, os dados em cache não são usados
    • Quando o usuário está offline, o site é servido a partir do cache, e o service worker intercepta as requisições ao servidor de tiles do OSM e gera localmente tiles substitutos com o tinyworldmap
    • Antes de registrar o service worker, é preciso modificar todas as seções marcadas como IMPORTANT dentro dele
    • Após o registro, a atribuição da camada de tiles do Leaflet deve incluir OpenStreetMap e tinyworldmap
    • Hitchmap é um exemplo de app em produção que usa o tinyworldmap como fallback
    • Em um navegador com suporte a service worker, abra o site, aguarde um pouco, desligue a internet e recarregue; o app deve funcionar normalmente com o mapa de fallback
    • A instalação do service worker pode levar algum tempo

Estilo do mapa e mapas personalizados

  • O construtor aceita a opção render para alterar a aparência do mapa
  • A opção style de cada camada é aplicada ao CanvasRenderingContext2D do Canvas
  • Por exemplo, é possível alterar o estilo definindo fillStyle na camada state_borders
let render = {
    state_borders: {
        style: {fillStyle: '#f00'}
    }
}

new L.GridLayer.TinyWorld({maxZoom: 19, render}).addTo(map)
  • Se sua organização precisar de um mapa rodoviário, mapa urbano, mapa em outro idioma ou um mapa com conteúdo personalizado incluindo dados OSM ou não OSM, é possível solicitar um orçamento em business@tinyworldmap.com

Opções de arquivos de mapa menores

  • Versão sem fronteiras

    • tiny-world-cities-10000.js(on) inclui os dados da versão completa, exceto fronteiras estaduais, fronteiras nacionais e linhas costeiras
    • Essa versão reduz 300 KB com gzip e 825 KB descompactada
    • A versão sem fronteiras tem a vantagem de que todos os dados incluídos são precisos
    • As fronteiras nacionais da versão completa não são precisas em níveis altos de zoom, então podem parecer estranhas ao sobrepor formas que se alinham a fronteiras nacionais ou linhas costeiras
    • Nesses casos, a versão sem fronteiras muitas vezes fica melhor

  • Versão sem rótulos de cidades

    • Há dois arquivos sem rótulos de cidades
    • tiny-world-borders.js(on): omite fronteiras estaduais
    • tiny-world-nocities.js(on): mantém fronteiras estaduais
    • Os rótulos de cidades ocupam 410 KB descompactados e 172 KB comprimidos

  • Versões com menos cidades

    • Arquivos com rótulos de cidades também estão disponíveis nas versões com 2.000 e 4.000 cidades
    • Basta trocar 10000 por 2000 ou 4000 no nome do arquivo
    • | Número de cidades incluídas | Critério de população |
    • | --- | --- |
    • | 10.000 | Mais de 48.000 habitantes |
    • | 4.000 | Mais de 137.000 habitantes |
    • | 2.000 | Mais de 287.000 habitantes |

Licença e atribuição

  • Os dados do tinyworldmap seguem a licença ODBL, assim como os dados do OpenStreetMap
  • A ODBL exige atribuição
  • Se configurado conforme as instruções, o rodapé do Leaflet deve incluir a atribuição ao OpenStreetMap e ao tinyworldmap
  • Caso contrário, é necessário adicionar separadamente a atribuição ao OpenStreetMap e ao tinyworldmap

Leituras relacionadas

1 comentários

 
GN⁺ 2024-04-22
Opiniões no Hacker News

  • Gosto da ideia. É bom porque resolve o problema de reduzir o zoom demais e ter que esperar o servidor renderizar o tile do continente que você acabou de pedir.
    Mas não sei bem qual é o caso de uso em que dá para saber a posição relativa de West Bloomfield Township e Waterford Charter Township, subúrbios de Detroit, mas não saber em qual estado ficam nem se os Great Lakes existem.
    Seria melhor usar muito mais dados nas linhas costeiras e muito menos na subdivisão de áreas metropolitanas.

    • A direção é boa, mas acho que os principais acidentes geográficos, como as 100 maiores ilhas, os 50 maiores lagos e os 200 maiores rios, precisam mesmo ser incluídos.
    • O mesmo vale para estradas e ferrovias. Se for um mapa rodoviário para deixar no carro, elas são necessárias, mas fora isso há pouca necessidade de saber a localização das estradas.
      Elas acabam escondendo informações demais que poderiam estar ali.
    • Por curiosidade, cliquei em alguns lugares: Alexandria, na Virginia, nos EUA, aparece do outro lado do rio, e Bahrain ficou bem desastroso.
    • Essa parte foi melhorada na v2.

  • É legal, mas o detalhamento da linha costeira é baixo demais. Algumas cidades do Reino Unido ficam flutuando no mar e, por outro lado, Greenland e Northern Canada ficam com todos os vértices.
    Parece que o nível de detalhe conforme a projeção de Mercator já foi considerado, mas seria bom reduzir a prioridade de regiões onde quase ninguém mora.

    • É um bom projeto. Ao escolher os lugares a incluir, usar também o QRank do Wikidata talvez faça ilhas famosas aparecerem mesmo com população pequena.
      O DB SQLite do QRank também já apareceu no HN tempos atrás.
      [1] https://qrank.wmcloud.org/
      [2] https://github.com/hikeratlas/qrank
    • A proporção entre detalhes de cidades e detalhes de costa está estranhamente inclinada para o lado das cidades. Parece que estão colocando mais cidades do que fronteiras ou linhas costeiras precisas.
      Uma província dos Netherlands aparece separada do território continental do país, como se fosse uma ilha, mas na realidade não é. Só que o mapa sabe o nome de cinco cidades dentro dessa província, e algumas delas quase se sobrepõem.
      Por outro lado, incluir o Afsluitdijk me parece pessoalmente um detalhe desnecessário, mas entendo que seja difícil distinguir por programa o que é terra a ser desenhada e o que é simples infraestrutura marítima.
      Eu deveria abrir um ticket no issue tracker, mas não estou logado no celular, então por enquanto um comentário no HN é o melhor que dá. Se alguém sentir algo parecido, pode usar este comentário como base para sugerir melhorias como ajustar essa proporção, introduzir uma distância mínima entre cidades e reduzir o arquivo total.
    • Por causa disso, o mapa fica quase inutilizável em ilhas ou regiões de arquipélago. Philippines também tem muitas ilhas, mas várias são bem grandes, e mesmo assim o mapa não serve muito bem.
      French Polynesia nem existe no mapa.
    • Foi publicada uma versão nightly que remove os fiordes e coloca mais detalhes em outros lugares. A resolução geral também é mais alta.
      O motivo de isso não ter sido feito originalmente é que, em celulares antigos, especialmente no Firefox for Android, desenhar muitos polígonos podia causar crashes. Depois o procedimento de desenho foi otimizado, mas ainda é preciso cautela.
      [1] https://tinyworldmap.com/beta.html
    • A simplificação é fraca de modo geral. No Caribbean, países inteiros ficaram de fora.
      Isso é algo que deveria ser pego em um controle de qualidade básico.

  • Fiz algo parecido. É offline-first, muito pequeno e baseado em vetores, mas com foco em internacionalização.
    Está disponível em todos os idiomas da ONU. Só que esqueci totalmente o Spanish, então ele ficou de fora; daria para fazer em algumas horas, o que é constrangedor.
    Os nomes de países e cidades usam as denominações oficiais registradas na ONU. Por isso, o nome curto oficial do UK é “United Kingdom of Great Britain and Northern Ireland”.
    https://map.ache.one/en

    • É bom, mas tem bastantes bugs. “Cape town” aparece em South Sudan, enquanto o nome do próprio país não aparece, e Eritrea também está sem nome. O bloco de Somalia está dividido em dois com cores diferentes.
      Desenhar um mapa leve e lidar com internacionalização foi relativamente fácil, porque há várias fontes de dados abertas e bibliotecas.
      A parte realmente difícil é puramente a definição administrativa. Se você tiver dados ligados à maioria dos países, inevitavelmente haverá pontos que não batem com a fonte do mapa, e no fim será preciso criar um mapa personalizado na mão.
      Não há consenso sobre o que é um “país”. Western Sahara é oficialmente um país, mas na prática Morocco o ocupa continuamente; Somalia tem Somaliland e Puntland funcionando de fato como países independentes, mas sem reconhecimento oficial. Greenland, Niue etc. ficam em algum lugar no meio disso.
    • Não encontrei uma explicação de como foi feito, mas o mapa é bonito. Tiny World Maps também tem algo relacionado, mas lá a explicação do modo de produção também não é suficiente.
      Pela minha experiência fazendo isso no nível de países, foi um processo manual cheio de hacks sujos, e a parte mais difícil foi testar se tudo estava correto. Especialmente o nível de generalização adequado e a aparência que as pessoas esperam do mapa da própria região.
      Fico curioso se você acha que vale a pena o esforço de melhorar bastante esse mapa.
    • Não sei se o asterisco significa a maior cidade ou a capital, mas, se for a segunda opção, Tanzania está errada.
      O asterisco está em Dar Es Salaam, mas o rótulo é Dodoma. Dodoma é a capital de fato, mas fica mais para o centro do país.
    • A abreviação “i18n” em si não é muito internacionalizada.

  • Fofo. Antigamente fiz algo parecido, embora não exatamente igual.
    https://web.archive.org/web/20020611095429/http://www.cs.man.ac.uk/~hancockd/CityZen/index.html
    Eram 20 mil segmentos de linha, 3.350 lugares, e tudo junto — incluindo visualizador e quiz — tinha 162 KB.

  • Obrigado pelo feedback. Para explicar o contexto da escolha: até recentemente, o foco principal deste projeto não eram os formatos dos países
    Durante muito tempo, a versão sem fronteiras que estava no README era a única versão, e eu não achava que fosse possível adicionar o mundo inteiro. Mas foi possível
    Publiquei uma versão nightly que remove os fiordes, inclui ilhas muito solicitadas e coloca mais detalhes em outros lugares. No geral, a resolução também é maior
    O motivo de eu não ter feito isso originalmente era que celulares antigos, especialmente no Firefox for Android, podiam travar ao desenhar muitos polígonos. Depois disso, otimizei o procedimento de desenho, mas ainda é preciso cuidado
    [1] https://tinyworldmap.com/beta.html

  • Não tenho certeza se as 10.000 cidades mais populosas são o melhor filtro
    Esse método prioriza cidades de países grandes, e é provável que a maioria das cidades de países pequenos fique de fora
    Deveria haver um filtro auxiliar que incluísse as X principais cidades de cada país. Assim, as principais cidades dos países pequenos também seriam capturadas

    • Também há outras métricas para medir a importância de uma cidade
      Critérios como capital nacional, capital regional, cidade global e centralidade dentro da região poderiam ser úteis para complementar as condições básicas
      Acho que geógrafos e cartógrafos poderiam dar conselhos mais úteis nessa discussão

  • Achei interessante que, ao escolher os 10.000 maiores assentamentos do mundo, o corte desce até 48.000 habitantes
    Ainda estou avaliando se esse número é surpreendente ou não

    • Há muito tempo eu já sabia que, olhando mais ou menos as 100 principais cidades dos EUA por população, o corte cai para algo em torno de 200 mil habitantes
      Mesmo aumentando para 200, ainda fica acima de 100 mil. Daly City, CA, que é a nº 333 segundo a Wikipedia, tem 100.007 habitantes: <https://en.wikipedia.org/wiki/List_of_United_States_cities_b...>
      Essa distribuição de escala, como em muitas outras situações de escalonamento, tende a ser aproximadamente linear em um gráfico log-log
      Na China, é preciso chegar até a 106ª posição antes de aparecer uma cidade com menos de 1 milhão de habitantes. Nos EUA, há apenas 9 cidades desse tipo
      Acabei de verificar a Índia: há 46 cidades com mais de 1 milhão de habitantes; Malegaon, na 100ª posição, tem 471 mil habitantes, e Aurangabad, na 300ª, ainda passa de 100 mil
      Dito isso, “cidade” é uma definição bastante arbitrária. Algumas das maiores cidades do mundo, pelos critérios de outros países, poderiam corresponder a regiões metropolitanas, ou até mesmo a estados ou províncias
      As maiores cidades por área, por outro lado, têm populações muito pequenas. Sermersooq, na Groenlândia, tem 24.148 habitantes e área de 575.300 km², cerca de 144 vezes Rhode Island; entre os estados dos EUA, só Texas e Alaska são maiores. Mesmo Alaska é apenas cerca de 12% maior
      Geografia urbana é uma área complexa, por isso normalmente compara várias escalas e definições em conjunto, como regiões estatísticas metropolitanas, área urbana e população. Isso ajuda a reduzir a arbitrariedade das fronteiras políticas e a refletir melhor a população total e a influência econômica

  • É bastante surpreendente que o tamanho do arquivo seja esse mesmo com fronteiras tão grosseiras
    Parece que o tamanho total dos dados está bem abaixo do ponto de equilíbrio entre utilidade e tamanho do arquivo. Por exemplo, mesmo que fosse duas vezes maior, as fronteiras provavelmente não seriam tão irregulares

    • O arquivo completo tem cerca de 700 KB sem compressão gzip
      Pela descrição de que “a versão completa contém todos os dados, exceto fronteiras e litorais, e isso reduz o tamanho em 200 KB”, cerca de 29% são dados de fronteiras e litorais, e 71% são nomes e localizações de cidades
      Pessoalmente, acho que seria possível remover muitas cidades. Especialmente as cidades sobrepostas entre si, que só aparecem quando se dá zoom suficiente para ver a massa de terra cinza e os nomes das cidades; em vez disso, seria melhor tornar o litoral mais preciso
      Também não sei com que frequência é necessário ter a localização em um mapa-múndi geral. Por exemplo, no site de um ponto de interesse que estou vendo agora, não seria mais comum precisar de um mapa leve com as rodovias e linhas de transporte público ao redor para chegar até lá?
      Se fosse criada uma versão que dividisse toda a Terra em unidades de alguns km², acho que daria para incluir detalhes bastante úteis com um décimo do tamanho. Um mapa global de poucos polígonos também teria usos, como rastreamento da Estação Espacial Internacional, mas isso parece muito mais raro

  • Mesmo que a população seja menor que 40 mil habitantes, capitais devem ser incluídas obrigatoriamente e marcadas com uma estrela de alguma forma

  • Muito legal. É impressionante ver carregar tão rápido no celular
    A ideia de compactar dados espaciais como Paths é muito boa
    Para evitar a licença ODbL, talvez seja melhor usar dados do Natural Earth em vez do OSM
    Seria ótimo também incluir uma ferramenta para converter dados espaciais em Paths