Apresentando o tinyworldmap
- tinyworldmap é um mapa-múndi para web apps com prioridade offline e de baixa largura de banda
- Foi projetado para ser usado com Leaflet e oferece suporte a todos os níveis de zoom
- A versão mais completa tem apenas 300 kB com compressão gzip
- A renderização no lado do cliente foi amplamente perfilada e testada em celulares antigos e de baixo desempenho de 10 anos atrás, sem latência perceptível
- Por padrão, exibe as 10.000 cidades mais populosas adicionadas ao OpenStreetMap
- No momento da escrita, inclui todas as cidades e vilas com população acima de 48.000 habitantes
Como usar o tinyworldmap
Usar como mapa base
- Para usar o tinyworldmap como mapa base do Leaflet, adicione o seguinte à tag
head:
- Esse script inclui todos os dados necessários para exibir o mapa
- Em vez de adicionar uma camada de tiles ao mapa Leaflet, use o seguinte:
new L.GridLayer.TinyWorld().addTo(map)
- O construtor
TinyWorld recebe várias opções: backgroundColor, textFillColor, borderStrokeColor, borderFillColor, borderWidth, textStrokeColor (para destacar o texto do restante), textStrokeWidth, cityFont (por exemplo, "12px Arial"), countryFont, dotColor
- Se
dotColor for especificado, cada cidade será exibida como um ponto. Isso melhora a usabilidade ao usar uma versão reduzida do tinyworldmap sem fronteiras
Usar como mapa de fallback
- Em aplicações web com prioridade offline, é impossível armazenar em cache mapas baseados em imagem para todos os níveis de zoom (o número de tiles é enorme e o tamanho chega à escala de terabytes)
- Este repositório fornece um service worker que pode habilitar funcionalidade offline em um web app
- Depois que o service worker é instalado, o mapa de fallback é pré-carregado. Todas as páginas visitadas são armazenadas em cache, exceto o mapa base
- Enquanto for possível se conectar ao servidor, os dados em cache não serão usados
- Se o usuário estiver offline, o site será servido a partir do cache, e o service worker interceptará as requisições ao servidor de tiles do OSM e gerará localmente tiles substitutos usando o tinyworldmap
- Antes de registrar o service worker, primeiro é necessário modificar todas as seções marcadas como 'IMPORTANT' dentro dele
- Depois de registrado, é obrigatório atribuir corretamente tanto o OpenStreetMap quanto o tinyworldmap na camada de tiles, da seguinte forma:
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© [OpenStreetMap](https://www.openstreetmap.org/copyright), [tinyworldmap](https://www.tinyworldmap.com)'
}).addTo(map);
- Para ver um exemplo de aplicação em produção usando o tinyworldmap como fallback, visite o Hitchmap. Carregue o site em um navegador com suporte a service worker, espere um pouco, desligue a internet e recarregue; o web app deverá continuar funcionando normalmente usando o mapa de fallback. A instalação do service worker pode levar algum tempo
Mapas-múndi ainda menores
- O mapa completo tem 300 K com gzip / 694 K descompactado. Para certos casos de uso, esse tamanho ainda pode ser grande demais
Sem fronteiras
tiny-world-noborders-10000.js(on) contém todos os dados da versão completa, exceto fronteiras e linhas costeiras- A versão com gzip fica 100 k menor, e a versão descompactada 200 k menor
- A versão sem fronteiras não é apenas menor, mas também tem a vantagem de que todos os dados incluídos são precisos
- As fronteiras da versão completa não são precisas em níveis altos de zoom, então podem parecer estranhas ao sobrepor formas alinhadas com fronteiras e linhas costeiras. Nesses casos, a versão sem fronteiras combina melhor
- O estilo padrão é o seguinte
Sem cidades
- Há duas versões sem rótulos de cidades:
tiny-world-nocities.js(on) (mantém os rótulos de países) e tiny-world-borders.js(on) (omite os rótulos de países)
- Os rótulos de cidades ocupam 410 K sem compressão e 172 K comprimidos
Menos cidades
- Por fim, cada arquivo com rótulos de cidades também tem versões com 2.000 e 4.000 cidades incluídas
- Basta trocar
10000 por 2000 ou 4000 no nome do arquivo
| Número de cidades incluídas |
População |
| 10.000 |
> 48.000 |
| 4.000 |
> 137.000 |
| 2.000 |
> 287.000 |
Contratar o tinyworldmap
- Se você precisa de um mapa personalizado (por exemplo, mais detalhado ou em outro idioma), ou de ajuda para implementar funcionalidade offline no seu site, entre em contato pelo e-mail business@tinyworldmap.com
Atribuição
- Assim como os dados do OpenStreetMap, os dados do tinyworldmap são licenciados sob a ODBL e, portanto, exigem atribuição
- Se você seguiu os passos descritos acima, o rodapé do Leaflet já deve incluir a atribuição ao OpenStreetMap e ao tinyworldmap. Caso contrário, adicione o seguinte:
© [OpenStreetMap](https://www.openstreetmap.org/copyright), [tinyworldmap](https://www.tinyworldmap.com)
Opinião do GN⁺
- O tinyworldmap oferece um mapa-múndi leve que pode ser usado offline ou em dispositivos de baixo desempenho. Parece ser uma solução capaz de substituir opções existentes como o OpenStreetMap em certos cenários
- A vantagem é oferecer versões ainda mais leves com exclusão opcional de fronteiras, cidades etc. Também parece bastante versátil por permitir mapas personalizados conforme a necessidade
- Por outro lado, para funcionar offline é necessário implementar detalhes técnicos, como modificar o service worker, então é preciso que o desenvolvedor tenha alguma experiência. Seria bom haver um guia mais detalhado sobre essa parte
- No mercado coreano, muita gente usa APIs de mapa de portais como Naver e Kakao, e se fosse possível integrar com esse tipo de serviço para funcionar offline, parece que surgiriam ainda mais casos de uso
- Como inclui informações das principais cidades do mundo, parece poder ser útil em áreas como viagens e logística. O suporte multilíngue também deve ser um ponto importante
1 comentários
Comentários do Hacker News