Open Source Library for Static Maps Creations in Node.js

Getting Started with StaticMaps

The recommend way to install StaticMaps is using NPM. Please use the following command for a smooth installation.

npm i staticmaps 

Customizable Map Generation in Node.js

One of the primary features of open source StaticMaps library is its ability to generate highly customizable maps inside Node.js applications. Software Developers can specify the image dimensions, center coordinates, zoom levels, tile layers and much more. These parameters give developers fine-grained control over the appearance of the map. In the following code example, the map is centered around Berlin, Germany, with a zoom level of 12 and an image size of 800x600 pixels. You can easily adjust these parameters based on your application's needs.

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

Markers for Pointing Locations in Node.js

StaticMaps provides the ability to add markers to a map. Markers are useful for highlighting specific locations, such as points of interest, user locations, or other important spots. The open source StaticMaps library makes it easy for software developers to add markers for pointing out the a specific location inside their Node.js applications. The following example demonstrates how to add custom marker (using an external image) to a location on the map. You can specify the size and position of the marker, as well as use different icons for various locations.

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

Multiple Output Formats Support

The StaticMaps library primarily supports PNG as the output format, but the underlying image generation library (Sharp) allows you to convert images into various other popular file formats such as JPEG, GIF, or even PDF. This can be handy when integrating maps into various types of documents or media. Switching between formats is simple, as you only need to change the file extension when saving the map. Here is an example that show how to achieve it inside Node.js applications.

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

Polylines for Drawing Routes or Boundaries

Polylines are essential for visualizing paths or boundaries on a map. You can use StaticMaps to draw polylines, making it a great choice for applications that display routes, like delivery services or fitness tracking apps. The following example shows, a red polyline is drawn between several coordinates to represent a route. You can easily adjust the color and width of the polyline to suit your application's style.

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