{
  "id": 17794863,
  "title": "Put a real map on your page with plain HTML — no API key, no per-view bill, no tile server",
  "url": "https://urgent.news/2026/11/02/put-a-real-map-on-your-page-with-plain-html-no-api-key-no-per-view",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-11-02T12:36:51.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/metataro/put-a-real-map-on-your-page-with-plain-html-no-api-key-no-per-view-bill-no-tile-server-53ah"
  },
  "original_language": "en",
  "account": "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.\n\nHowever, 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.\n\nMMJ 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.\n\nThe 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.",
  "summary": "Most sites that need a map end up with one of three options. The first is a commercial map API that bills per view. The second is the OpenStreetMap tile server, but its Tile Usage Policy rules out commercial and heavy-traffic use. The third is a tile server you run yourself, which you then have to keep running. There is a fourth option, because almost nobody needs the whole planet . You need the…",
  "key_points": [
    "MMJ is an open-source set of Web Components for maps",
    "Generates PMTiles file from Protomaps daily build",
    "Reduces hosting costs by serving single file"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}