1. Produk
  2.   Gambar
  3.   Node.js
  4.   StaticMaps
 
  

Pustaka Sumber Terbuka untuk Pembuatan Peta Statis di Node.js

Pustaka Node.js Terkemuka memungkinkan untuk Menghasilkan Peta Statika serta Melacak Lokasi, Menampilkan Data Geografis, Menyediakan Konteks Visual, dan banyak lagi melalui API JS Sumber Terbuka.

Sebagai pengembang perangkat lunak, Anda terus mencari alat dan teknologi inovatif untuk memperlancar alur kerja dan mewujudkan ide Anda. Dalam dunia pemetaan dan pengembangan geospasial, salah satu alat yang telah mendapatkan perhatian signifikan adalah StaticMaps, pustaka sumber terbuka yang dikembangkan oleh Stephan Georg. Ini adalah pustaka Node.js sumber terbuka yang dirancang untuk membantu pengembang perangkat lunak membuat gambar peta statis dengan mudah. ​​Baik Anda sedang membangun aplikasi yang membutuhkan peta untuk melacak lokasi, menampilkan data geografis, atau sekadar menyediakan konteks visual, StaticMaps menyediakan cara yang sederhana namun ampuh untuk membuat peta berkualitas tinggi yang dapat disesuaikan tanpa memerlukan pustaka peta interaktif seperti Leaflet atau Google Maps. Dengan integrasi sederhana dan opsi penyesuaian yang ampuh, ini adalah alat yang berharga bagi pengembang yang mencari visualisasi geografis yang efisien.

Pada intinya, StaticMaps membuat gambar peta berdasarkan parameter yang diberikan oleh pengguna, seperti lokasi, tingkat zoom, penanda, dan bahkan garis untuk rute. Tidak seperti peta interaktif yang dinamis, ini membuat gambar non-interaktif yang dapat disematkan ke dalam aplikasi web atau diekspor untuk penggunaan lain. Hal ini menjadikan pustaka ini ideal untuk kasus penggunaan yang tidak memerlukan peta interaktif, dan Anda ingin menghemat bandwidth, panggilan API, dan kompleksitas. Pustaka ini bekerja dengan petak OpenStreetMap (OSM), menjadikannya sumber terbuka dan gratis untuk digunakan, tanpa bergantung pada sistem berpemilik atau API yang mahal. Dengan dokumentasinya yang luas dan opsi yang dapat disesuaikan, StaticMaps merupakan pilihan yang sangat baik bagi pengembang yang ingin membawa aplikasi pemetaan dan geospasial mereka ke tingkat berikutnya.

Previous Next

Memulai StaticMaps

Cara yang direkomendasikan untuk menginstal StaticMaps adalah menggunakan NPM. Gunakan perintah berikut untuk instalasi yang lancar.

Instal StaticMaps melalui NPM

npm i staticmaps 

Pembuatan Peta yang Dapat Disesuaikan di Node.js

Salah satu fitur utama pustaka StaticMaps sumber terbuka adalah kemampuannya untuk membuat peta yang sangat dapat disesuaikan di dalam aplikasi Node.js. Pengembang Perangkat Lunak dapat menentukan dimensi gambar, koordinat pusat, tingkat pembesaran, lapisan petak, dan banyak lagi. Parameter ini memberi pengembang kendali yang lebih rinci atas tampilan peta. Dalam contoh kode berikut, peta tersebut berpusat di sekitar Berlin, Jerman, dengan tingkat pembesaran 12 dan ukuran gambar 800x600 piksel. Anda dapat dengan mudah menyesuaikan parameter ini berdasarkan kebutuhan aplikasi Anda.

Bagaimana Cara Membuat Peta Dasar di dalam Aplikasi 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));

Penanda untuk Menunjuk Lokasi di Node.js

StaticMaps menyediakan kemampuan untuk menambahkan penanda ke peta. Penanda berguna untuk menyorot lokasi tertentu, seperti tempat menarik, lokasi pengguna, atau tempat penting lainnya. Pustaka StaticMaps sumber terbuka memudahkan pengembang perangkat lunak untuk menambahkan penanda guna menunjukkan lokasi tertentu di dalam aplikasi Node.js mereka. Contoh berikut menunjukkan cara menambahkan penanda khusus (menggunakan gambar eksternal) ke lokasi di peta. Anda dapat menentukan ukuran dan posisi penanda, serta menggunakan ikon yang berbeda untuk berbagai lokasi.

Bagaimana Cara Menambahkan Penanda ke Peta untuk Lokasi Titik di dalam Aplikasi 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));

Dukungan Berbagai Format Output

Perpustakaan StaticMaps terutama mendukung PNG sebagai format output, tetapi pustaka pembuatan gambar yang mendasarinya (Sharp) memungkinkan Anda mengonversi gambar ke berbagai format file populer lainnya seperti JPEG, GIF, atau bahkan PDF. Ini dapat berguna saat mengintegrasikan peta ke berbagai jenis dokumen atau media. Beralih antarformat mudah dilakukan, karena Anda hanya perlu mengubah ekstensi file saat menyimpan peta. Berikut adalah contoh yang menunjukkan cara melakukannya di dalam aplikasi Node.js.

Bagaimana Cara Menyimpan Peta dalam Format JPEG melalui JavaScript API?

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

Polyline untuk Menggambar Rute atau Batas

Polyline sangat penting untuk memvisualisasikan jalur atau batas pada peta. Anda dapat menggunakan StaticMaps untuk menggambar polyline, menjadikannya pilihan yang tepat untuk aplikasi yang menampilkan rute, seperti layanan pengiriman atau aplikasi pelacakan kebugaran. Contoh berikut menunjukkan, polyline merah digambar di antara beberapa koordinat untuk mewakili rute. Anda dapat dengan mudah menyesuaikan warna dan lebar polyline agar sesuai dengan gaya aplikasi Anda.

Bagaimana Cara Menambahkan Polyline ke Peta di dalam Lingkungan 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));
 Indonesia