Os aplicativos da Web se beneficiaram muito com a inclusão de mapas, fornecendo aos usuários informações valiosas baseadas em localização. Os mapas transformaram a nossa interação com o mundo, desde navegar em lugares desconhecidos até descobrir restaurantes próximos. Como resultado, a integração de mapas em websites tornou-se cada vez mais popular nos últimos tempos. No entanto, conceber mapas que sejam funcionais e fáceis de utilizar pode representar um desafio, especialmente para aqueles que não têm experiência neste domínio. Neste artigo, compartilharei dicas úteis sobre como criar mapas eficazes em seu navegador. Pilha de tecnologia Vamos discutir tecnologias. Ao trabalhar com mapas, normalmente usamos três camadas: Renderização da interface do usuário, que inclui botões e formulários. Em nossa pilha, o React desempenha essa função; Renderizando o mapa e permitindo a interação do usuário. Usamos Mapbox para isso; Buscando dados do servidor, como informações sobre marcadores ou polígonos. Para recuperar dados, usamos o recurso de busca integrado do navegador. Vamos revisar cada item para entender melhor nossa pilha de tecnologia ao trabalhar com mapas. Reagir O biblioteca permite que você trabalhe com elementos de página de maneira conveniente e eficiente. Foi desenvolvido pelo Facebook para uso próprio e inclui vários componentes como botões, formulários e outros elementos interativos nas páginas. Por exemplo, o Facebook criou um para comparar rapidamente diferentes estados. Reagir algoritmo de reconciliação Como alterar elementos de uma página é a operação mais cara para um navegador, é essencial fazê-lo da forma mais eficiente possível. Para resolver esse problema, os engenheiros do Facebook desenvolveram a biblioteca React, que permite alterações rápidas e diretas nos elementos de uma página. Além de fornecer mudanças rápidas de estado em uma página, o React nos permite fazer isso de forma declarativa, sem trabalhar diretamente com elementos DOM. Em vez disso, usamos uma abstração, geralmente , que se parece com HTML. Vamos considerar um exemplo: JSX // It's our state. Is the user our friend or not? // false by default const [isFriend, setIsFriend] = useState(false) // Depending on the state, we show the text on the button const buttonText = isFriend ? 'Your my Friend' : 'Add as Friend' // There is JSX, syntax for UI // In this case, we display a button, when clicked, we change the state return ( <button onClick={() => setIsFriend(true)}>{buttonText}</button> ) É possível aninhar componentes com elementos DOM comuns, como formulários, botões e entradas na parte inferior da hierarquia. Ao montar esses elementos simples, podemos criar outros mais complexos, como um formulário completo: const Form = () => ( <form> <input name="Email"/> <input name="Password"/> </form> ) const App = () => ( <main> <h1>My form!</h1> <Form /> </main> ) Como o React nos auxilia no contexto dos mapas? Como o mapa da página é interativo, semelhante a um botão ou formulário, pretendemos otimizar sua renderização e interação por meio de eventos como cliques no mapa. O React pode ajudar a alcançar essa otimização. Aqui está um exemplo de como funciona: // Use React to render the map with different event handlers // and render markers return ( <BaseMap onInitMap={() => console.log('I am alive!')} onClickMap={() => console.log('Click!')} onDestroyMap={() => console.log('Oh no!')} > <ClustersMarkers /> <PostsMarkers /> <ListingsMarkers /> </BaseMap> ) Ao trabalhar com React, é fundamental lembrar que ele permite a manipulação eficiente dos elementos da página, mudanças rápidas e interação com eles por meio de eventos. Isso é conseguido por meio de uma abstração semelhante ao HTML, facilitando a criação de componentes complexos a partir de componentes mais simples. Caixa de mapas Agora, vamos discutir o mapa em si. Criar e usar mapas pode ser um desafio, e apenas algumas empresas de produtos conseguem projetar mapas do zero. Normalmente, a maioria das pessoas confia em bibliotecas pré-fabricadas com uma API fácil de usar que foi experimentada e testada. Vários provedores de mapas dinâmicos estão disponíveis, incluindo Google Maps, Leaflet, Bing Maps, Mapbox e muito mais. No entanto, vamos nos concentrar em devido aos seus amplos recursos e política de preços justos. Por exemplo, o Google Maps cobra para 100 mil visualizações de mapas por mês, enquanto o Mapbox cobra apenas . Além disso, o Mapbox oferece acesso gratuito para até 50 mil visualizações de mapas por mês. Caixa de mapas US$ 700 US$ 250 Ofertas de caixa de mapas , uma ferramenta frequentemente comparada ao Photoshop para mapas. Com esta ferramenta, os designers podem criar estilos personalizados, ocultar elementos desnecessários do mapa e remover exibições de casas. Um de seus benefícios é a capacidade de aumentar a visibilidade de . Outra vantagem é a oportunidade de experimentar estilos de mapas em cores corporativas. No entanto, é essencial considerar a experiência do usuário e manter uma paleta de cores familiar, incluindo grama verde e água azul. A melhor parte do Mapbox Studio é que ele simplifica o processo de design de mapas, eliminando a necessidade de desenvolvimento e transferência de requisitos, reduzindo, em última análise, o custo de trabalhar com mapas. Estúdio Mapbox Pontos de interesse Além disso, Mapbox fornece um que pode converter endereços em coordenadas ou vice-versa, simplificando o processo de localização de pontos em um mapa. No entanto, a ferramenta pode ser insuficiente, dificultando determinados projectos. Mapbox coleta dados de , como governos, iniciativas de dados abertos como o OpenStreetMap e empresas privadas. ferramenta de geocodificação cobertura mundial inúmeras fontes Mapbox oferece uma variedade de , Apesar de poderia beneficiar de alguma melhoria. Por exemplo, ao incorporar a funcionalidade do marcador, os exemplos podem ser mais informativos do que a documentação. Além disso, podem surgir desafios ao mesclar vários componentes, como clusters de marcadores, carregamento de dados personalizados, normalização e alterações de estado de marcadores. exemplos práticos documentação Vamos revisitar os mapas do Mapbox. O que faz o fazer? API Mapbox Inicializa o mapa em um elemento HTML da página; Carrega e renderiza imagens que compõem o mapa; Ele desenha elementos adicionais, como marcadores, usando GeoJson como dados de entrada; Ele gera eventos, como cliques ou alterações de zoom, que podem ser manipulados. Vamos dar uma olhada em cada um desses itens. Mapbox é especializado em renderização de mapas usando blocos. Os blocos são pequenas imagens quadradas que constituem o mapa maior. O tamanho padrão de um bloco é 512x512 pixels e pode ser . os blocos são usados para exibir estradas, edifícios, pontos de interesse (PoI) e muito mais. Eles podem ter estilo dinâmico, são leves e permitem uma interação suave com o mapa. os blocos, por outro lado, são usados para exibir imagens de satélite. vetorial ou raster Vetor Raster Só para você saber, o Mapbox Studio nos permite escolher os dados específicos que queremos incluir nos blocos do mapa. Essas peças são então colocadas em um , que é um elemento DOM especial no navegador que exibe imagens e outros elementos gráficos na web. Para se ter uma ideia, é semelhante à forma como os documentos são exibidos em uma tela no Google Docs. tela <canvas width="100" height="100" /> Mapbox cuida do carregamento, inserção e atualização de blocos. Basta especificar onde queremos que o mapa seja exibido e as condições iniciais, como o nível de zoom ou as coordenadas do mapa. Para usar o Mapbox, você precisará de um , que é uma chave exclusiva que pode ser encontrada em sua conta Mapbox. Para configurar um mapa básico, aqui está um exemplo rápido, mas para mais informações, confira o oferecido: token de acesso link mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; const map = new mapboxgl.Map({ container: 'map', // we can use an Id or an element style: 'mapbox://styles/mapbox/streets-v11', // URL for styles center: [-74.5, 40], // initial coordinates [lng, lat] zoom: 9, // initial zoom }); Depois disso, obteremos um mapa na página em um elemento com o id ‘map’. Para fornecer mais informações aos usuários no mapa, muitas vezes exibimos a localização de um determinado estabelecimento ou os limites de uma área específica. Para conseguir isso, usamos um formato de dados específico chamado e instrua o Mapbox sobre como exibir esses dados. GeoJSON GeoJSON é o formato padrão para armazenar estruturas geográficas em mapas. Ele pode armazenar vários tipos primitivos que descrevem objetos geográficos, como endereços, locais, ruas, rodovias, fronteiras, países, estados e combinações destes, conhecidos como multipartes. GeoJSON foi introduzido em 2008 e é representado assim: { "type": "Feature", // also can be FeatureCollection, it's collection of Feature "geometry": { "type": "Point", // also can be LineString, Polygon, MultiPolygon "coordinates": [125.6, 10.1] // for other types you can use Array with coordinates }, "properties": { // it's metadata, we can you that to show something on the map "name": "Dinagat Islands" } } Vamos falar sobre o sistema de coordenadas usado no Mapbox. Por padrão, o Mapbox emprega , que é uma forma de projetar a Terra sobre uma superfície plana para trabalhar ladrilhos. Isso é conhecido como Web Mercator e é o padrão para mapas online. No entanto, ao lidar com dados sobre marcadores e polígonos, utiliza um sistema de coordenadas diferente chamado . Este sistema depende da latitude e longitude para descrever as coordenadas do elipsóide da Terra. Mapbox e outros provedores de mapas convertem automaticamente coordenadas de EPSG 4326 para EPSG 3857. Se precisarmos trabalhar com diferentes , podemos usar o método . EPSG 3857 EPSG 4326 projeções map.setProjection Agora, discutiremos como exibir GeoJSON no mapa. Mapbox oferece duas entidades que consideraremos úteis: — Esta é a semente de dados. Podemos criar uma nova fonte com dados GeoJSON e configurá-la, por exemplo, para gerar um ID para cada recurso da coleção de recursos. Fonte — Esta é a representação dos dados. Podemos exibir os dados da fonte de diferentes maneiras, como mostrar limites. Camada Para exibir polígonos ou marcadores no mapa, devemos recuperar os dados no formato GeoJson do servidor. Em seguida, criamos uma fonte, inserimos os dados nela e conectamos à camada necessária. const geoJsonFeature = { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [ [-67.13734, 45.13745], [-66.96466, 44.8097], [-68.03252, 44.3252], [-67.13734, 45.13745] ] } } // Create source with our data map.addSource('ourSource', { 'type': 'geojson', 'data': geoJsonFeature }); // Add layer for background map.addLayer({ 'id': 'background', 'type': 'fill', 'source': 'ourSource', // название нашего source 'layout': {}, 'paint': { 'fill-color': '#0080ff', 'fill-opacity': 0.5 } }); // Add layer for border map.addLayer({ 'id': 'border', 'type': 'line', 'source': 'ourSource', 'layout': {}, 'paint': { 'line-color': '#000', 'line-width': 3 } }); Depois de executar este código, obtemos o resultado: Para saber mais sobre este tópico, você pode consultar o fornecido pela Mapbox. Neste tutorial, cobrimos o processo de inicialização do mapa e apresentação de nossos dados. A seguir, exploraremos como lidar com eventos como clicar, arrastar e aplicar zoom. Por exemplo, podemos usar o Mapbox para monitorar eventos e exibir as coordenadas no console conforme o usuário move o cursor no mapa. Para conseguir isso, simplesmente chamamos o método com o tipo de evento que desejamos, semelhante à forma como trabalhamos com elementos DOM. documentação on map.on('mousemove', (e) => { console.log(JSON.stringify(e.point)); }); // Result: {"x":330,"y":49} Em resumo, o que precisamos lembrar? Mapbox nos permite exibir um mapa, desenhar nossos dados sobre ele e processar eventos do mapa. Ao mesmo tempo, o Mapbox se encarrega de carregar e exibir imagens (tiles). Buscar Uma palavra sobre . Já vimos como renderizar dados em um mapa, mas primeiro precisamos recuperá-los do servidor. Quando solicitamos dados dinamicamente do servidor em segundo plano sem recarregar a página, chamamos essa abordagem (“ síncrono ML”). Existem muitas ferramentas para carregar dados de forma assíncrona do servidor, como Axios ou XMLHttpRequest (nativo). buscar AJAX Um JavaScript e X O que lembrar? Recuperamos dados do servidor e existem muitas bibliotecas para isso, mas usaremos fetch. A seguir, veremos como fazemos isso especificamente ao trabalhar com mapas, pois existem nuances. Reagir + Mapbox Agora vamos ver como as tecnologias descritas acima funcionam juntas. Primeiro, recuperaremos os dados para exibir o polígono usando fetch. Em seguida declararemos a inicialização do mapa e, após carregá-lo, adicionaremos o polígono ao mapa. Você também pode encontrar um exemplo prático no oferecido. link const useFetch = () => { /* Our data { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [ [ [-67.13734, 45.13745], [-68.03252, 44.3252], [-68.90478, 47.18479], [-67.13734, 45.13745], ] ] } } */ const [data, setData] = useState(null) useEffect(() => { fetch('https://our-api.com/polygon') .then(response => response.json()) .then(setData) .catch(e => { console.error(e) }) }, [setData]) return { data } } const BaseMap = () => { // Use the hook to fetch data const { data } = useFetch(GET_REGION); // Map instance const map = useRef(null); // DOM element const mapContainer = useRef(null); // Main logic - init the map and add the event useEffect(() => { if (map.current) { return; // initialize map only once } mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; map.current = new mapboxgl.Map({ container: mapContainer.current, style: 'mapbox://styles/mapbox/light-v10', // style URL (it's Mapbox's core style) center: [-68.137343, 45.137451], // starting position zoom: 5 // starting zoom }); // Handle event map.on('load', () => { const sourceId = 'source-region' // Add a data source containing GeoJSON data map.addSource(sourceId, { 'type': 'geojson', 'data': data.region // our data from Apollo }); // Add a new layer to visualize the polygon map.addLayer({ 'id': 'background', 'type': 'fill', 'source': sourceId, // reference the data source 'paint': { 'fill-color': '#0080ff', // blue color fill 'fill-opacity': 0.5 } }); // Add a black outline around the polygon map.addLayer({ 'id': 'outline', 'type': 'line', 'source': sourceId, 'paint': { 'line-color': '#000', 'line-width': 3 } }); }); }); return <div ref={mapContainer} />; } Conclusão Analisamos a pilha de tecnologia que sustenta nossa arquitetura futura. No artigo a seguir, discutiremos os princípios que ajudam a projetar uma arquitetura de mapas, como obter o máximo baixo acoplamento e alta coesão de módulos e como manter e desenvolver um sistema de mapas escalável. Muito obrigado pela sua atenção! Tenha um ótimo dia.
