Knihovna s otevřeným zdrojovým kódem pro vytváření statických map v Node.js

Začínáme se StaticMaps

Doporučený způsob instalace StaticMaps je pomocí NPM. Pro bezproblémovou instalaci použijte prosím následující příkaz.

npm i staticmaps 

Přizpůsobitelné generování map v Node.js

Jednou z primárních funkcí knihovny StaticMaps s otevřeným zdrojovým kódem je její schopnost generovat vysoce přizpůsobitelné mapy v aplikacích Node.js. Vývojáři softwaru mohou specifikovat rozměry obrázku, souřadnice středu, úrovně přiblížení, vrstvy dlaždic a mnoho dalšího. Tyto parametry dávají vývojářům jemnou kontrolu nad vzhledem mapy. V následujícím příkladu kódu je mapa vycentrována kolem Berlína v Německu s úrovní přiblížení 12 a velikostí obrázku 800 x 600 pixelů. Tyto parametry můžete snadno upravit podle potřeb vaší aplikace.

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

Značky pro umístění polohování v Node.js

StaticMaps poskytuje možnost přidávat do mapy značky. Značky jsou užitečné pro zvýraznění konkrétních míst, jako jsou zajímavá místa, místa uživatelů nebo jiná důležitá místa. Knihovna StaticMaps s otevřeným zdrojovým kódem usnadňuje vývojářům softwaru přidávat značky pro označení konkrétního umístění uvnitř jejich aplikací Node.js. Následující příklad ukazuje, jak přidat vlastní značku (pomocí externího obrázku) k místu na mapě. Můžete určit velikost a polohu značky a také použít různé ikony pro různá umístění.

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

Podpora více výstupních formátů

Knihovna StaticMaps primárně podporuje PNG jako výstupní formát, ale základní knihovna pro generování obrázků (Sharp) vám umožňuje převádět obrázky do různých jiných populárních formátů souborů, jako je JPEG, GIF nebo dokonce PDF. To může být užitečné při integraci map do různých typů dokumentů nebo médií. Přepínání mezi formáty je jednoduché, protože při ukládání mapy stačí změnit příponu souboru. Zde je příklad, který ukazuje, jak toho dosáhnout v aplikacích Node.js.

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

Křivky pro kreslení tras nebo hranic

Křivky jsou nezbytné pro vizualizaci cest nebo hranic na mapě. StaticMaps můžete použít ke kreslení křivek, takže je to skvělá volba pro aplikace, které zobrazují trasy, jako jsou doručovací služby nebo aplikace pro sledování kondice. Následující příklad ukazuje, že mezi několika souřadnicemi je nakreslena červená křivka, která představuje trasu. Barvu a šířku křivky můžete snadno upravit tak, aby vyhovovala stylu vaší aplikace.

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