Skip to main content

Hello Map

|

This example demonstrates how to create a basic interactive map using the Maps SDK for TypeScript.

Overview​

The example demonstrates the following features:

  • Initializing the Maps SDK for TypeScript
  • Creating and displaying an interactive map
  • Basic map container setup

Code Implementation​

Initialize GemKit and create a map​

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

let map: GemMap | null = null;

// Initialize GemKit
const gemKit = await GemKit.initialize(GEMKIT_TOKEN);

const viewId = 1;
// Create a view with the specified ID
const wrapper = gemKit.createView(viewId, (gemMap: GemMap) => {
  map = gemMap;
});

Live Demo​

HTML Structure​

Add a container element for the map in your HTML:

index.html
<!DOCTYPE html>
<html>
<head>
  <title>Hello Map</title>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    #map-container {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="map-container"></div>
</body>
</html>

Key Features​

  • Simple Setup: Minimal code required to display a map
  • Async Initialization: GemKit initializes asynchronously for optimal performance
  • View Management: Each map view has a unique ID for managing multiple maps
  • Callback Pattern: Map instance is provided via callback when ready

Explanation of Key Components​

  • GemKit.initialize(): Initializes the SDK with your API token and returns a GemKit instance
  • createView(): Creates a map view with a unique ID and returns a wrapper element
  • Map Callback: The callback function receives the GemMap instance when ready
  • Container Element: A DOM element where the map will be rendered

Next Steps​

Last updated on