Put a real map on your page with plain HTML — no API key, no per-view bill, no tile server

Many websites rely on three main map options. The first is a commercial map API, which charges per view. The second option is the OpenStreetMap tile server, but its usage policy disallows commercial and heavy-traffic utilization. The third choice involves setting up your own tile server, which you must then maintain.

However, there is an additional option available, as MMJ, an open-source set of Web Components plus a tool for extracting map tiles, demonstrates. By borrowing the map data and owning the appearance, MMJ allows you to focus on the specifics of your site.

MMJ simplifies the process by cutting your area into a single file. With just one command, you can generate a PMTiles file from a bounding box provided by the Protomaps daily build of the entire planet. A city-sized map ranges from 10-60 MB and is produced within a minute. Serving this file on static hosting means your website will only need to deploy this file, reducing your hosting costs.

The eight custom elements, written as plain ES modules, render the map using MapLibre. These elements include mmj-map, mmj-marker, mmj-poi, mmj-cluster, mmj-route, mmj-circle, mmj-raster, and mmj-fill. To use MMJ, install the necessary components and follow the provided installation guide. The project is available in multiple languages, including Japanese, Traditional Chinese, Simplified Chinese, and Vietnamese.

Remember to display the © OpenStreetMap contributors notice on the map, as the data is licensed under the ODbL, while the code, styles, and components are under the MIT license.