Skip to main content

Center on Coordinates

|

This example demonstrates how to center the map camera on specific geographic coordinates with a custom zoom level.

Live Demo​

Overview​

The example highlights the following features:

  • Initializing a map view
  • Defining geographic coordinates
  • Centering the map camera on specific coordinates
  • Setting a custom zoom level

Code Implementation​

Initialize Map and Center on Coordinates​

index.ts
import {
  GemKit,
  GemMap,
  Coordinates,
  PositionService
} from '@magiclane/maps-sdk';
import { GEMKIT_TOKEN } from './token';

let map: GemMap | null = null;

window.addEventListener('DOMContentLoaded', async () => {
  const gemKit = await GemKit.initialize(GEMKIT_TOKEN);
  await PositionService.instance;

  const container = document.getElementById('map-container');
  if (!container) throw new Error('Map container not found');

  const viewId = 2;
  const wrapper = gemKit.createView(viewId, (gemMap: GemMap) => {
    map = gemMap;
  });
  if (wrapper) container.appendChild(wrapper);

  // Center Coordinates button
  // ...UI code omitted...
});

Center on Coordinates Function​

index.ts
function onCenterCoordinatesButtonPressed() {
  if (!map) {
    showMessage('Map not ready yet');
    return;
  }

  // Predefined coordinates for Rome, Italy
  const targetCoordinates = new Coordinates({
    latitude: 41.902782,
    longitude: 12.496366
  });

  // Use the map to center on coordinates with zoomLevel option
  map.centerOnCoordinates(targetCoordinates, { zoomLevel: 60 });
  showMessage('Centering on Rome, Italy');
}

Key Features​

  • Coordinates Class: Create geographic positions with latitude and longitude
  • Center Camera: Use centerOnCoordinates() to move the map camera
  • Zoom Level: Control the zoom level (higher values = more zoomed in)
  • User Feedback: Display messages to inform users of map actions

Understanding Zoom Levels​

  • Low values (1-20): World or continent view
  • Medium values (20-60): Country or city view
  • High values (60-100): Street or building view

Next Steps​

Last updated on