Бібліотека з відкритим кодом для створення статичних карт у Node.js

Початок роботи зі статичними картами

Рекомендований спосіб встановлення StaticMaps – використання NPM. Будь ласка, використовуйте наступну команду для плавного встановлення.

npm i staticmaps 

Настроювана генерація карт у Node.js

Однією з головних особливостей бібліотеки StaticMaps з відкритим вихідним кодом є її здатність генерувати настроювані карти в програмах Node.js. Розробники програмного забезпечення можуть вказати розміри зображення, координати центру, рівні масштабування, шари плиток і багато іншого. Ці параметри дають розробникам детальний контроль над зовнішнім виглядом карти. У наступному прикладі коду карта зосереджена навколо Берліна, Німеччина, з рівнем масштабування 12 і розміром зображення 800x600 пікселів. Ви можете легко налаштувати ці параметри відповідно до потреб вашої програми.

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));

Маркери для вказівних місць у Node.js

StaticMaps надає можливість додавати маркери до карти. Маркери корисні для виділення певних місць, наприклад визначних місць, місць розташування користувачів або інших важливих місць. Бібліотека StaticMaps з відкритим вихідним кодом дозволяє розробникам програмного забезпечення легко додавати маркери для вказівки на конкретне розташування в їхніх програмах Node.js. У наступному прикладі показано, як додати спеціальний маркер (за допомогою зовнішнього зображення) до місця на карті. Ви можете вказати розмір і положення маркера, а також використовувати різні значки для різних місць.

// 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));

Підтримка кількох вихідних форматів

Бібліотека StaticMaps переважно підтримує PNG як вихідний формат, але базова бібліотека генерації зображень (Sharp) дозволяє конвертувати зображення в інші популярні формати файлів, такі як JPEG, GIF або навіть PDF. Це може бути зручно під час інтеграції карт у різні типи документів чи медіа. Перемикання між форматами просте, оскільки вам потрібно лише змінити розширення файлу під час збереження карти. Ось приклад, який показує, як досягти цього в програмах Node.js.

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

Полілінії для малювання маршрутів або меж

Полілінії необхідні для візуалізації шляхів або меж на карті. Ви можете використовувати StaticMaps для малювання поліліній, що робить його чудовим вибором для додатків, які відображають маршрути, як-от служби доставки або додатки для відстеження фізичної активності. У наведеному нижче прикладі показано, що між декількома координатами накреслено червону ламану лінію для представлення маршруту. Ви можете легко налаштувати колір і ширину полілінії відповідно до стилю вашої програми.

// 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));