Fly to a Location in Maptoolkit Maps JS
map.flyTo in Maptoolkit Maps JS moves the camera to a new center and zoom by animating along an arc that zooms out and back in, giving a sense of spatial travel. You can control the speed, curve, and zoom level of the transition through options. Use flyTo for search result navigation, story-map transitions, or any interaction where you want the user to feel the geographic distance between the current view and the destination.
const API_KEY = 'YOUR_API_KEY';
const map = 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,
attributionControl: { compact: false }
});
map.addControl(new maptoolkit.NavigationControl(), 'top-right');
document.getElementById('fly').addEventListener('click', () => {
map.flyTo({
center: [16.3738, 48.2082],
zoom: 13,
bearing: 0,
speed: 1.5,
curve: 1.42,
essential: true
});
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Fly to a Location - Maptoolkit Maps JS</title>
<meta property="og:description" content="Animate the map camera to a new location using a smooth fly-to transition." />
<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%; }
#fly {
position: absolute;
top: 10px;
left: 10px;
padding: 10px 20px;
background: #ee8a65;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 14px;
}
</style>
</head>
<body>
<div id="map"></div>
<button id="fly">Fly to Vienna</button>
<script>
const API_KEY = 'YOUR_API_KEY';
const map = 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,
attributionControl: { compact: false }
});
map.addControl(new maptoolkit.NavigationControl(), 'top-right');
document.getElementById('fly').addEventListener('click', () => {
map.flyTo({
center: [16.3738, 48.2082],
zoom: 13,
bearing: 0,
speed: 1.5,
curve: 1.42,
essential: true
});
});
</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.
How it works
flyTo animates along an arc that zooms out, travels, and zooms back in, which reads as
covering distance rather than cutting to a new place. The duration scales with distance, so a
short hop is quick and a continental jump is not.
jumpTo is the instant counterpart, and easeTo moves in a straight line at constant zoom.
The choice is about what you want the user to understand: flyTo communicates “somewhere
far”, easeTo “just over there”, jumpTo “a different view entirely”.
speed and curve tune the arc, and duration overrides the distance-based timing outright.
Any user interaction cancels the animation unless essential: true is set. That flag also
makes the animation run for users who have asked the operating system to reduce motion, so
use it for movement that carries meaning and leave it off for decoration.
Next steps
Flying between fixed coordinates is the demonstration. The version people build flies to something the user chose, which usually means a search box: the Geocoding API returns coordinates and a bounding box, and fitting the box is often better than flying to the point because it picks the zoom for you.
Where the destination is a feature on the map rather than a search result, flying to it on click and offering a way back to the starting view is the pattern worth building.