Display a Non-Interactive Map
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/[email protected]/dist/maptoolkit.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@maptoolkit/[email protected]/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].