1. 製品
  2.   画像
  3.   Node.js
  4.   StaticMaps
 
  

Node.js で静的マップを作成するためのオープンソース ライブラリ

主要な Node.js ライブラリを使用すると、オープン ソース JS API を介して、静的マップを生成できるほか、位置の追跡、地理データの表示、視覚的なコンテキストの提供などが可能になります。

ソフトウェア開発者は、ワークフローを効率化し、アイデアを実現するための革新的なツールやテクノロジーを常に探しています。マッピングと地理空間開発の世界で、大きな注目を集めているツールの 1 つが、Stephan Georg が開発したオープンソース ライブラリの StaticMaps です。これは、ソフトウェア開発者が静的マップ画像を簡単に生成できるように設計されたオープンソースの Node.js ライブラリです。場所の追跡、地理データの表示、または単に視覚的なコンテキストの提供のためにマップを必要とするアプリケーションを構築する場合でも、StaticMaps は、Leaflet や Google マップなどのインタラクティブ マップ ライブラリを必要とせずに、高品質でカスタマイズ可能なマップを作成するためのシンプルでありながら強力な方法を提供します。シンプルな統合と強力なカスタマイズ オプションを備えた StaticMaps は、効率的な地理的視覚化を求める開発者にとって貴重なツールです。

StaticMaps は、基本的に、場所、ズーム レベル、マーカー、ルートの線など、ユーザーが指定したパラメーターに基づいてマップ画像を生成します。動的でインタラクティブなマップとは異なり、このライブラリは、Web アプリケーションに埋め込んだり、他の用途にエクスポートしたりできる非インタラクティブな画像を作成します。このため、このライブラリは、インタラクティブなマップが不要で、帯域幅、API 呼び出し、複雑さを軽減したい場合に最適です。このライブラリは OpenStreetMap (OSM) タイルで動作するため、オープンソースで無料で使用でき、独自のシステムや高価な API に依存せずに使用できます。豊富なドキュメントとカスタマイズ可能なオプションを備えた StaticMaps は、マッピングおよび地理空間アプリケーションを次のレベルに引き上げたい開発者にとって最適な選択肢です。

Previous Next

StaticMaps を使い始める

StaticMaps をインストールするには、NPM を使用することをお勧めします。スムーズにインストールするには、次のコマンドを使用してください。

NPM 経由で StaticMaps をインストールする

npm i staticmaps

Node.js でのカスタマイズ可能なマップ生成

オープンソースの StaticMaps ライブラリの主な機能の 1 つは、Node.js アプリケーション内で高度にカスタマイズ可能なマップを生成できることです。ソフトウェア開発者は、画像のサイズ、中心座標、ズーム レベル、タイル レイヤーなどを指定できます。これらのパラメーターにより、開発者はマップの外観を細かく制御できます。次のコード例では、マップはドイツのベルリンを中心に配置され、ズーム レベルは 12、画像サイズは 800x600 ピクセルです。アプリケーションのニーズに応じて、これらのパラメーターを簡単に調整できます。

Node.js アプリ内で基本マップを生成する方法

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 アプリケーション内で特定の場所を示すマーカーを簡単に追加できます。次の例は、マップ上の場所にカスタム マーカー (外部画像を使用) を追加する方法を示しています。マーカーのサイズと位置を指定できるほか、さまざまな場所に異なるアイコンを使用できます。

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 アプリケーション内でこれを実現する方法を示す例を次に示します。

JavaScript API 経由でマップを JPEG 形式で保存する方法

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

ルートや境界を描くためのポリライン

ポリラインは、マップ上のパスや境界を視覚化するために不可欠です。StaticMaps を使用してポリラインを描画できるため、配送サービスやフィットネス トラッキング アプリなど、ルートを表示するアプリケーションに最適です。次の例では、ルートを表すために複数の座標間に赤いポリラインが描画されています。ポリラインの色と幅は、アプリケーションのスタイルに合わせて簡単に調整できます。

Node.js 環境内でマップにポリラインを追加する方法

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