Biblioteca de código aberto para criação de mapas estáticos em Node.js

Introdução ao StaticMaps

A maneira recomendada de instalar o StaticMaps é usando o NPM. Use o comando a seguir para uma instalação tranquila.

npm i staticmaps 

Geração de Mapas Personalizáveis ​​em Node.js

Um dos principais recursos da biblioteca StaticMaps de código aberto é sua capacidade de gerar mapas altamente personalizáveis ​​dentro de aplicativos Node.js. Os desenvolvedores de software podem especificar as dimensões da imagem, coordenadas centrais, níveis de zoom, camadas de blocos e muito mais. Esses parâmetros dão aos desenvolvedores controle refinado sobre a aparência do mapa. No exemplo de código a seguir, o mapa é centralizado em Berlim, Alemanha, com um nível de zoom de 12 e um tamanho de imagem de 800x600 pixels. Você pode ajustar facilmente esses parâmetros com base nas necessidades do seu aplicativo.

const StaticMaps = require('staticmaps');

// Create a new instance of StaticMaps with a specified width and height
const map = new StaticMaps({ width: 800, height: 600 });

// Set the map center and zoom level
map.center = [13.404954, 52.520008]; // Coordinates for Berlin
map.zoom = 12;

// Render and save the map as a PNG file
map.render()
  .then(() => map.image.save('basic_map.png'))
  .catch(err => console.error('Error generating map:', err));

Marcadores para apontar locais no Node.js

O StaticMaps fornece a capacidade de adicionar marcadores a um mapa. Os marcadores são úteis para destacar locais específicos, como pontos de interesse, locais de usuários ou outros pontos importantes. A biblioteca StaticMaps de código aberto facilita para desenvolvedores de software adicionar marcadores para apontar um local específico dentro de seus aplicativos Node.js. O exemplo a seguir demonstra como adicionar um marcador personalizado (usando uma imagem externa) a um local no mapa. Você pode especificar o tamanho e a posição do marcador, bem como usar ícones diferentes para vários locais.

// Create a marker object
const marker = {
  coord: [13.405, 52.52], // Berlin coordinates
  img: 'https://path-to-marker-icon.com/marker.png', // Custom marker image
  height: 32,
  width: 32
};

// Add the marker to the map
map.addMarker(marker);

// Render and save the map
map.render()
  .then(() => map.image.save('map_with_marker.png'))
  .catch(err => console.log(err));

Suporte a vários formatos de saída

A biblioteca StaticMaps suporta principalmente PNG como formato de saída, mas a biblioteca de geração de imagens subjacente (Sharp) permite que você converta imagens em vários outros formatos de arquivo populares, como JPEG, GIF ou até mesmo PDF. Isso pode ser útil ao integrar mapas em vários tipos de documentos ou mídia. Alternar entre formatos é simples, pois você só precisa alterar a extensão do arquivo ao salvar o mapa. Aqui está um exemplo que mostra como fazer isso dentro de aplicativos Node.js.

map.render()
  .then(() => map.image.save('output_map.jpg'))  // Saving as a JPEG
  .catch(err => console.log('Error saving as JPEG:', err));

Polilinhas para desenhar rotas ou limites

Polilinhas são essenciais para visualizar caminhos ou limites em um mapa. Você pode usar o StaticMaps para desenhar polilinhas, o que o torna uma ótima opção para aplicativos que exibem rotas, como serviços de entrega ou aplicativos de monitoramento de condicionamento físico. O exemplo a seguir mostra que uma polilinha vermelha é desenhada entre várias coordenadas para representar uma rota. Você pode ajustar facilmente a cor e a largura da polilinha para se adequar ao estilo do seu aplicativo.

// Define a polyline with multiple coordinates
const polyline = {
  coords: [
    [13.405, 52.52], // Starting point in Berlin
    [13.4, 52.51],   // Intermediate point
    [13.42, 52.49]   // Ending point
  ],
  color: '#FF0000', // Red line
  width: 3          // Line width in pixels
};

// Add the polyline to the map
map.addLine(polyline);

// Render and save the map
map.render()
  .then(() => map.image.save('map_with_polyline.png'))
  .catch(err => console.error('Error rendering polyline map:', err));