Generate Static Map Images Using OpenStreetMap Tiles – tiny-static-map.js

Preview:

Description:

Tiny Static Map is a 1KB JavaScript library that creates static maps centered on specific coordinates using OpenStreetMap tiles.

How it works:

This library takes a location (latitude and longitude), a zoom level, and dimensions (width and height), and then creates a static map image.

• Converting latitude and longitude to pixel coordinates
• Determining which map tiles to request
• Calculating precise positioning for each tile
• Assembling tiles into a cohesive map image

Use Cases:

• Contact Pages: Show your business location without the overhead of a fully interactive map.
• Event Listings: Display a venue location quickly and easily.
• Dashboards: Present location-based data without needing user interaction.
• Limited Bandwidth Situations: The small size is perfect when you need a map but want to minimize data usage.
• Article Enhancement: Quickly visualize locations within articles.

How to use it:

1. D0wnload and add the tiny-static-map.js file to your HTML document.

<script src="tiny-static-map.js"></script>

2. Create an empty div element where your map image will go.

<div id="my-map"></div>

3. Creates a static map centered on specified coordinates.

• lat (number): The latitude of the map’s center point.
• lon (number): The longitude of the map’s center point.
• zoom (number): The map’s zoom level. Use higher numbers (like 15-18) for more detail, and lower numbers (like 5-10) for a wider view.
• width (number): The map’s width in pixels.
• height (number): The map’s height in pixels.

const container = document.querySelector('#my-map');
createStaticMap(container, lat, lon, zoom, width, height);