Skip to content
Home
Maptoolkit Maps JS
Examples
Display a Non-Interactive Map

Display a Non-Interactive Map in Maptoolkit Maps JS

A non-interactive map in Maptoolkit Maps JS is created by disabling all default interaction handlers, including drag, scroll zoom, double-click zoom, and keyboard navigation. You can do this by setting interactive: false in the map constructor options. Use this for decorative map images, print layouts, or any context where the map is for display only and you do not want users to pan, zoom, or rotate it.

const API_KEY = 'YOUR_API_KEY';

    new maptoolkit.Map({
        container: 'map',
        apiKey: API_KEY,
        style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
        center: [11.39085, 47.27574],
        zoom: 12,
        interactive: false,
        attributionControl: { compact: false }
    });
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Display a Non-Interactive Map - Maptoolkit Maps JS</title>
    <meta property="og:description" content="Render a static map without zoom, pan, or rotation controls." />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/@maptoolkit/maps@11.0.0-beta.3/dist/maptoolkit.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@maptoolkit/maps@11.0.0-beta.3/dist/maptoolkit.css" />
    <style>
        html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
        #map { width: 100%; height: 100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    const API_KEY = 'YOUR_API_KEY';

    new maptoolkit.Map({
        container: 'map',
        apiKey: API_KEY,
        style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
        center: [11.39085, 47.27574],
        zoom: 12,
        interactive: false,
        attributionControl: { compact: false }
    });
</script>
</body>
</html>

Use the prompt below with any LLM to get the same result. Make sure the Maptoolkit MCP server is connected first — check out AI Integration & MCP to get started.

Use the Maptoolkit Connector. Create a non-interactive map with zoom level 12, centered around [11.39085, 47.27574].

How it works

interactive: false at construction disables every handler at once: dragging, scroll zoom, double-click zoom, keyboard navigation, rotation and touch gestures. Disabling them one by one afterwards is the same result with more code and more to forget.

This is the right shape for a map that is an illustration rather than a tool: a location on a contact page, a thumbnail in a list, a map inside a card that is itself a link.

The map is still a live WebGL canvas. It loads tiles, holds a context and costs memory, so for a map that never moves and is never interacted with, the Static Maps API returns an image and costs nothing on the client.

Attribution still applies. It is not interaction, and the requirement does not depend on whether the map moves.

Next steps

A static map usually wants to lead somewhere, so the next step is making it a link: to a larger interactive map, to directions, or to a detail page. A map that cannot be touched and does not go anywhere is a picture.

If it is genuinely a picture, make it one. The Static Maps API returns an image that loads faster, works without WebGL and costs nothing on the client, which is almost always the better trade for a thumbnail or a contact page.

Related Examples

Display a Hybrid Satellite Map with Terrain ElevationDisplay a Popup