Node.js'de Statik Harita Oluşturma için Açık Kaynaklı Kütüphane

StaticMaps ile Başlarken

StaticMaps'i kurmanın önerilen yolu NPM kullanmaktır. Sorunsuz bir kurulum için lütfen aşağıdaki komutu kullanın.

npm i staticmaps 

Node.js'de Özelleştirilebilir Harita Oluşturma

Açık kaynaklı StaticMaps kütüphanesinin temel özelliklerinden biri, Node.js uygulamaları içinde son derece özelleştirilebilir haritalar oluşturma yeteneğidir. Yazılım Geliştiricileri, görüntü boyutlarını, merkez koordinatlarını, yakınlaştırma seviyelerini, döşeme katmanlarını ve çok daha fazlasını belirleyebilir. Bu parametreler, geliştiricilere haritanın görünümü üzerinde ayrıntılı kontrol sağlar. Aşağıdaki kod örneğinde, harita 12 yakınlaştırma seviyesi ve 800x600 piksel görüntü boyutuyla Berlin, Almanya etrafında merkezlenmiştir. Bu parametreleri uygulamanızın ihtiyaçlarına göre kolayca ayarlayabilirsiniz.

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'de Konumları Göstermek İçin İşaretleyiciler

StaticMaps, bir haritaya işaretleyiciler ekleme olanağı sağlar. İşaretleyiciler, ilgi çekici noktalar, kullanıcı konumları veya diğer önemli noktalar gibi belirli konumları vurgulamak için kullanışlıdır. Açık kaynaklı StaticMaps kitaplığı, yazılım geliştiricilerinin Node.js uygulamaları içinde belirli bir konumu göstermek için işaretleyiciler eklemesini kolaylaştırır. Aşağıdaki örnek, haritadaki bir konuma özel işaretleyicinin (harici bir resim kullanarak) nasıl ekleneceğini gösterir. İşaretleyicinin boyutunu ve konumunu belirtebilir ve ayrıca çeşitli konumlar için farklı simgeler kullanabilirsiniz.

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

Birden Fazla Çıktı Formatı Desteği

StaticMaps kitaplığı, çıktı formatı olarak öncelikle PNG'yi destekler, ancak altta yatan görüntü oluşturma kitaplığı (Sharp), görüntüleri JPEG, GIF veya hatta PDF gibi çeşitli diğer popüler dosya formatlarına dönüştürmenize olanak tanır. Bu, haritaları çeşitli belge veya medya türlerine entegre ederken kullanışlı olabilir. Haritayı kaydederken yalnızca dosya uzantısını değiştirmeniz gerektiğinden formatlar arasında geçiş yapmak basittir. İşte Node.js uygulamaları içinde bunu nasıl başaracağınızı gösteren bir örnek.

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

Rotalar veya Sınırlar Çizmek İçin Çoklu Çizgiler

Çoklu çizgiler, bir haritada yolları veya sınırları görselleştirmek için olmazsa olmazdır. Çoklu çizgiler çizmek için StaticMaps'i kullanabilirsiniz; bu da teslimat hizmetleri veya fitness takip uygulamaları gibi rotaları görüntüleyen uygulamalar için harika bir seçimdir. Aşağıdaki örnek, bir rotayı temsil etmek için birkaç koordinat arasına kırmızı bir çoklu çizginin çizildiğini gösterir. Çoklu çizginin rengini ve genişliğini uygulamanızın stiline uyacak şekilde kolayca ayarlayabilirsiniz.

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