Tiny Static Map is a compact and efficient JavaScript library, optimized to create static map images using OpenStreetMap (OSM) tiles. Weighing in at approximately 1 kB, it enables web developers to easily integrate customizable maps into their projects without compromising performance.

Key Features

• Lightweight: At around 1 kB, Tiny Static Map ensures a minimal footprint on your web application.
• Customizable Dimensions: Render maps in any size by specifying width and height, suited perfectly for responsive layouts.
• Easy to Implement: Simply load the library and call createStaticMap to generate your map with just a few lines of code.
• Zoom Control: Tailor your map's zoom level to show detailed areas or broad regions with ease.

Example Usage

To demonstrate how to include a static map on your webpage, here's a quick example:

<div id="map-container"></div>
<script src="tiny-static-map.js"></script>
<script>
  const container = document.querySelector('#map-container');
  createStaticMap(container, 37.7749, -122.4194, 12, 300, 300);
</script>

This example centers a 300x300 pixel map over San Francisco, identified by its coordinates (latitude 37.7749, longitude -122.4194), at a zoom level of 12.

Function Reference

The core function of the library is:

createStaticMap(container, lat, lon, zoom, width, height)

Generates a static map image centered on specified coordinates, with user-defined dimensions and zoom levels.

• Parameters:

  • container (HTMLElement): The target HTML element that will hold the map, such as document.getElementById('map-container').
  • lat (number): Latitude for the center point of the map.
  • lon (number): Longitude for the center point of the map.
  • zoom (number): Adjusts the map's zoom; higher values (15-18) provide more detail, while lower values (5-10) cover larger areas.
  • width (number): Desired width of the map image in pixels.
  • height (number): Desired height of the map image in pixels.

• Returns: The method operates directly on the DOM to create the map within the predefined container.

Tile Attribution

It's important to give credit to OpenStreetMap contributors when utilizing this library for your mapping needs.

With Tiny Static Map, you can efficiently enhance your web applications with interactive and visually appealing static maps!